Example on React Native Routes
This section will make a simple app that uses routes for navigation between screens. In the components folder, we have created three files:
- App.js: This file contains all the information about the routes.
- home.js: This file contains the screen shown in the first.
- user.js: We intend to go to this screen from the home screen.
App.js
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from './components/home.js';
import UserScreen from './components/user.js';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: UserScreen
},
},{
initialRouteName: "Home"
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
homes.js
import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
export default class Homescreen extends Component {
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#005252',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text style={styles.titleText}>Home Screen</Text>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.props.navigation.navigate('About')}
title="Go To User Screen"
color="orange"
/>
</View>
<View style={styles.bottomText}>
<Text>
<Text style={styles.bottomText1}>code</Text>
<Text style={styles.bottomText2}>studio</Text>
</Text>
<Text>Powered By</Text>
<Text style={styles.bottomText3}>Coding Ninjas</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'teal'
},
buttonContainer: {
flex: 1,
margin: 30
},
titleText: {
fontSize: 30,
color: 'black',
fontWeight: "bold"
},
bottomText: {
marginBottom:30,
textAlign: 'center',
alignItems: "center",
},
bottomText1: {
fontSize: 25,
fontWeight: 'bold',
},
bottomText2: {
fontSize: 25,
},
bottomText3: {
fontWeight: 'bold',
color: 'orange'
}
})
user.js
import React, { Component } from 'react';
import { Button, View, Text, StyleSheet, Image, HeaderButtons
,HeaderButtonComponent,Item } from 'react-native';
export default class UserScreen extends Component {
static navigationOptions = {
title: 'User',
headerStyle: {
backgroundColor: '#005252',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text style={styles.titleText}>User Screen</Text>
</View>
<View style={styles.bottomText}>
<Text>
<Text style={styles.bottomText1}>code</Text>
<Text style={styles.bottomText2}>studio</Text>
</Text>
<Text>Powered By</Text>
<Text style={styles.bottomText3}>Coding Ninjas</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'teal'
},
titleText: {
fontSize: 30,
color: 'black',
fontWeight: "bold"
},
buttonContainer: {
flex: 1,
margin: 30,
},
bottomText: {
marginBottom:30,
textAlign: 'center',
alignItems: "center",
},
bottomText1: {
fontSize: 25,
fontWeight: 'bold',
},
bottomText2: {
fontSize: 25,
},
bottomText3: {
fontWeight: 'bold',
color: 'orange'
}
})
Output:
Also see, React Native Reanimated
Frequently Asked Questions
What is the use of TouchableOpacity in react native?
This is a wrapper for making views respond to touches properly. The opacity of the wrapped view is reduced when you press down, darkening it. Wrapping the children in an Animated reduces their opacity.
What are components in react native?
Components in react native are reusable blocks of code that are self-contained. They accomplish the same thing as JavaScript functions, but they work independently and return HTML. Class and Function components are the two sorts of components available.
What are props in the react-native?
Props are, how React Native components' properties are pronounced. Most components in React Native can be changed using different parameters at the time of their construction. Props are the terms for these parameters. They can't be modified because they're immutable.
Conclusion
In this article, we have thoroughly discussed the Router in React Native we discussed how to create the routes in the router and also discussed one simple example.
We hope that this blog has helped you increase your knowledge regarding the Router. To get more content like this check out the awesome content on the Coding Ninjas Website, Android Development, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Experiences, CodeStudio Contests, Coding Ninjas Studio Test Series and Coding Ninjas Courses. Do not forget to upvote our blog to help other ninjas grow.
Happy Coding!
85+ registered