Why is there a difference in header behaviour between IOS and Android - Expo Application/React Navigation

Good day!

I was wondering if someone had any insights to this differing header behaviour between IOS (iPhone 6, version 12) and Android (Pixel 4, API 26)? On Android the icon is correctly at the start of the header but on IOS it is stuck in the middle.

AndroidIOS

const Header = () => {return(<View style={{flex:1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', backgroundColor:'#ff00ff'}}><MaterialIcons name="menu" size={30} color="#ffffff" /></View>)}

I am not sure if it is relevant but this component is used as a header title in a stack navigation used in React Navigation.

const StackNav = ({name, component}) => {const Stack = createStackNavigator()return(<Stack.Navigator><Stack.Screen            name={name}            component={component}            options={{                headerTitle: props => <Header/>,                headerStyle: {                    backgroundColor: '#043E22',                 },            }}        /> </Stack.Navigator>)}

Thank you!