How do I wrap the below code into an app-container please? I am trying to update from an older version of native.
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import SplashScreen from './screens/splash.screen';
const Splash = {
screen: SplashScreen,
defaultNavigationOptions: {
header: null
}
}
const RouteConfig = {
initialRoute: 'Splash'
}
const AppNavigator = createDrawerNavigator({
Splash: Splash
},RouteConfig)
export default AppNavigator;
export default createAppContainer(AppNavigator);
Related
When I tried to use useState I get this error:
Component Exception
(0,_reactNative.useState) is not a function.(In'(0,_reactNative.useState)(false)','(0,reactNative.useState)' is undefined)
Source
var children = Component(props, secondArg);
Please help me. I dont understand why I cannot use useState:(
Here is my code:
`
import React from 'react';
import {StyleSheet,View,Text, Modal,useState} from 'react-native';
import { createAppContainer,NavigationContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './android/screens/HomeScreen/index';
import LoginScreen from './android/screens/Login/index'
const AppNavigator = createStackNavigator(
{
Home: {screen: HomeScreen},
Login: {screen: LoginScreen},
},
{
initialRouteName:'Login'
}
);
const AppContainer= createAppContainer(AppNavigator);
export default function App () {
const [modalVisible, setModalVisible] = useState(false);
return (
<AppContainer/>
)
}
As pointed out by Nicholas, import useState from react and not from react-native,
import React, {useState} from 'react';
import {StyleSheet,View,Text, Modal} from 'react-native';
I learning React Native and I'm doing a simple View and setting the style to a container style, but nothing happens when I run the code. The View is now filling with the color read from the code. Its very starter code, just not seeing where its going wrong? When I run this, nothing in the view changes, it just white? I was expecting to see a screen of red?
import React, { useState } from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import { Input } from 'react-native-elements';
import SLSHeader from '../app-components/slsheader';
export default function Home (props) {
return (
<View styles={styles.container}>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
The only place Im using it thus far is in a Navigator file... Its a switch Navigator with a Drawer Navigator...
import React from 'react';
import { createAppContainer, createSwitchNavigator} from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
//import CustomDrawer from './CustomDrawer';
//Import Screens
import LoginScreen from '../screens/Login';
import HomeScreen from '../screens/Home';
//Drawer Screens
const DrawerScreens = {
Home: {
screen: HomeScreen,
navigationOptions:{
headerShown: false
}
}
}
const DrawerNavigator = createDrawerNavigator(DrawerScreens, {
defaultNavigationOptions: {
headerStyle: {
height: 60
}
},
//contentComponent: CustomDrawer
});
//Pre Login Screens
const PreLoginScreens = {
Login: {
screen: LoginScreen,
navigationOptions:{
headerShown: false
}
},
PostLogin: {
screen: DrawerNavigator
}
}
const PreloginNavigator = createSwitchNavigator(PreLoginScreens,{
defaultNavigationOptions: {}
});
export default createAppContainer(PreloginNavigator);
Yes, in the App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SLSNavigator from './Navigation/SLSNavigator';
export default function App() {
return (
<SLSNavigator />
);
}
I am using React Navigation Version 4 and after setting my navigations and all screens and run the code I am facing the following issue:
TypeError: (0, _reactNavigation.default) is not a function.
My Routes.Js is -
import React from 'react';
import createAppContainer from 'react-navigation';
import { createStackNavigator, HeaderBackButton } from 'react-navigation-stack';
import { Drawer } from './Drawer';
import LoginScreen from '../screens/LoginScreen';
import InitialScreen from '../screens/InitialScreen';
import LogoutScreen from '../screens/LogoutScreen';
const RootStack = createStackNavigator(
{
Drawer: {
screen: Drawer
},
LoginScreen: {
screen: LoginScreen
},
LogoutScreen: {
screen: LogoutScreen
}
InitialScreen: {
screen: InitialScreen
}
},
{
initialRouteName: 'InitialScreen',
headerMode: "none"
}
)
const App = createAppContainer(RootStack);
export default App;
and Index.js is -
import React, { Component } from 'react';
import { StyleSheet, AsyncStorage } from 'react-native';
import { Button, Text, Drawer } from 'native-base';
import App from './config/Routes';
import AppHeader from './components/Header/Header';
export default class Index extends Component {
render() {
const { globalContainer } = styles;
return (
<App
style={ globalContainer }
navigation={this.props.navigation}>
</App>
)
}
}
Any help??
It appears from the documentation that it should be a named import, not a default.
import { createAppContainer } from 'react-navigation';
Please read the docs. It's also a good first place to look when debugging.
import React, { useState } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Result from './components/Result';
import Home from './components/Home';
export default class App extends React.Component {
render() {
return (
<AppContainer />
)
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: Home,
},
Result: {
screen: Result
}
}, {
initialRouteName: "Result"
});
const AppContainer = createAppContainer(AppNavigator);
and it **error coming is **
node_modules\expo\AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:25241 Error: createStackNavigator() has been moved to react-navigation-stack. See https://reactnavigation.org/docs/stack-navigator.html for more details.
As said by the error, createStackNavigator() has been moved to react-navigation-stack in react-navigation version 4, so you have to install react-navigation-stack separately.
npm i react-navigation-stack
or
yarn add react-navigation-stack
Hope this helps you. Feel free for doubts.
The component for route 'Feed' must be a React component.
I've checked most of the other similar questions here but the majority of them are due to basic syntax (which maybe I have too but am blind to!). I've removed chunks of code that aren't relevant to this issue (navigationOptions and other screens) and can still reproduce the error with just the below:
./navigators/AppNavigator.js
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import { FeedScreen } from '../screens/FeedScreen';
const FeedStack = createStackNavigator({
Feed: FeedScreen,
});
const DashboardTabNavigator = createBottomTabNavigator(
{
FeedStack
}
);
const DashboardStackNavigator = createStackNavigator(
{
DashboardTabNavigator: DashboardTabNavigator
}
);
const AppContainer = createAppContainer(DashboardStackNavigator);
export default AppContainer;
./screens/DashboardScreen.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import AppContainer from '../navigators/AppNavigator';
class DashboardScreen extends Component {
render() {
return (
<AppContainer />
);
}
}
export default DashboardScreen;
./screens/FeedScreen.js
import React from 'react';
import { View } from 'react-native';
export default class FeedScreen extends React.Component {
render() {
return (
<View>
</View>);
}
}
Any idea what I've done wrong here?
You have a default export for FeedScreen ... not a named export:
Try this:
import FeedScreen from '../screens/FeedScreen';
import { FeedScreen } from '../screens/FeedScreen'
You cannot importe like this if you re exporting by default.
Remove your default export or do replace your importe like this :
import FeedScreen from '../screens/FeedScreen'
You are using export default statement, that means you can´t import like that, you should provide a variable to store the component.
import Component from 'defaultexport'