React Native navigation bar and button
Here we will be focusing on header navigation. We will add buttons to the header, which is the best way to interact with a header. We have already learned about bottom tabs. Let's create buttons in the header, and then we will understand the code part by part.
Create two files named first.js and second .js
First.js code:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
const First = ({navigation}) => {
React.useLayoutEffect(() => {
navigation.setOptions({
headerTitle: (props) => (
<Text
{...props}
style={{color: 'black', fontWeight: 'bold',fontSize:26}}>
tutorials and examples
</Text>
),
headerStyle: {
backgroundColor: '#b3ffff'
},
});
}, [navigation]);
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#e6ffff'}}>
<View style={styles.container}>
<Text style={styles.header}>
this is first page
</Text>
<Text>Welcome :)</Text>
<TouchableOpacity
onPress={() => navigation.navigate('Second')}
style={styles.button_Style}>
<Text style={styles.text_Style}>
Click to see Left and Right align header
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
export default First;
const styles = StyleSheet.create({
container: {
flex: 1,
padding:30,
},
button_Style: {
height: 40,
padding: 10,
backgroundColor: '#b3ffff',
borderRadius: 2,
marginTop: 12,
},
header: {
fontSize: 30,
textAlign: 'center',
fontWeight:'bold',
marginVertical: 200,
},
text_Style: {
color: 'black',
},
});
Second.js code:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
const Second = ({navigation}) => {
React.useLayoutEffect(() => {
navigation.setOptions({
title: 'Second Page',
headerStyle: {
backgroundColor: '#99ffcc',
},
headerTitleStyle: {
fontWeight: 'bold',
fontSize:20,
padding:15
},
headerLeft: () => (
<TouchableOpacity
onPress={() => alert('hello from left menu')}
style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>Left Menu</Text>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity
onPress={() => alert('hello from Right Menu ')}
style={{marginRight: 25}}>
<Text style={{color: 'black'}}>Right Menu</Text>
</TouchableOpacity>
),
});
}, [navigation]);
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#ccffe6'}}>
<View style={styles.container}>
<Text style={styles.header}>
welcome :) you can see right and left option here
</Text>
</View>
</SafeAreaView>
);
};
export default Second;
const styles = StyleSheet.create({
container: {
padding: 20,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 25,
marginVertical: 25,
textAlign: 'center',
},
text_Style: {
color: '#fff',
textAlign: 'center',
},
});
App.js code :
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import First from './first';
import Second from './second';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen name="FirstPage" component={First} />
<Stack.Screen name="SecondPage" component={Second} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Output:
After clicking on the button on the first page, you will be directed to the second page.
After clicking on the left menu, you will get an alert "hello from the left menu," After clicking on the right menu, you will get an alert as "hello from the left menu".
So this was about the creation of a responsive and customized header. Let us discuss some important parts of the code.
Explanation of First page code :
headerTitle: (props) => (
<Text
{...props}
style={{color: 'black', fontWeight: 'bold',fontSize:26}}>
tutorials and examples
</Text>
),
In this part of code we have declared header and given it name “tutorials and example” and styled it.
<TouchableOpacity
onPress={() => navigation.navigate('Second')}
style={styles.button_Style}>
<Text style={styles.text_Style}>
Click to see Left and Right align header
</Text>
</TouchableOpacity>
This part is responsible for the button and connection to the second page.
We have made a button, and we know that the onPress prop decides what will happen after clicking the button. So here we have declared if the user presses the button, then the user will be directed to the second page. You can navigate wherever you want. Just make sure to follow proper syntax and structure.
Second page code explanation :
You must have got some ideas about the basic header from the previous explanation. This file contains the right header and left header, so that we will talk about them.
headerLeft: () => (
<TouchableOpacity
onPress={() => alert('hello from left menu')}
style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>Left Menu</Text>
</TouchableOpacity>
),
This is the left header. We have declared it as a button, and an alert will be given after pressing it. So whatever you want to add to the left header, you have to write it into headerLeft.
headerRight: () => (
<TouchableOpacity
onPress={() => alert('hello from Right Menu ')}
style={{marginRight: 25}}>
<Text style={{color: 'black'}}>Right Menu</Text>
</TouchableOpacity>
),
The same thing has been done to the right header. If you have understood the working of the left header, then understanding the working of the right header is simple as the code is identical. The only difference is the availability and name of it on display.
App.js code :
import First from './first';
import Second from './second';
We have imported components from first.js and second.js file .
<NavigationContainer>
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen name="FirstPage" component={First} />
<Stack.Screen name="SecondPage" component={Second} />
</Stack.Navigator>
</NavigationContainer>
We have already discussed the working of the First Page and Second Page. In App.js code we are using stack navigator. If you have read stack navigator documentation, then understanding this code is simple if not, then please go through the documentation of stack navigation. Two stack screens are defined here and they are taking components of the First Page and Second Page and they are rendered in the output.