Top & Bottom Black Borders Are Surrounding The React Native App In IPhone 11 Simulator

I am new to react-native. I tried to build a sound player for animals using a react-native sound player. I could successfully launch the Android App without any design issues. But

Solution 1:

Your view render item in splace screen I have changed safearea view design remove two properties from stylesheet

render() {
  return (
    <SafeAreaView
    contentContainerStyle={{
        flex: 1,
      }}>
      <Image source={BG} style={styles.bg} resizeMode="cover" />
      <Text style={styles.text}>{'Powered By'}</Text>
      <Image source={CL} style={styles.logo} resizeMode="contain" />
    </SafeAreaView>
  );
 }
}

Also, change your image stylesheet bg

bg: {
  flex: 1
  width: ComponentStyles.WIDTH,
  height: ComponentStyles.HEIGHT,
}

This is work for me I used style sheet of image like above code it works for me fine, hope this work for you