Définition d'une bordure pour réagir en TextInput natif

Question

Utilisant React natif 0.26,

Mon composant est quelque chose comme ça

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

Et mes 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",
  }
})

Les problèmes auxquels je suis confronté sont

1. La largeur droite de la bordure et la largeur de gauche ne semblent pas avoir d'effet et le texte de substitution commence simplement sur le bord gauche.
2. L'arrière-plan de TextInput est "gris", il est identique à l'arrière-plan de la vue. Je m'attendais à ce qu'il soit blanc par défaut (Feels transparent).
3. Avec le simulateur iOS, comment faire apparaître le clavier, je voudrais définir returnKeyType et voir à quoi ressemble le clavier (et avoir du code sur onSubmitEditing et test).

Capture d'écran ci-dessous:  

Answer 1

1 Vous ne pouvez pas déclarer une bordure spécifique directement sur le TextInput à moins que l'option multiligne soit activée (par exemple, borderLeftWidth ne fonctionnera que si multiline={true} est activé mais borderWidth fonctionnera), mais vous pouvez simplement envelopper le TextInput dans une vue et lui donner une bordure.

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

2 Vous devez déclarer une backgroundColor pour TextInput.

3 Pour que le clavier natif apparaisse, vous devez accéder au menu du simulateur et déconnecter votre matériel. Allez dans Matériel -> Clavier -> Connecter le clavier matériel, désactivez-le.

Answer 2

pour définir l'entrée de texte au centre, procédez comme suit:

alignSelf: 'center'