Et si le clavier mobile ne servait plus juste à taper ?
Mais à enrichir l’interface.
Je m'explique :
Avant, on subissait le clavier.
On essayait de l’éviter.
De le masquer.
De le contourner.
Aujourd’hui, on construit avec lui.
On transforme un espace vide… en surface utile.
Voici les nouveautés qui changent tout :
→ 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱𝗘𝘅𝘁𝗲𝗻𝗱𝗲𝗿
Afficher du contenu dans la zone du clavier.
Exemples :
- Montants rapides (5€, 10€, 20€)
- Suggestions contextuelles
- Actions liées à la saisie
Pourquoi c’est fort :
- Moins de clics
- Moins de frictions
- Une UX qui s’enchaîne naturellement
→ 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱𝗕𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱𝗩𝗶𝗲𝘄
Contrôler l’arrière-plan du clavier.
Tu fais matcher le fond de ton UI avec celui du clavier.
Tu peux même ajouter des éléments collés au clavier.
Use cases :
- Boutons "envoyer", "valider", emoji
- Impression que le clavier fait partie de l’UI
Combo puissant :
KeyboardBackgroundView + KeyboardStickyView
→ 𝘂𝘀𝗲𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱𝗦𝘁𝗮𝘁𝗲 avec sélecteurs
Le hook accepte maintenant des sélecteurs.
Tu extrais seulement la donnée utile (ex : height).
Avantages :
- Moins de re-renders
- Composants plus légers
- Code plus clair
→ Fin des deep imports
Tout passe par des APIs publiques.
Compatible avec React Native 0.80+.
Résultats :
- Plus de warnings
- Moins de risques de break
- Meilleure stabilité dans le temps
→ 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿.𝗽𝗿𝗲𝗹𝗼𝗮𝗱()
Tu peux précharger le clavier avant qu’un champ soit focus.
C’est automatique avec KeyboardProvider.
Bénéfices :
- Apparition instantanée
- TTI boosté
- UX plus réactive
→ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 𝗱𝗲𝘀 𝗧𝗲𝘅𝘁𝗜𝗻𝗽𝘂𝘁 𝗳𝘂𝗹𝗹-𝘀𝗰𝗿𝗲𝗲𝗻
Avant : scroll cassé, caret mal placé.
Maintenant :
- Comportement cohérent
- Scrolling précis
- UX fluide même en plein écran
Conclusion :
On ne se contente plus de gérer le clavier.
On crée autour de lui.
Et ça change l’expérience mobile.
Le clavier n’est plus une contrainte.
C’est une extension de l’interface.
Looks good 👍
Are you facing any issues in android?
I recently created this type of component
For ios there is a built in, InputAccessoryView
But for android I had to create a custom solution, which has some limitations and was facing issues