Hay dos maneras de lograr esto

1.) Establecer options en la pantalla misma

Puede usar el gancho useLayoutEffect para lograr esto

En la pantalla donde desea colocar este encabezado, es decir, la pantalla Profile , simplemente agregue el siguiente código

 React.useLayoutEffect(() => { navigation.setOptions({ headerLeft: () => ( <Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} onPress={() => navigation.goBack()} // make sure you destructure the navigation variable from the props // or otherwise you'll have to write it like this // onPress={() => props.navigation.goBack()} /> ), }); }, [navigation]);

Y su contenedor de navegación debería verse como

 <NavigationContainer> <Stack.Navigator screenOptions={{}}> <Stack.Screen name="home" component={Home} /> <Stack.Screen name="MyProfile" component={Profile} options={{ headerTintColor: 'white', title: 'My Profile', headerTransparent: true, headerShadowVisible: false, }} /> </Stack.Navigator> <ModalPortal /> </NavigationContainer>;

Eche un vistazo al ejemplo de trabajo aquí

2.) Establezca los apoyos headerLeft y headerRight en el contenedor de navegación

Estableciendo las propiedades en el NavigationContainer, así

 <NavigationContainer> <Stack.Navigator screenOptions={{}}> <Stack.Screen name="home" component={Home} /> <Stack.Screen name="MyProfile" component={Profile} options={({ navigation, route }) => ({ headerTintColor: 'white', title: 'My Profile', headerTransparent: true, headerShadowVisible: false, headerRight: () => ( <TouchableOpacity> <DrawerIcon size={30} color={'white'} name="md-reorder-two-sharp" /> </TouchableOpacity> ), headerLeft: () => ( <TouchableOpacity onPress={() => navigation.goBack()}> <Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} /> </TouchableOpacity> ), })} /> </Stack.Navigator> <ModalPortal /> </NavigationContainer>

Eche un vistazo al ejemplo de trabajo aquí

Ha proporcionado TouchableOpacity como el botón Atrás, pero no ha especificado ninguna devolución de llamada onPress . Debe proporcionar una devolución de llamada onPress a su TouchableOpacity .

 <NavigationContainer> <Stack.Navigator screenOptions={{}}> <Stack.Screen name='home' component={Home} /> <Stack.Screen name='MyProfile' component={Profile} options={({ navigation, route }) => ({ headerTintColor: 'white', title: 'My Profile', headerTransparent: true, headerShadowVisible: false, headerRight: () => ( <TouchableOpacity> <DrawerIcon size={30} color={'white'} name='md-reorder-two-sharp' /> </TouchableOpacity> ), headerLeft: () => ( <TouchableOpacity onPress={()=> navigation.goBack()}> <Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} /> </TouchableOpacity> ) })} /> </Stack.Navigator> <ModalPortal /> </NavigationContainer>

Si solo desea cambiar la apariencia del botón Atrás, es mejor que utilice los accesorios headerBackImage de la pila react-navigation reactiva.

Aquí hay unejemplo de bocadillo en vivo