TextInput in react native iOS

Question

I have a TextInput component in react native

<TextInput
            style={styles.searchBar}
            value={this.state.searchText}
            onChange={this.setSearchText.bind(this)}
            placeholder='Search State'
         />

This is working perfectly fine in android, but Textbox is not showing in iOS app. And, there is no what to find what the issue is.

Can anybody help with this issue ?

Answer 1

Here is a code sample that demonstrates the need to provide a height for the TextInput component on iOS. It's not explicitly stated in the docs but reviewing it closely you'll notice the iOS section of the code samples provides a height while the android samples do not. Here is a complete code sample that displays a TextInput in the center of the view:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TextInput,
  View
} from 'react-native';

class MyApp extends Component {
  constructor (props) {
    super(props);
    this.state = {
      searchText: ''
    };
  }

  setSearchText (e) {
    this.setState({
      searchText: e.target.value
    });
  }

  render () {
    return (
      <View style={styles.container}>
        <TextInput
              style={styles.searchBar}
              value={this.state.searchText}
              onChange={this.setSearchText.bind(this)}
              placeholder='Search State'
           />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  searchBar: {
    borderWidth: 1,
    height: 40
  }
});

AppRegistry.registerComponent('MyApp', () => MyApp);

If this doesn't help as a sanity check in debugging your code, please post the style definition (styles.searchBar) you have configured for your TextInput so we can give that a better test.