React Native - Show native header back icon-CodePudding

is there a way how to show native back icon (different for android nad iOS) in custom header? I have created custom header, but have no idea how to show them.

I'm using react-navigation version 6

My stack:

 <Stack.Navigator screenOptions={
    stackOptions({
       header: (props: any) => <Header {...props}/>,
       headerRight: () => HeaderActionIcon({
          icon: <SvgSettings/>,
         action: () => navigation.navigate('Settings')
       })
  })}>

My header component:

const Header = ({ ...props }: any) => {

const { options, navigation } = props

return (
    <View style={styles.container}>
        <Image
            resizeMode='repeat'
            source={require('../../assets/img/pattern.png')}
            style={styles.image}
        />
        <View style={styles.wrapper}>
            {/* Back press icon */}
            <View style={styles.leftItem}>
                {/* Back icon should be here.. */}
            </View>
            {/* Stack title */}
            <View style={styles.textWrapper}>
                <Text style={[options.headerTitleStyle, styles.titleText]} numberOfLines={1}>
                    { options.title }
                </Text>
            </View>
            {/* Settings icon */}
            <View style={styles.rightItem}>
                { options.headerRight() }
            </View>
        </View>
    </View>
)}

Thanks for every answer

CodePudding user response：

Here is a sample.

import * as React from 'react';
import { View, Text, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () =>
        Platform.select({
          android: <Text>{'Left android'}</Text>,
          ios: <Text>{'Left ios'}</Text>,
        }),
      headerRight: () =>
        Platform.select({
          android: <Text>{'Right android'}</Text>,
          ios: <Text>{'Right ios'}</Text>,
        }),
    });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
import * as React from 'react';
import { View, Text, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () =>
        Platform.select({
          android: <Text>{'Left android'}</Text>,
          ios: <Text>{'Left ios'}</Text>,
        }),
      headerRight: () =>
        Platform.select({
          android: <Text>{'Right android'}</Text>,
          ios: <Text>{'Right ios'}</Text>,
        }),
    });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;