Manjul Shrestha Manjul Shrestha - 1 year ago 126
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{
<View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}>
<TextInput style = {TextInputStyle.default}/>
<Text> Hello again! </Text>

After calling
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.


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'}}>
          <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1, width:150}}/>
        <Text> Hello again! </Text>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download