0

For some stupid reason the following code keeps rendering the TextInput and then the ImageBackground, so the background is always covering up the children:

return <View>
   <ImageBackground
     style={{
        width: 375,
        height: 750,
        justifyContent: 'center',
        zIndex: -1,
     }}
     source={require('../../assets/iphonex.png')} 
    >

    <TextInput 
      onChangeText={(text) => this.studentSearch({ text })}
        placeholder="Search"
        style={{
          backgroundColor: 'transparent',
          textAlign: 'center',
          fontSize: 30,
          padding: 40,
        }}
      />
    </ImageBackground>
  </View>

I had to put the width/height hardcoding to make the background image render properly ... otherwise it gives me just a portion of the image for some reason. Maybe that's what's causing trouble?

Thanks!

ether_joe
  • 1,068
  • 1
  • 13
  • 32
  • It is rendering `textInput` above the image as mentioned [here](https://snack.expo.io/BkYJPxZTM). – Pritish Vaidya Apr 27 '18 at 19:16
  • actually I do see the textInput flash briefly in the expected alignment, in the middle of the center of the view, and then the imagebackground covers it up. – ether_joe Apr 27 '18 at 19:48

0 Answers0