React Native - Starting content under camera

_Luke_ · October 11, 2023

Hi, please forgive me if this is something basic, I'm currently learning React Native but am stuck at this point.

So I know that SafeAreaView cannot be used for Android devices so following a YouTube tutorial I have added this line to the styles:

paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,

The problem I'm facing is while this works and the content is now under the status bar, the punch hole from the camera is covering it, please see my attached screenshot from the Android emulator.
Is it possible to do this so that the content appears under the camera as well?

Ill add my full code here:

import { 
  StyleSheet,
  Text,
  SafeAreaView,
  StatusBar,
  Platform
} from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.txt}>Test Text</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'center',
    flexDirection: 'row',
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },

});