I wanted to try the MaterialBottomTabNavigator option in react-navigation. Unfortunately, it seems that the top bar is never displayed, although it should be according to the documentation.
import React from "React";
import { Text, View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default createAppContainer(createMaterialBottomTabNavigator(
{
S1: {
screen: HomeScreen,
},
S2: {
screen: HomeScreen,
},
}
),
);
Is there something obvious I've been missing?
"createMaterialBottomTabNavigator" does not have header bar by default but "createStackNavigator" has header bar
You can try this code
import React from "React";
import { Text, View } from "react-native";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
const Tab1 = createStackNavigator({
S1: {
screen: HomeScreen
}
});
const Tab2 = createStackNavigator({
S2: {
screen: HomeScreen
}
});
export default createAppContainer(
createMaterialBottomTabNavigator({
Tab1,
Tab2
})
);
App Preview
Related
I want to move to a different screen when I have some AsyncStorage item for authFlow but when I am going to the next screen and construction is calling out the function it is not moving to the next screen.
I tried to use the basic method this.props.navigation.navigate('navigator_name'), but i think it's not moving as blank screen is appearing.
App.js
------
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createSwitchNavigator, createAppContainer, } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AuthLoadingScreen from './screens/auth-loading-screen';
import WelcomeScreen from './screens/welcomeScreen';
import AppHomeScreen from './screens/app-home-screen';
const AuthStackNavigator = createStackNavigator({
welcome: WelcomeScreen
})
// export default
const TestContainer = createAppContainer(createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: AppHomeScreen,
},
{
initialRouteName: 'AuthLoading',
}
))
export default class App extends React.Component {
constructor () {
super()
this.state = {
loggedIn: 'false',
}
}
render() {
return(
<View style={styles.container}>
<TestContainer />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
auth-loading-screen
-------------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, AsyncStorage } from 'react-native';
export default class AuthLoadingScreen extends Component {
constructor (props) {
super(props);
console.log('calling _loadApp')
this._loadApp();
}
_loadApp = async() => {
const userToken = await AsyncStorage.getItem('userToken');
console.log('getting value of token ', userToken, JSON.stringify(this.props.navigation.actions))
this.props.navigation.navigate(userToken ? 'App' : 'Auth')
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
welcomeScreen
-------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, Button} from 'react-native';
export default class WelcomeScreen extends Component {
constructor (props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text>Welcome</Text>
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
The screen should directly move to the welcomeScreen as item is not set through AsynStorage
Your function is asynchronous. However, the constructor cannot execute the asynchronous function. Therefore, you should change the position of executing the function.
async componentDidMount() {
await this._loadApp();
}
I want to show tab bar in my react-native app using react-navigation library. I've tried code from an example provided in the documentation. However, when I run the code on iOS simulator the screen appears to be blank, tab bar doesn't load.
Here's my code so far,
TabNavigator.js
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(TabNavigator);
App.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';
const App = () => {
return (
<View>
<TabNavigator />
</View>
);
};
export default App;
Looking at the App.js code, you forgot to put flex:1 to the view, it's one of the common mistakes that react-navigation tells about in his documentation.
const App = () => {
return (
<View style={ { flex:1} }>
<TabNavigator />
</View>
);
};
Source: https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex
I'm getting an error when trying to load my React-Native App. It seems to be related to NavigatorIOS being undefined. When I try to use a text component, that works fine, so is the problem specific to how I'm using NavigatorIOS?
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Fragment, Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
NavigatorIOS,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class SearchPage extends Component<{}> {
render() {
return (<Text style={styles.description}>Search for houses to buy! (Again)</Text>);
}
};
console.log(NavigatorIOS)
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
initialRoute={{
component: SearchPage,
title: 'My Initial Scene',
}}
style={{flex: 1}}
/>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
I'm getting an error as follows:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
NavigatorIOS is Deprecated since 0.6.
Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html
Example react-navigation:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
'use strict';
import React,{Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Button,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class HomePage extends Component<{}> {
render() {
return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to SecondPage" onPress={() => this.props.navigation.push('SecondPage')}/>
</View>
}
};
class SecondPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Second Page</Text>
<Button title = "Go to Third Page" onPress={() => this.props.navigation.navigate('ThirdPage')}> </Button>
</View>
}
};
class ThirdPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Third Page</Text>
<Button title = "Go to Home Page" onPress={() => this.props.navigation.navigate('Home')}> </Button>
</View>
}
};
const AppNavigator = createStackNavigator(
{
Home : HomePage,
SecondPage : SecondPage,
ThirdPage : ThirdPage,
},
{
initialRouteName: 'Home',
}
);
const Appcontainer = createAppContainer(AppNavigator);
export default class App extends Component<{}> {
render() {
return <Appcontainer />;
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
I've been trying to navigate from Text to another screen but this error pops up, can anyone please help
This is a testing sheet for a bigger problem I have posted here Navigate when clicking on image doesn't work , I am trying to structure my code to navigate from an Image to a page. Thanks for helping
import React from 'react';
import { AppRegistry, StyleSheet, View, Image, TouchableOpacity, Text } from "react-native";
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import AddDocScreen from './Menu/AddDocScreen'
export default class Mock extends React.Component {
render() {
const navigate = this.props.navigation
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => navigate.navigateToScreen(navigationAction)}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
)
}
}
const navigationAction = NavigationActions.navigate({
routeName: 'AddDocSreen',
})
function navigateToScreen(navigationAction) {
() => {
return navigationAction
}
}
const doc = createStackNavigator({
AddDocScreen: { screen: AddDocScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(215,215,215,1)',
alignItems: 'center',
justifyContent: 'center',
},
})
Use it like this:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import AddDocScreen from './Menu/AddDocScreen'
class Mock extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',backgroundColor: 'rgba(215,215,215,1)'}}>
<Text>Home Screen</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Mock: Mock,
AddDocScreen: AddDocScreen,
{
initialRouteName: 'Mock',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
I have defined all the navigators in a navigator.js file. I want to import it. How do I do that without getting any errors? This is my navigator.js file.
import React, {Component} from 'react';
import {
Platform,
View,
Button,
SafeAreaView,
} from 'react-native';
import {
createAppContainer,
createDrawerNavigator,
createBottomTabNavigator,
createStackNavigator,
DrawerItems,
} from 'react-navigation';
/** NAVIGATORS DEFINED **/
const WelcomeTabNavigator = createBottomTabNavigator({
Welcome: {screen: WelcomeScreen},
Profile,
Settings,
},
{
tabBarOptions: {
activeTintColor: '#fb9800',
inactiveTintColor: '#7e7b7b',
style: { height: 40,backgroundColor: '#fff',borderTopWidth:0.5,borderTopColor: '#7e7b7b' },
labelStyle: {fontSize: 20}
},
navigationOptions:({navigation}) => {
const {routeName} = navigation.state.routes[navigation.state.index];
return {
headerTitle: routeName
};
}
})
const WelcomeStackNavigator = createStackNavigator({
WelcomeTabNavigator: WelcomeTabNavigator
},
{
defaultNavigationOptions:({navigation}) => {
return {
headerLeft: (
<Icon
style={{paddingLeft: 20}}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
})
const AppDrawerNavigator = createDrawerNavigator({
Welcome: {screen: WelcomeStackNavigator},
},
{
contentComponent:(props) => (
<View style={{flex:1}}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<Button
title="Logout"
onPress={() => {
props.navigation.navigate('Home')
}}
/>
</SafeAreaView>
</View>
),
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
})
const AppStackNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Welcome: {screen: AppDrawerNavigator}
});
const AppContainer = createAppContainer(AppStackNavigator);
This is my app.js file
import React, {Component} from 'react';
import {
Platform,
View,
Button,
SafeAreaView,
} from 'react-native';
import {
createAppContainer,
createDrawerNavigator,
createBottomTabNavigator,
createStackNavigator,
DrawerItems,
} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import HomeScreen from './screens/HomeScreen.js';
import WelcomeScreen from './screens/WelcomeScreen.js';
import Profile from './screens/ProfileScreen.js';
import Settings from './screens/SettingsScreen.js';
class App extends React.Component {
render() {
return <AppContainer />;
}
}
export default App;
This is my index.js file
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
I want to know how to import the navigator.js file and connect these 3 files. My navigator.js file contains different navigators like tab navigator , drawer navigator, stack navigator etc. So how can I import all these in a single attempt?
You can combine all the navigators in one page, as long as you import all the pages.
import WelcomeScreen from './WelcomeScreen.js',
import ProfileScreen from './ProfileScreen.js',
import SettingsScreen from './SettingsScreen.js',
import LogoutScreen from './LogoutScreen.js',
const WelcomeTabNavigator = createBottomTabNavigator({
Welcome: {screen: WelcomeScreen,},
Profile: {screen: ProfileScreen,},
Settings: {screen: SettingsScreen,},
},
const WelcomeStackNavigator = createStackNavigator({
Home: {screen: WelcomeTabNavigator,},
Logout: {screen: LogoutScreen,},
})
class App extends React.Component {
render() {
return <WelcomeStackNavigator />;
}
}
export default App;
I like to tell you very simple way to update use navigation.
Below is an example of your index.js file
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Main } from './navigation/Main';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
export class App extends Component {
render() {
return (
<View style={ styles.container }>
<Main />
</View>
);
}
}
Then here is your Main.js which is your navigation class. You can declare all your screen here.
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import { FirstScreen } from '../screens/FirstScreen';
import { SecondScreen } from '../screens/SecondScreen';
const RootStack = createStackNavigator({
FirstScreen: {
screen: FirstScreen,
key: 'FirstScreen',
navigationOptions: {
gesturesEnabled: false,
},
},
SecondScreen: {
screen: SecondScreen,
key: 'SecondScreen',
navigationOptions: {
gesturesEnabled: false,
},
},
});
export const Main = createAppContainer(RootStack);
Now you can simply navigate from one screen to other.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
class FirstScreen extends Component {
onGetStarted() {
const { navigate } = this.props.navigation;
navigate('SecondScreen');
}
render() {
return (
<View style={ styles.container }>
<TouchableOpacity
style={ styles.welcome }
onPress={ () => this.onGetStarted() }
>
<Text>
Welcome to React Native!
</Text>
</TouchableOpacity>
<Text style={ styles.instructions }>This is screen 1</Text>
</View>
);
}
}
export { FirstScreen };