How to remove the back button in the header react native - react-native

Question

I want to remove the button back, but leave the header.
My component is as follows. I want to leave the title, and I don’t need the back button.
import React from 'react';
import { View } from 'react-native';
export const TrucksScreen = () => {
return (
<View>
....
</View>
);
});
TrucksScreen.navigationOptions = {
headerTitle: 'Trucks Screen',
};
How can I remove the button back?

Answer 1

Using headerLeft: null will be deprecated in future versions.
Instead use a function like so :
TrucksScreen.navigationOptions = {
headerTitle: 'Trucks Screen',
headerLeft: () => {
return null;
},
};
Cheers !

Answer 2

set headerLeft: null in the navigation Options. and this will remove the back button from the head as I did in the last line of code.
import React from 'react';
import { View } from 'react-native';
export const TrucksScreen = () => {
return (
<View>
....
</View>
);
});
TrucksScreen.navigationOptions = {
headerTitle: 'Trucks Screen',
headerLeft: null,
};
I hope it will help. Ask for doubts

Answer 3

According to the docs you can replace the header back button with whatever you want by passing options param in stack navigator . Do find the working example : expo-snack:
import * as React from 'react';
import { View, Text, Button, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('#expo/snack-static/react-native-logo.png')}
/>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <LogoTitle {...props} />,
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#00cc00"
/>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Hopeit helps. feel free for doubts

Answer 4

import React from 'react';
import { View, TouchableOpacity, Image, Text } from 'react-native';
import PropTypes from 'prop-types';
import style from '../../../utils/style';
import images from '../../../images/images';
class Header extends React.Component {
constructor(props) {
super(props);
}
onRightIconPress = () => {
if (this.props.onRightIconPress) {
this.props.onRightIconPress();
}
};
render() {
const { title, navigation, showBackIcon, showRightIcon, rightIcon } = this.props;
return (
<View style={style.headerrowcontainer}>
{/* Back Button*/}
{showBackIcon ? (
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image resizeMode="contain" source={images.iconback} style={style.backimage} />
</TouchableOpacity>
) : (
<View />
)}
{/* Title */}
<Text style={style.titleheader}>{title}</Text>
{/* Right Icon */}
{showRightIcon ? (
<Image name={rightIcon} style={style.rightIcon} onPress={this.onRightIconPress} />
) : (
<View />
)}
</View>
);
}
}
Header.defaultProps = {
title: '',
};
Header.propTypes = {
title: PropTypes.string,
};
export default Header;

Answer 5

Home: {
screen: HomeScreen,
navigationOptions: {
headerLeft: null,
}
}
try setting headerLeft: null

Answer 6

Doesn't work in RN6.
TrucksScreen.navigationOptions = {
headerTitle: 'Trucks Screen',
headerLeft: () => {
return null;
},
};