React Native - Show native header back icon - react-native

Question

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

Answer 1

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;