this seems to be a common problem with react navigation once they updated their API
looked at Fix Error: The component for route 'Home' must be a React component
neither profile nor camera components want to load into this tabNavigator. Any suggestions?
Camera.js
import React, { Component } from 'react';
class Camera extends Component {
render() {
return (
<Text>Camera</Text>
);
}
}
export default Camera;
InstaClone.js
import React, { Component } from 'react'
import { View, StyleSheet} from 'react-native'
import Camera from './components/screens'
import {MainFeed, Login, Profile} from './components/screens'
import { createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
const Tabs = createBottomTabNavigator({
feed: MainFeed,
Camera: Camera,
profile: Profile
});
const MainStack = createAppContainer(createSwitchNavigator({
login: Login,
main: Tabs
}));
const MainStack = createAppContainer(Tabs);
class InstaClone extends Component {
render() {
return <MainStack/>
}
}
export default InstaClone;
Related
In my app.js file, I have a Navigator and I am attempting to wrap it in a redux store in order to control the state throughout my app. I am receiving this error though:
"Invariant Violation: The navigation prop is missing for this navigator. In react-navigation v3 and v4 you must set up your app container directly."
How can I properly wrap my navigator in the Redux store so I can use it?
App.js
import React from 'react';
import { registerRootComponent } from 'expo';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './store/reducers'
// Components
import Home from './Screens/Home';
import Landing from './Screens/Landing';
import Tasks from './Screens/Tasks';
import Login from './Screens/Login';
const middleware = applyMiddleware(thunkMiddleware)
const store = createStore(reducer, middleware)
const Navigator = createStackNavigator({
Tasks: {screen: Tasks},
Landing: {screen: Landing},
Home: { screen: Home },
});
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Navigator />
</Provider>
)
}
}
I figure out how to accomplish this. Below is the updated code with my App wrapped in a store container.
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './store/reducers'
// Components
import Home from './Screens/Home';
import Landing from './Screens/Landing';
import Tasks from './Screens/Tasks';
import Login from './Screens/Login';
const middleware = applyMiddleware(thunkMiddleware)
const store = createStore(reducer, middleware)
const Navigator = createStackNavigator({
Tasks: {screen: Tasks},
Landing: {screen: Landing},
Home: { screen: Home },
});
//ADDED THIS
const App_1 = createAppContainer(Navigator);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<App_1 /> //UPDATED
</Provider>
)
}
}
using react-navigation v4, this is my code I am facing this error, I have also checked the documentation
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '#expo/vector-icons';
import MyHomeScreen from './screen/Homescreen';
import MyNotificationsScreen from './screen/Notification';
const TabNavigator = createBottomTabNavigator({
Home: MyHomeScreen,
Notifications: MyNotificationsScreen,
});
const AppContainer = createAppContainer(TabNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
Make sure that you are connected with the same network, your system and mobile should be connected with the same wifi and also you have to upgrade your Expo CLI.
createStackNavigator is giving error :
null is not an object (evaluating 't(r(d[1])).default.direction')
Not able to get is this error because of an import statement or anything else. Any help will be appreciated
My code for app.js is below:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './screens/Login';
import Home from './screens/Home';
const AppNavigator = createStackNavigator({
LoginScreen: { screen: Login },
HomeScreen: { screen: Home }
});
export default class App extends Component {
render() {
return (
<AppNavigator />
);
}
}
getting error:
Don't forget to:
import { createAppContainer } from 'react-navigation'
and wrap the StackNav with it like:
const AppContainer = createAppContainer(AppNavigator)
In your App Component instead of <AppNavigator/>, set <AppContainer/>.
I am new to React native and implementing react navigation but getting the component for route must be a react component even i exported my component
I have check all related answer but all in vain.
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import Launch from './Launch';
AppRegistry.registerComponent(appName, () => Launch);
Below is launch
import React from 'react';
import AppNavigator from './AppNavigator'
export default class Launch extends React.Component {
render() {
return (
<AppNavigator></AppNavigator>
);
}
}
App Navigator
//..........................
import React, { Component } from 'react';
import LoginScreen from './components/src/Login/LoginScreen'
import App from './components/src/App';
import Register from './components/src/Signup/Register';
import ViewPagerPage from './components/src/Settings/CPU/ViewPagerPage'
import TabIndicatorPage from './components/pages/TabIndicatorPage'
import TitleIndicatorPage from './components/pages/TitleIndicatorPage'
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
const RootStack = createStackNavigator({
LoginScreen: { screen: LoginScreen },
TabIndicatorPage: { screen: TabIndicatorPage },
TitleIndicatorPage: {
screen: TitleIndicatorPage, navigationOptions: {
header: null
}
},
ViewPagerPage: { screen: ViewPagerPage },
Register: {
screen: Register, navigationOptions: {
header: null
}
},
App: {
screen: App,
navigationOptions: {
header: null
}
},
ViewPagerPage: { screen: ViewPagerPage },
// Detail:{screen:Detail},
// SecondScreen:{screen:SecondScreen},
});
const AppNavigator = createAppContainer(RootStack);
export default AppNavigator;
Here it is Login Controller giving error I also used export.
import React, {Component} from 'react';
import {View,ScrollView,KeyboardAvoidingView,Animated,ImageBackground,
TouchableOpacity,TextInput, KeyboardAwareScrollView,StyleSheet,Image,Easing,Text,AsyncStorage,ToastAndroid} from 'react-native';
import App from '../App';
import bgSrc from './images/wallpaper.png';
import logoImg from './images/logo.png';
import { NavigationActions,StackActions } from 'react-navigation'
import usernameImg from './images/username.png';
import passwordImg from './images/password.png';
import spinner from './images/loading.gif';
const MARGIN = 40;
import Dimensions from 'Dimensions';
//Login Controller
export default class LoginScreen extends React.Component<{}> {
constructor(props) {
super(props);
this.state = { Login: false,showPass: true,
press: false,
isLoading: false,
navigator:this.props.navigator,
email:'',
Expected Login Screen should come
But I am getting red screen saying component must be react
I have the following React Native App set up and I'm trying to use the Toast component from Native Base:
app.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import { Root } from "native-base";
import {StackNavigator} from 'react-navigation';
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
export default class myApp extends Component {
render() {
return (
<Root>
<AppNavigator />
</Root>
);
}
}
const Screens = StackNavigator({
Main: {screen: MainView},
Config: {screen: ConfigView}
})
AppRegistry.registerComponent('myApp', () => Screens);
MainView.js (simplified)
import React, {Component} from 'react';
import { StyleProvider, Card, CardItem, Left, Right, Body, Icon, Toast, Header, Fab } from 'native-base';
import {StackNavigator} from 'react-navigation';
export default class MainView extends Component {
....
showError = (msg, err) => {
console.log("[ERROR]", err);
Toast.show({
text: msg,
position: this.state.toastPosition,
buttonText: this.state.toastErrorBtn
});
}
....
}
I've tried several ways, but keep getting this error:
Your app should start with rendering myApp component, like this:
AppRegistry.registerComponent('myApp', () => myApp);.
Inside myApp you should render your app navigator which is Screens not AppNavigator, that is how you named it.
This is how your app.js should look:
import React, { Component } from 'react';
import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
import {AppRegistry} from 'react-native';
export default class myApp extends Component {
render() {
return (
<Root>
<Screens />
</Root>
);
}
}
const Screens = StackNavigator({
Main: {screen: MainView},
Config: {screen: ConfigView}
})
AppRegistry.registerComponent('myApp', () => myApp);
We should use Root component
import { Root } from "native-base";
<Root>
// Screen
</Root>