Choisir son Toolkit de composants graphiques React Native
Accéder au sommaire de « Guide pratique du développeur React Native »
Dans le monde Web, il y a une dichotomie assez tranchée sur le marché des composants avec Material UI d’un côté et Bootstrap de l’autre. Il est possible de réaliser soi même ses propres composants mais c’est au prix d’un gros effort de développement. Certains composants tels que les tableaux de données peuvent être complexes à écrire soi-même. Sans oublier des fonctionnalités telles que l’internationalisation, le théming (possibilité de changer les couleurs et le visuel facilement, etc …) ou la navigation.
Côté mobile, il n’existe pas à proprement parler avec React Native de Framework identique à Material Ui ou React Bootstrap pour des raisons historique. Certains toolkits tendent à l’indépendance visuelle, d’autres au contraire, s’appuient sur Material Design avec des spécialisations par système d’exploitation (iOS/Android).
Voici une liste non exhaustive des principales bibliothèques utilisées sur le marché React Native. L’écosystème React Native est très vaste et cette liste n’intègre pas les nombreux projets techniquement obsolètes ou peu maintenus. React Native peut compter aujourd’hui sur presqu’une dizaine de projets GitHub d’une richesse considérable. Quand on sait l’importance que revêt la partie graphique d’une application, on comprend pourquoi React Native caracole en tête des plateformes de développement mobile.
React Native Elements
React Native Elements s’est positionné très tôt avec un nombre très restreint de composants. La bibliothèque s’est enrichit et a pris de l’ampleur ces dernières années notamment grâce à sa SearchBar (utilisée dans Dossardeur) et à son approche plutôt agnostique.
Composant « SearchBar » de RNE
RNE ne privilégie aucun look and feel en particulier, il est personnalisable avec son système de théming. Dans la figure suivante vous pouvez découvrir le fichier du thème principal de Dossardeur contenant les couleurs ainsi que les différents éléments de la charte graphique (couleurs & typographie).
Le support de TypeScript n’est pas en reste et l’utilisation des composants sur le Web avec React Native Web est possible.
React Native Elements s’adapte parfaitement à react-navigation même s’il fournit des composants basiques dans ce domaine.
Native Base
Native Base se différencie de React Native Elements par le support complet d’un composant de navigation. A côté des traditionnels boutons, spinner, textfields et autre snackbar il y a une réelle volonté de différencier le look des composants Android et iOS. En terme de popularité, RNE et Native Base se valent plus ou moins avec un léger avantage pour RNE.
Tout comme RNE, Native Base fournit un mécanisme de théming. Il existe de nombreux sites proposant des kits de démarrage ou des identités visuelles s’appuyant sur Native Base.
React Native Paper
React Native Paper fait partie des outils les plus anciens qui ont su adapter leur offre au fil des évolutions de React Native. C’est une des librairies les plus étoffées du look & feel Material Design. Elle supporte le Web via react-native-web, propose un théming personnalisable et le module est entièrement implémenté en TypeScript.
S’il est possible de se passer de react-navigation avec les composants AppBar.header et Drawer.section il existe une intégration officielle entre les 2 projets via https://github.com/react-navigation/react-navigation/tree/4.x/packages/material-bottom-tabs.
La communauté de react-native-paper est très active avec environ une release par mois.
React Native UI Lib
Ce projet endossé par Wix est dans le Top 5 des Framework les plus riches avec une gestion de théming avancée, la possibilité de gérer l’internationalisation en mode bidirectionnel et une documentation très complète. L’adhérence avec Material Design n’est pas spécialement mise en avant, ce qui permet de cibler différents types d’identités visuelles.
UI Kitten
Ui Kitten est un toolkit faisant partie d’un écosystème beaucoup plus large s’appuyant sur le kit UI Eva en licence MIT sur GitHub. Ce kit propose de nombreux thèmes prédéfinis personnalisables pour une identité visuelle donnée avec un outil tel que Sketch (MacOS) ou Lunacy (Windows). L’exemple suivant est le thème correspondant à l’application de santé réalisée avec Eva.
L’objectif de ce projet est de réduire le temps entre la conception de la charte graphique et l’implémentation sous la forme de code avec React Native. En utilisant les widgets UI Kitten et le principe des thèmes Eva, il est possible de raccourcir le délai d’intégration.
UI Kitten est compatible avec TypeScript (la plupart des exemples de code sont en TS).
React Native Material Kit
Ce Framework a pour but de fournir des composants respectant le guide Material Design pour Android et iOS en apportant des spécialisations par OS. Le périmètre des composants est assez restreint avec uniquement le support des boutons, Cartes, Champs Texte, Checkbox, Radio et Switch. Ne comptez pas y trouver de composants fenêtres, dialogues ou autres menus et barres de navigation.
React Native Material Kit est implémenté en TypeScript et propose comme ses prédécesseurs un mécanisme de théming :
import {
getTheme,
...
} from 'react-native-material-kit';
const theme = getTheme();
<View style={theme.cardStyle}>
<Image source={{uri : base64Icon}} style={theme.cardImageStyle} />
<Text style={theme.cardTitleStyle}>Welcome</Text>
<Text style={theme.cardContentStyle}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</Text>
<View style={theme.cardMenuStyle}>{menu}</View>
<Text style={theme.cardActionStyle}>My Action</Text>
</View>
Material Bread
Material Bread est une librairie en devenir qui n’a pas encore la popularité de React Native Elements et Native Base mais qui propose une large palette de composants à la sauce Material. Sa particularité est le cross-plateforme avec le maximum de partage de code : React Native (iOS, Android), React-native-web (Browsers), Electron (Windows, Mac, Linux), react-native-windows, react-native-macos, Next.js, Expo et même Vue Native.
Ce toolkit propose un nombre impressionnant de composants Material Design ; Boutons, Champs Textes, Fabs, Paper, Chip, …. Le storybook du site résume bien cette richesse.
Et sans Framework « tout en un », est-ce possible ?
Rien ne vous oblige à utiliser une bibliothèque de composants graphiques avec react-native. Il existe un nombre incalculable de projets offrant des composants unitaires dans chaque domaine. A vous de trouver le bon niveau d’homogénéité du Design UI en apportant le thème ou le style qui vous correspond le mieux.
L’article suivant propose pas moins de 10 projets au périmètre large. Cela va du composant de saisie aux fonctionnalités multiples (https://github.com/n4kz/react-native-material-textfield) au composant Menu ou Date Picker.
A titre d’exemple, Dossardeur affiche un tutoriel lorsque l’application est installée pour la première fois. Après avoir testé plusieurs outils, react-native-swiper s’est avéré être le plus complet (parmi la vingtaine de composants disponibles !) et surtout le plus simple, voici le code source de l’écran Tutoriel de Dossardeur à titre d’exemple :
import React, {useRef, useState} from "react";
import {ImageBackground, StyleSheet, Text, TouchableHighlight, View} from "react-native";
import {defaultNavigationWithLogo} from "../../widgets/NavigationHeader";
import Swiper from "react-native-swiper";
import {theme} from "../../theme";
import {NavigationActions, SafeAreaView, StackActions} from "react-navigation";
import CGUScreen from "../apropos/CGUScreen";
import {Icon} from "react-native-elements";
import {logInfo} from "../../utils/log";
import {saveString} from "../../utils/storage/storage";
export const TutorialScreen = ({navigation}) => {
const swiper = useRef(null)
const [swiperIndex,setSwiperIndex] = useState(1)
return (
<SafeAreaView style={styles.container}>
<Swiper ref={swiper}
showsButtons
loop={false}
onIndexChanged={(index:number)=>{setSwiperIndex(index)}}
containerStyle={{paddingRight:0}}
scrollEnabled={swiperIndex<6}
activeDotColor={theme.colors.primary}
>
<View style={[styles.slideContainer,styles.slide1]}>
<View style={{flex:0.8,backgroundColor:'transparent', alignItems:'center',justifyContent:'center'}}>
<Text>3 Vues synchronisées</Text></View>
<ImageBackground resizeMode={'contain'} style={{flex:4}} source={require('../../../assets/images/tuto/troisvues.png')}/>
<View>
<Text>Une Vue pour représenter l agenda cycliste amateur de la France.</Text>
</View>
</View>
<View>
<View><Text>Vue Liste</Text></View>
<ImageBackground resizeMode={'contain'} source={require('../../../assets/images/tuto/liste.png')}/>
<View>
<Text>Rechercher une ou plusieurs épreuves et de les trier chronologiquement. </Text></View>
</View>
<View style={{flex:1,marginBottom:50}}>
<CGUScreen/>
<TouchableHighlight><Icon name='check-circle' backgroundColor={'white'} onPress={() => {
saveString('tutorialShowed','true').then(r => {
logInfo('[Tutorial/CGU] Accepted')
})
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: 'Main'})],
});
navigation.dispatch(resetAction);
}} type='material-community' color={theme.colors.secondary} size={40}/></TouchableHighlight>
</View>
</Swiper>
</SafeAreaView>
)
}
Bibliographie
Super Cool Material UI components in React Native! : https://medium.com/@victorvarghese/super-cool-material-ui-components-in-react-native-dd7c4434bc26
11 React Native Component Libraries you Should Know in 2019 : https://blog.bitsrc.io/11-react-native-component-libraries-you-should-know-in-2018-71d2a8e33312
UNE ASSISTANCE TECHNIQUE ? NOUS SOMMES DISPONIBLES UNE ASSISTANCE TECHNIQUE ? NOUS SOMMES DISPONIBLES