ReactNative 屏幕背景和标题图标

Question

I have background image like below

On top of the screen background image, I have to place icon at the center like below,

Vertical mode view

Full screen or horizontal mode

How can I place circle icon in the background image without clipping image in full screen. Because in full screen the curve shaped image is not visible and icon appear in the middle of screen.

<SafeAreaView style={styles.container}>
<ImageBackground
  style={{flex: 1}}
  source={require('../../assets/images/test.png')}
  >
  <View style={styles.container}>
  <Image
        source={require('../../assets/icons/app_icon.png')}
        style={{
          width: 200,
          height: 200,
          marginTop: 100
        }}
      />
   
    <View style={styles.contentCenter}>
      
      <Text style={styles.textStyle}>
        The Big Bang Theory
      </Text>
    </View>
  </View>
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    
  },
  title: {
    fontSize: 25,
    padding: 15,
    color: 'white',
    fontWeight: 'bold',    
    textAlign: 'center',    
  },
  contentCenter: {
    justifyContent: 'center',
    alignItems: 'center',
   
  },
  textStyle: {
    color: 'white',
    padding: 10,
  }
}

Answer 1

There are multiple things here that can affect this

First of all, you haven't provided resizeMode to your ImageBackground that's probably why your curve is not showing up in full screen.

Second, You can use position: 'absolute' and then top , bottom , left , right property to position your image on top of ImageBackground . zIndex can also affect your View here