Manjul Shrestha Manjul Shrestha - 5 months ago 16
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

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>