Les composant de base en React Native - Core components

Il existe une multitude de composants fondamentaux (core components) en React Native. La plupart d'entre eux sont toujours présents dans les applications mobiles et ils sont dotés de nombreux attributs qui permettent de personnaliser leur apparence et leur comportement. Si vous voulez tous les détails concernant les composants, je vous recommande vivement de consulter le support officiel de React Native à travers ce lien.

Composant View

Le composant View est un conteneur générique ou universelle. Il sert généralement à englober d'autres composants plus élémentaires comme les textes ou les images. On peut considérer le composant View comme la balise DIV du HTML qui sert généralement à spécifier des blocs où l'on intègre les éléments visibles de l'interface.

Nous avons déjà utilisé le composant View dans les exemples précédents et en guise de rappel son code ressemble à ceci:
Dans ce cas, le composant View sert de conteneur principal qui renferme un texte inclus dans le composant Text.

Composant Text

Comme son nom l'indique, le composant Text sert à intégrer un texte. En effet, on ne peut pas inclure le texte n'importe où. A titre d'exemple, si on fait ceci:
On aura l'erreur suivante:
L'e message est clair, on ne peut pas intégrer un texte en dehors du composant Text. Donc, pour avoir le résultat attendu, on doit plutôt faire ceci:

Composant Button

Le composat Button sert à intégrer un bouton simple à notre interface. Il s'agit d'un élément incontournable dans la plupart des applications car il permet de mener des actions comme la soumission d'un formulaire, la validation d'une action, la navigation entre les vues etc. Donc, on associe souvent un event handler au composant Button.

Le composant Button de React Native est simple et pratique, mais il présente plusieurs limites qui poussent souvent les développeurs à le remplacer par des alternatives comme TouchableOpacity ou Pressable.

Voici un exemple simple d'utilisation du composant Button:
L'attribut title sert à définir le texte à afficher sur le bouton (l'étiquette du bouton) et onPress est l'événement déclenché quand on appuie sur le bouton et qui va exécuter la fonction handleButton (qu'on devrait définir au préalable).

Composant ScrollView

Le composant ScrollView sert à afficher le contenu défilant. En effet, ce composant permet de rendre scrollable une vue contenant plusieurs éléments, que ce soit verticalement ou horizontalement.

Exemple d'utilisation:
Si les textes sont trop gros ou présentent des marges importantes, alors le composant ScrollView sera srcollable. C'est un peu similaire l'effet overflow que l'on appliquer en CSS sur des conteneurs HTML.

L'événement onScroll est déclenché si on défile sur la zone. On peut lui associer une fonction qui active une animation ou le lazy loading.

Il existe une multitude d'attributs que l'on peut associé à ce composant comme horizontal (booléen) qui active un scroll horizontal, showsHorizontalScrollIndicator et showsVerticalScrollIndicator (booléens) qui affichent respectivement la scrollbar (ou ascenseur) horizontale et verticale, ou encore pagingEnabled (booléen) qui active le scroll sur la page entière, c'est à dire que si on défile, le prochain bloc sera placé sur l'écran tout entière. Il s'agit d'un effet très prisé dans le cas des carrousels ou le système de pagination fluide.

Composant TextInput

Le composant TextInput permet de créer une zone de texte qui permet à l'utilisateur de saisir du texte (email, numéro de téléphone, expression de recherche, commentaire...). Il s'agit sans doute d'un composant essentiel que l'on trouve presque dans toutes les applications.

Exemple:
L'attribut placeholder (qui existe d'ailleurs en HTML) permet d'écrire un texte temporaire en attendant la saisie. Il sert souvent à décrire le rôle du champ ou le genre d'information attendu.

L'attribut keyboardType permet de changer le type du clavier affiché une fois le champs activé. Parmi les valeurs possible, il y a numeric, email-address et default.

Il existe plein d'autres attributs applicables à ce composant, le plus important est sans doute value qui sert à la fois à appliquer un texte par défaut et aussi à lire le texte saisi, l'attribut secureTextEntry (booléen) qui masque le texte saisi (comme un mot de passe) et l'attribut multiline (booléen) qui permet de spécifier si le champ accepte plusieurs lignes (comme une textarea de HTML) ou une seule ligne comme c'est le cas pour une zone de texte classique.

Composant Image

Comme son nom l'indique, le composant Image permet d’afficher une image dans une application mobile. L'image peut provenir d’un fichier local ou d’une URL distante.

Exemple qui intègre une image provenant d'une URL distante:
L'attribut source permet de spécifier le chemin vers l'image. Il s'agit d'un objet Javascript (que l'on doit intégrer en utilisant l'interpolation JSX). Si l'image provient d'une URL distante (serveur distant ou API), dans ce cas, on spécifie la clé uri dont la valeur et le chemin absolu qui mène à l'image.

Si on veut intégrer une image locale alors on aura un code qui ressemble à ceci:
On peut également appliquer du flou à l'image à l'aide de l'attribut blurRadius ou redimensionner l'image à l'aide de resizeMode.

Composant TouchableOpacity

Le composant TouchableOpacity rend son contenu cliquable avec un effet de transparence au toucher. Il est souvent utilisé pour créer des boutons personnalisés, des cartes interactives ou des éléments de navigation. En effet, le composant TouchableOpacity est préféré au composant Button en raison de la limitation des styles que l'on peut appliquer à ce dernier. En plus, le composant TouchableOpacity rend clicable tout type de contenu qu'il enveloppe (Texte, Image, View).

Un autre avantage que présente ce composant c'est son uniformité vis à vis d'Android et iOS, au moment où le composant Button pourrait avoir des formes différentes selon le système d'exploitation.

Concernant les événements, le composant Button supporte seulement onPress, alors que TouchableOpacity supporte d'autres événement comme onLongPress, onPressIn et onPressOut

En React Native, les événements onPressIn, onPressOut et onLongPress permettent de gérer différentes phases du toucher sur un composant interactif comme TouchableOpacity. L'évenement onPressIn se déclenche dès que l’utilisateur commence à appuyer, ce qui est idéal pour appliquer un effet visuel immédiat (comme un zoom ou une ombre). L'événement onPressOut intervient dès que l’utilisateur relâche le doigt, même s’il n’a pas validé l’action, ce qui permet de réinitialiser le style ou de déclencher une animation de sortie. Enfin, onLongPress s’active si l’utilisateur maintient l’appui suffisamment longtemps, et sert souvent à afficher un menu contextuel, une prévisualisation ou une action secondaire.

Exemple:
Dans cet exemple, le message inclus dans le composant Text est rendu cliquable vu qu'il est enveloppé par le composant TouchableOpacity. L'attribut activeOpacity définit le niveau de transparence appliqué au moment du toucher. Il permet de donner un feedback visuel immédiat à l’utilisateur lorsqu’il appuie sur un élément interactif.