Text input view not render properly

Question

As a beginner on React Native, I decided to have a look at layouts. I have a component like this with a text input component and a text component.

class TextView extends Component{
render(){
return(
  <View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}>
  <TextInput style = {TextInputStyle.default}/>
  <Text> Hello again! </Text>
  </View>
)
}
}

After calling TextView component on root file index.ios.js the output seems like this.

As you can see only text if following the stylesheet but not the text input. Any help will be appreciated.

Edit

This is what TextInputStyle looks like

const TextInputStyle = StyleSheet.create({
default : {
  color : 'darkgrey',
  fontSize : 14,
  backgroundColor : 'red',
  height : 20,
  width : 100,
  }
})

Answer 1

First thing, you have not specified what's inside TextInputStyle.default, may be that is overriding the css style. Try to wrap TextInput in a view.

  <View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}>
        <View>
          <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1, width:150}}/>
        </View>
        <Text> Hello again! </Text>
    </View>