SafeAreaView not working on IOS

[algarcia-vector]

SafeAreaView not working on IOS

[arnnis]

This should be fixed in the new version 3.4.0

[algarcia-vector]

I was able to fix this problem by double wrapping first a SafeAreaView then a View, both with flex: 1 finally the ToastProvider.

it's working like this:

export function Navigation() {
  const {accessToken} = useSelector((state: RootState) => state.login);
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <ToastProvider
          renderType={{
            success: toast => (
              <View style={styles.subMainContainer}>
                <View style={styles.topContainer}>
                  <View style={styles.leftContainer}>
                    <SuccessfullAlertIcon />
                  </View>
                  <View style={styles.rightContainer}>
                    <View style={styles.titleContainer}>
                      <View style={styles.positionTitle}>
                        <Text style={styles.titleText}>{toast.data}</Text>
                      </View>
                      <TouchableOpacity
                        style={styles.iconContainer}
                        onPress={() => {
                          toast.onHide();
                        }}>
                        <BlackCrossIcon />
                      </TouchableOpacity>
                    </View>
                    <View style={styles.subTitleContainer}>
                      <Text style={styles.message}>{toast.message}</Text>
                    </View>
                  </View>
                </View>
              </View>
            ),
          }}>
          {!accessToken ? <LoginStack /> : <MainStack />}
        </ToastProvider>
      </View>
    </SafeAreaView>
  );
}

[eleversa]

This solution has not worked for me. Has anyone managed to make the top toast look correctly in ios?

[donaldkwong]

I got it to render correctly by first using react-native-safe-area-context to get the safe top and bottom insets and then using those insets as values for the offsetTop and offsetBottom properties of the ToastContainer.

[eleversa]

@donaldkwong This sounds good. Finally, I have solved it using this fork:#167 (fix safeareaview issue with toast notifications on notch devices)