Article original : Why I Switched to React Native to Create a Super Easy Bottom Sheet
Par Ayusch Jain
J'ai récemment changé de travail, et l'une de mes premières tâches était de créer une bottom sheet en React Native.
Venant d'un milieu de développement natif Android, je pensais que cela allait être aussi intimidant que de créer une bottom sheet en natif. Mais j'avais tort ! J'ai été tellement impressionné que j'ai décidé d'écrire un tutoriel simple sur la création d'une bottom sheet en React Native.
Une bottom sheet est un composant utile qui glisse depuis le bas de l'écran et contient souvent différentes options. Elle est très courante dans le design moderne et utilisée par des applications telles qu'Uber, Zomato, et bien d'autres.
Voici à quoi ressemblera le résultat final :
Source : https://ayusch.com/
Alors, voyons comment créer une bottom sheet en React Native.
Installation
Tout d'abord, créez un nouveau projet en React Native. J'utilise expo-cli pour cela. Si vous ne connaissez pas expo-cli ou si vous débutez avec React Native, consultez ce lien.
J'ai nommé mon projet BottomSheetDemo.
Ensuite, nous devons installer react-native-modalbox. Cela nous offre de nombreuses capacités intégrées telles que des animations, des positions, des arrière-plans, etc.
$ expo install react-native-modalbox@1.7.1
Note : N'oubliez pas d'installer la version 1.7.1. La dernière version a un bug où backdropPressToClose ne fonctionne pas.
Création du Modal
Il est temps de créer notre modal. Supprimez le code fourni au début et ajoutez ce qui suit à votre fichier App.js :
Ceci est la structure de base de notre bottom sheet/modal. Nous allons simplement afficher un texte au centre du modal.
Ajout d'Interaction
Nous avons besoin que la bottom sheet apparaisse lorsqu'un bouton est pressé. Ajoutons une interaction.
Je vais ajouter un bouton simple au milieu de l'écran :
En cliquant sur ce bouton, nous devons afficher/masquer notre bottom sheet. Pour cela, nous allons maintenir un état en utilisant le hook useState de React.
Notre modal a une prop nommée "isOpen" que nous pouvons basculer pour afficher/masquer notre bottom sheet. Pour l'afficher, nous allons simplement définir modalVisible à false et vice-versa.
Mais d'abord, séparons notre modal du reste du code car cela commence à devenir un peu désordonné. Je vais créer une fonction séparée qui retournera mon modal.
Le code semble beaucoup plus propre maintenant. Mais notre bottom sheet ne ressemble toujours pas exactement à une bottom sheet. Nous devons ajouter un peu de style.
Ajout de Style !
Créez une feuille de style et ajoutez les styles suivants :
Voici à quoi ressemble le code final :
Nous avons enfin créé notre bottom sheet en React Native. C'est si simple et beaucoup plus facile à créer qu'en natif Android.
Je ne peux pas commenter iOS puisque je ne l'ai jamais essayé.
Alors, si vous êtes un développeur iOS ou avez de l'expérience dans la création d'une bottom sheet en iOS, faites-moi savoir quelle a été votre expérience.
Rejoignez l'espace de travail AndroidVille SLACK pour les développeurs mobiles où les gens partagent leurs apprentissages sur les dernières technologies, en particulier le développement Android, RxJava, Kotlin, Flutter, et le développement mobile en général.
Cliquez sur ce lien pour rejoindre l'espace de travail. C'est absolument gratuit.
Aimez ce que vous lisez ? N'oubliez pas de partager cet article sur Facebook, Whatsapp, et LinkedIn.
Vous pouvez me suivre sur LinkedIn, Quora, Twitter, et Instagram où je réponds aux questions liées au développement mobile, en particulier Android et Flutter.