Title in React Native
React Native is a JavaScript Framework that is employed to create native mobile apps using JavaScript and React. It uses an equivalent style as React and maintained by Facebook and a community of individual developers and corporations. React Native is incredibly helpful to create Android and IOS Apps. Headers are navigation components that display information and actions relating to the current screen.
In order to use params in the title, we need to make options prop for the screen a function that returns a configuration object. It might be tempting to try to use this.props inside of options, but because it is defined before the component is rendered, this does not refer to an instance of the component and therefore no props are available. Instead, if we make options a function then React Navigation will call it with an object containing { navigation, route } - in this case, all we care about is route, which is the same object that is passed to your screen props as route prop. You may recall that we can get the params through route. params, and so we do this below to extract a param and use it as a title.
how to set navigation title in react native
The static property of a screen component is called navaigationOptions. It is either an object or a function. It returns an object containing several configuration options. you can add navigation dependancy in your project. In following example we create two screens. when we press the button we go to the next screen. we add header in navigationOptions.
__________________________________________________________________________
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
class FirstScreen extends React.Component {
static navigationOptions = {
title: 'FirstScreen',
headerStyle: {
backgroundColor: '#f4511e',
},
//headerTintColor: '#0ff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>First Screen</Text>
<Button
title="Go to Next Screen"
onPress={() => this.props.navigation.push('Second')}
/>
</View>
);
}
}
class SecondScreen extends React.Component {
static navigationOptions = {
title: 'Second',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#0ff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Second Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
First: FirstScreen,
Second: SecondScreen
},
{
initialRouteName: "First"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
_______________________________________________________________________________________
OUTPUT:
how to set header title in center in react native
First you need to import react-native-gesture-handler, stack navigator, navigation container. in Options you add title name, set headerTitleAlign to center. Then you add style for header using headerStyle set the background for header.
___________________________________________________________________________________
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
const MainStack = createStackNavigator();
const HomeScreen = props => {
return (
<View style={styles.screen}>
<Text>Title Screen</Text>
</View>
);
};
function App() {
return (
<NavigationContainer>
<MainStack.Navigator>
<MainStack.Screen
name="home"
component={HomeScreen}
options={{
title: 'Title',
// Center the header title on Android
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#34FDC0',
},
}}
/>
</MainStack.Navigator>
</NavigationContainer>
);
}
export default App;
/// Just some styles
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
_______________________________________________________________________________________
