Setting the border for the reaction of the native TextInput

Question

Using React native 0.26,

My component is something like this

const Search = () => { return ( <View style={styles.backgroundImage}> <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/> </View> ) } 

And my styles:

 const styles = StyleSheet.create({ backgroundImage: { flex : 1, flexDirection: "column", justifyContent: 'center', alignItems: 'center' }, textInput: { justifyContent: "center", alignItems: "stretch", borderRightWidth: 30, borderLeftWidth: 30, height: 50, borderColor: "#FFFFFF", } }) 

The problems I have encountered are

• The width of the right edge and the width of the left edge have no effect, and the placeholder text only starts on the left edge.
• The Background TextInput "gray" is the same as the background "View". I expected the default would be white (transparent).
• With the iOS simulator, how to call the keyboard, I would like to set returnKeyType and see what the keyboard looks like (and have code for onSubmitEditing and a test).

Screenshot below:

Answer 1

1 You cannot declare a specific border directly in TextInput if multi-line is enabled (for example, borderLeftWidth does not work if multiline={true} not enabled, but borderWidth will work), but you can just wrap TextInput in Browse and give it a border.

 inputContainer: { borderLeftWidth: 4, borderRightWidth: 4, height: 70 }, input: { height: 70, backgroundColor: '#ffffff', paddingLeft: 15, paddingRight: 15 } 

2 You need to declare backgroundColor for TextInput.

3 To open the native keyboard, you need to go to the simulator menu and turn off your equipment. Go to the "Hardware → Keyboard → Connect Hardware Keyboard" section. Unplug it.