headerLeft

스택 스크린에서 안드로이드와 ios의 기본 백버튼의 모양은 다르다.

A chevron on iOS
An arrow on Android

만약 이미지만 변경한다고 할 경우에는 headerBackImageSource이것을 써도 됨
이때는

headerBackImageSource:require('../../Resources/Images/Icons/back.png')

이런식으로 이미지 리소스를 넣어줘야한다.

headerLeft를 쓸때에는 함수형으로 ReactNode를 리턴시켜준다.

headerLeft: props => <BackImage {...props} />

export default function BackImage({ color, ...args }) {
	const navigation = useNavigation()
	const width = Platform.OS === 'ios' ? 'w-[55px]' : 'w-[30px]'
	const { onPress, ...rest } = args
	const handlePress = () => {
		navigation.goBack()
	}
	return (
		<TouchableOpacity
			className={`flex-row py-0.5 pr-2 justify-center ${width}`}
			activeOpacity={0.7}
			{...rest}
			onPress={handlePress}
		>
			<Ionicons
				name="chevron-back-outline"
				size={24}
				color={color || parseTailwindColor('gray-800')}
			/>
		</TouchableOpacity>
	)
}