Comment régler le soucis du keyboard qui cache l’input ?

React-Native header

Quand vous affichez un input vers le bas de votre page, que se passe t’il quand le clavier du téléphone apparait ?

On est bien d’accord, le clavier vient cacher la zone de saisie et c’est très loin d’être ergonomique pour l’utilisateur !

Je vous présente ici une solution simple et rapide. Il s’agit du module react-native-keyboard-aware-scroll-view qui permets d’englober votre view avec une KeyboardAwareScrollView et de donner le comportement suivant :

Mieux non ?

Je vous présente mon rapide test (ios) en partant de zéro :

react-native init keyboardAwareScrollTest

cd keyboardAwareScrollTest

npm i react-native-keyboard-aware-scroll-view –save

J’ai ici créée le projet, puis ajouté le module. Ensuite dans le fichier index.ios.js, je transforme le render ainsi :

Et vous avez ensuite le rendu vu plus haut. Très simple, pas compliqué à mettre en place et vos utilisateurs vous remercieront !

Ce code fonctionne avec iOs et Android bien entendu.

3 Commentaires

    1. Bonjour Raphael,

      C’est une autre solution 🙂 J’utilise celui de l’article mais « l’officiel » Facebook fonctionne très bien aussi.

  1. Merely wanna say that this is invaluable , Thanks for taking your time to write this.

Laisser un commentaire