Search code examples
react-nativeabsolutesafeareaview

View with absolute position in SafeAreaView in React Native

I need to place a <View> with position: 'absolute' so it can overlay another view below. I want this not to be behind the status bar in iOS, so I've put everything inside a <SafeAreaView>.

Unfortunately, the absolute position seems to be relative to the full screen instead of its parent view (the SafeAreaView).

Is there a trick?

const styles = StyleSheet.create({
    safeAreaView: {
      flex: 1,
    },
    map: {
      flex: 1,
    },
    userLocationButton: {
      position: 'absolute',
      right: 12,
      top: 12,
    },
  });

  return (
    <SafeAreaView style={styles.safeAreaView}>
        <ClusteredMapView style={styles.map} />
      )}
        <TouchableOpacity style={styles.userLocationButton}>
          <Image source={UserLocationButton} />
        </TouchableOpacity>
      )}
    </SafeAreaView>
  );

enter image description here

Solution

  • I had the same issue, fixed it by wrapping the absolute element with another View.

    <SafeAreaView style={{flex: 1}}>
    <View style={{flex: 1}}>
        <TouchableOpacity style={{height: 40, width: 40, borderRadius: 20}} />
    </View>
</SafeAreaView>