react native - navigation.setOptions not working on ios but working on android

Question

i am having a strange problem where i am able to set custom option in android but same thing is not working in ios. here is my code which set the header:

         navigation.setOptions(
                {
                    headerTitle: (props) => <StoreHeader title={route.params.name} phoneNumber = {route.params.storePhoneNumber} address={route.params.storeAddress} ></StoreHeader>,
                }
            ); 

it works well in android but does not work in ios. look at the screenshot below (iphone does not get the StoreHeader component rendered at all):

Code for storeheader component is as follows:

export function StoreHeader(props) {
    return (
        <View style={{flexDirection:"row"}}>
            <View style={{flex:0.8, justifyContent:"center", alignItems:"center"}}>
            <Text style={{fontSize:20, fontWeight:"bold"}}>{props.title}</Text>
            <Text style={{fontSize:10}}>{props.address}</Text>
            </View>
            <View style={{flex:0.2, justifyContent:"center", alignItems:"center"}}>
            <TouchableOpacity onPress={async () => {console.log(props.phoneNumber);await Linking.openURL(`tel:${props.phoneNumber}`);}}> 
                    <Ionicons name="call-outline" size={40} color="green" ></Ionicons>
            </TouchableOpacity>
            </View>
        </View>
    );
}

question from:https://stackoverflow.com/questions/65600268/navigation-setoptions-not-working-on-ios-but-working-on-android

Answer 1

Waitting for answers