在 Testflight 版本中 React Native 元素的位置是错误的

Question

I don't understand why the positionning of these elements changes on the Testflight version of my app like bellow, it is supposed to be all aligned on the same line.

I am unable to reproduce this bug on both real device and simulator but when I open my app in Testflight, it shows.

Any idea what this could be linked to?

Here is my code:

<View style={{flex: 1}}>
  <SafeAreaView />
  <View style={{display: 'flex', flexDirection: 'row', marginBottom: 5}}>
    <ButtonIcon
      uri={require('../../image/filter.png')}
      onPress={() => props.navigation.navigate('FilterModal', {activityType: activityType})}
    />
    <View style={{flex: 1}}>
      <SearchBar search={search} onChange={(value) => setSearch(value)} />
    </View>
    <ButtonIcon
      uri={require('../../image/add.png')}
      onPress={() => props.navigation.navigate('Activity')}
    />
  </View>

Answer 1

The SafeAreaView Component is probably messing with your layout depending if it is on a device with a notch or not. You need to place your other code inside the SafeAreaView to prevent this:

<SafeAreaView style={{flex: 1}}>
  <View style={{flex: 1}} />
  <View style={{display: 'flex', flexDirection: 'row', marginBottom: 5}}>
    <ButtonIcon
      uri={require('../../image/filter.png')}
      onPress={() => props.navigation.navigate('FilterModal', {activityType: activityType})}
    />
    <View style={{flex: 1}}>
      <SearchBar search={search} onChange={(value) => setSearch(value)} />
    </View>
    <ButtonIcon
      uri={require('../../image/add.png')}
      onPress={() => props.navigation.navigate('Activity')}
    />
    </View>
  </SafeAreaView>