Manjul Shrestha Manjul Shrestha - 1 year ago 83
iOS Question

Text input view not render properly

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.
enter image description here

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 Source

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>