I have setup a brand new project using react-native init <proj> and it builds fine. I have added react-navigation to the project following the docs. However, I cannot get passed this error:
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
Even using the single file stack example from their documentation:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
});
export default createAppContainer(AppNavigator);
It does not work. I am at a loss to what the issue could be here as I am using a base install with their working example and nothing else added. I have tried everything from restarting the bundler to clearing all caches I can think of.
Make sure you're registering the component:
const App = createAppContainer(navigator):
AppRegistry.registerComponent(appName, () => App)
Related
i was doing a new app with react native i'm using rails/graphql but the problem is when i try to call the api url in my app with the configuration that i've made. it doesnt work at all (lauching expo cli), the error that o get is:
[Error: Network error: Network request failed]
i've already set the ip address of my pc instead of 'localhost' but i dont get any results my code is:
// React
import React from 'react';
// React-native
import { StyleSheet, Text, View } from 'react-native';
// Components
import Test from './app/components/Test/index';
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context';
// 2
const httpLink = createHttpLink({
uri: 'http://my-ip-address:3000/graphql'
})
// 3
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})
export default class App extends React.Component {
render() {
console.log('client ', client)
return (
<ApolloProvider client={client}>
<Test />
</ApolloProvider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
the component that is calling the query is:
// React
import React, { Fragment } from 'react';
// React-native
import { StyleSheet, Text, View } from 'react-native';
// React Apollo
import { graphql } from 'react-apollo';
import {flowRight as compose} from 'lodash';
// Queries
import queries from './queries';
class Test extends React.Component {
constructor() {
super();
}
render() {
console.log('props ', this.props);
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>
Se conecto! 🎉
</Text>
</View>
);
}
}
export default compose(
graphql(queries.getSpots, { name: 'getSpots' }),
)(Test);
everything with the configuration was fine, the only thing that was happening was the way to start the rails server with my current version of rails. so instead of start off rails server with "rails s" i had to use "rails -b 0.0.0.0". after that i could connect my app from android emulator to my localhost:3000/graphiql
I didn't read your code but I know problem:
go to infor.plist
add (or change key) to react native - ios allow your api url
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>Your-API-URL-ROOT-HERE</key>
<dict>
<!--Include to allow subdomains-->
<key>NSIncludesSubdomains</key>
<true />
<!--Include to allow HTTP requests-->
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true />
<!--Include to specify minimum TLS version-->
<key>NSTemporaryExceptionMinimumTLSVersion</key>
<string>TLSv1.1</string>
</dict>
</dict>
</dict>
This is my first ever React Native app. I am trying to use MapView from react-native-maps, but am running into this error: "Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'." I am viewing my app in web view (if that matters). I have installed and linked react-native-maps. Here is my current code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import { requireNativeComponent } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
And the errors:
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/MapView.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/decorateMapComponent.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/decorateMapComponent.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
I had the same problem, and finally i realised that this is due to the compatibility of MapView with web browser, you can check it in Platform Compatibility.
Probably you are trying to run this code in the web browser, so you will have this error due to the MapView import.
I suggest two options:
1- try to add this script to your index.html, replace the API_KEY with your Google Maps API:
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
type="text/javascript"
></script>
2-Change the way you test and run the app in some mobile device using expo, normally it will work well.
My SplashScreen page is not being exported by the AppNavigator even though the variable is declared and read, on the SplashScreen page.
I have tried to use createDrawerNavigator but I get the same result. I have tried to reset the cache with:
rm -rf node_modules && npm install
npm start -- --reset-cache
I have tried to reInstall the createDrawerNavigator
The error is below:
Unable to resolve module `./navigation/AppNavigator` from
`/Users/jaseyacey/Desktop/beermeapp4/screens/Splash.Screen.js`:
The module `./navigation/AppNavigator` could not be found from
`/Users/jaseyacey/Desktop/beermeapp4/screens/Splash.Screen.js`.
Indeed, none of these files exist:
The SplashScreen code is below:
import React, {Component } from 'react';
import {Image, View } from 'react-native';
import { inject } from 'mobx-react';
import AppNavigator from './navigation/AppNavigator';
import { createDrawerNavigator } from 'react-navigation-drawer';
#inject("stores")
class SplashScreen extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
const {stores, navigation } = this.props;
setTimeout(() => {
navigation.navigate("Login")
}, config.store.SplashTime )
}
render() {
const { stores } = this.props
return (
<View style={{flex: 1}}>
<image style={{flex: 1, width: null, height: null}} source= {config.store.SplashImg}/>
</View>
)
}
}
export default AppNavigator;
You should add you Splash Screen into your App Navigator and there you will create an App Container with your navigation type (drawer navigation in this case) and export the App Navigator containing your splash Screen as your first screen of navigation.
I don't have a Splash Screen on my project yet, but you can see how I configured my App Navigation here: https://github.com/pahferreira/destetik-mobile/blob/master/src/navigation/AppNavigation.js
Or you can check here on their documentation: https://reactnavigation.org/docs/en/hello-react-navigation.html
I'm kinda new to react-native and I'm currently trying to add a stack-navigator to my app:
// import React from 'react';
import {Text, View, AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
// class HomeScreen extends React.Component {
// static navigationOptions = {
// title: 'Welcome',
// };
// render() {
// return (
// <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
// <Text>Home Screen</Text>
// </View>
// );
// }
// }
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen}
}, {
initialRouteName: 'Home'
})
const NavigationApp = createAppContainer(MainNavigator);
AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)
export default NavigationApp
If I uncomment the commented code in the above example, everything works fine, now I'm trying to move the HomeScreen component to its own file so I tried this:
HomeScreen.js
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
index.js
import HomeScreen from './components'
import {AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen}
}, {
initialRouteName: 'Home'
})
const NavigationApp = createAppContainer(MainNavigator);
AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)
export default NavigationApp
But I keep getting this error:
error: bundling failed: Error: Unable to resolve module `./components` from `index.js`:
None of these files exist:
* components(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* components/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
at Object.resolve (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/lib/transformHelpers.js:267:42)
at /Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31
at Array.map (<anonymous>)
at resolveDependencies (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)
at /Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
In the past I've been able to import them the same way as I did, but somehow react-navigation is giving me problems with it.
The folder structure that I have is as follows:
/
index.js
components/
HomeScreen.js
I have seen similar questions but all of them involved third-party components from react but not ones made by oneself.
I have tried to npm start --reset-cache as suggested in this answer
I'm using these versions if it matters.
react-native-cli: 2.0.1
react-native: 0.61.2
How to fix this error?
After following #Vencovsky proposed solution (with and without .js extension):
import HomeScreen from './components/HomeScreen.js'
I get this new error:
The component for route 'Home' must be a React component. For example:
import MyScreen from './MyScreen';
...
Home: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
Home: MyNavigator,
}
The way I'm calling this React app is through a Swift bridge in this way:
import Foundation
import UIKit
import React
class ButtonController: UIViewController {
#IBOutlet weak var button: UIButton!
#IBAction func buttonClicked(_ sender: Any) {
if let jsBundleLocation = URL(string: "http://X.X.X.X:8081/index.bundle?platform=ios") {
//The data is used as initialProperties to React Native App.
let data:NSDictionary = ["onNavigationStateChange": "{handleNavigationChange}",
"uriPrefix":"/app"]; //We can use this parameter to pass the data to the React native App from the Native App.
//The RCTRootView is a native view used to host React-managed views within the app. Can be used just like any ordinary UIView.
let rootView = RCTRootView(
bundleURL: jsBundleLocation,
moduleName: "ReactNativeApp",
initialProperties: data as [NSObject : AnyObject],
launchOptions: nil)
let viewController = UIViewController()
viewController.view = rootView
self.present(viewController, animated: true, completion: nil)
}
}
}
You need to import it as
import HomeScreen from './components/HomeScreen.js'
If you only import it as './components', it will try to get ./components.js or ./components/index.js (and the same but with other extensions), but you don't have any of that.
And if you take a look at the error, it says it tried to get these files but didn't find.
None of these files exist:
* components(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* components/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
First line with * - Trying to get ./components.js and other extensions
Second line with * - Trying to get ./components/index.js and other extensions
I solved the second issue after #Vencovsky answer by changing:
export class HomeScreen extends React.Component
To:
export default class HomeScreen extends React.Component
After reading this answer / comment on GitHub.
i cannot find a way to make react-navigation work at all. i copied the working examples from the internet but they don't seem to work too. can someone tell me what i am doing wrong.
i'm using
node: 8.9.4
react: 16.3.0-alpha.1
react-native: 0.54.0
react-navigation: ^1.4.0
//index.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {
TabNavigator,
StackNavigator
} from 'react-navigation';
import Home from './first';
import Homes from './second';
export default class demoApp extends Component {
render() {
return (
<SimpleNavigation/>
);
}
}
export const SimpleNavigation = StackNavigator({
Home: {
screen: Home,
header: { visible: false },
navigationOptions: {
title: 'Home',
header: null
},
},
Homes: {
screen: Homes,
navigationOptions: {
title: 'second'
},
},
},{});
Here's the first tab
//first.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableHighlight
} from 'react-native';
export default class Home extends Component {
constructor(props){
super(props);
this.state = {zipCode: ''}
}
navigate = (zipCode) => {
this.props.navigation.navigate('Search', zipCode);
}
render() {
return (
<View>
<View>
<Text>An application to do things</Text>
<TextInput
placeholder='Enter a Zip Code'
onChangeText={(zipCode) => this.setState({zipCode})}
>
</TextInput>
</View>
<View>
<TouchableHighlight onPress={() => this.navigate(this.state.zipCode)}>
<Text>
Search
</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
i cant seem to make it run at all. I tried following many other tutorials as well. But none of them worked. What am i doing wrong?
I kept getting this error too today, and it was very annoying. Was able to get rid of it by removing the Terminal window with "Metro" bundler stuff, and then recompiling the app.
Seems like it's not the code, but rather the runtime environment (which seems to work well with only one app example at a time). You can double check this by doing a super simple app that should work.
Close your Nodejs Terminal and run again
Just kill all node process and start npm server and run application:
Step1: run command killall -9 node
Step2: run command npm start
Step3: run command react-native run-ios OR react-native run-android