Développeur mobile en natif & hybride, je développe depuis plus d’un an sous React Native.

Mon expérience sur les différents langages me permet aujourd’hui de comparer la réactivité et la puissance du natif et les avantages qu’apporte React Native dans mes développements.

Je ne vais pas décrire ici ce qu’est React Native mais plutôt vous éclairer sur des interrogations ou des points de blocage que l’on rencontre lors du développement d’une application mobile hybride.

Les outils de développement

React Native vient avec des outils de développement modernes qui n’ont rien à envier aux solutions de hot reload et live reload du web.
Vous pouvez voir un aperçu ici des différentes possibilités : http://facebook.github.io/react-native/releases/0.43/docs/debugging.html#debugging
Depuis le simulateur iOS, un simple cmd + R recharge l’application et un cmd + D
permet d’afficher le menu de développement, sur un vrai device, il faut secouer l’appareil. Le remote debugging permet d’afficher les sorties consoles dans l’inspecteur de Chrome.
Vous pouvez également utiliser les breakpoints pour debbuger comme avec un site classique.
Par rapport à un développement natif, le gain de temps est énorme.
Je vous conseille d’installer Genymotion pour émuler des devices Android.

Gérer les plateformes

Vous souhaitez gérer l’interface ou un comportement de manière différente selon la plateforme ? Rien de plus simple, deux choix s’offrent à vous :

Suffixer vos fichier par .android.js / .ios.js
ou utiliser Platform.OS === 'ios'

Les interactions

Vous avez déjà tenté de reproduire un comportement de type :hover au tap d’un bouton sur un mobile ? C’est tout simplement impossible, il n’y pas vraiment de solution satisfaisante sur le web même avec l’utilisation de librairie comme FastClick.
En natif, le feedback est instantanément perceptible grâce aux différents composants TouchableHighlight, TouchableOpacity et TouchableNativeFeedback (Ripple effect <3).
Voici un très bon guide pour réaliser des boutons avec des comportements différents selon la plateforme utilisée
https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472#4f6e

Pro tip : utilisez la property hitSlop pour étendre la zone de clic :
hitSlop={{ top: 10, left: 15, bottom: 10, right: 15 }}

Le clavier

Combien de temps avez-vous perdu pour arriver à gérer correctement l’affichage du clavier lors du focus dans un champ de formulaire ? Vous avez galéré de longues heures avec ionic-plugin-keyboard ?
Les composants Keyboard, KeyboardAvoidingView ou encore la méta donnée pour Android android:windowSoftInputMode="adjustResize" sont là pour vous aider et vous allez adorer leurs simplicités d’utilisation.

Pull to refresh et infinite scroll

Pour activer la fonctionnalité pull to refresh dans une ListView, il suffit d’ajouter la propriété refreshControl et de rendre un composant de RefreshControl. Et c’est tout !

<ListView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }
        ...
      >

Pour le scroll infini, il faut utiliser la propriété onEndReached en lui passant un callback, on peut également configurer la distance de déclenchement avec la propriété onEndReachedThreshold.

Les animations

La librairie Animated qui est inclus de base permet de gérer les effets les plus courants : des transitions, des translations et leurs effets (avec Easing).
Voici un exemple pour reproduire l’animation du header de Twitter lors du scroll : https://rnplay.org/apps/vWGQNg
Si vous souhaitez aller plus loin, je vous conseille l’excellente librairie de WIX https://github.com/wix/react-native-interactable

Les icônes

Utilisez react-native-vector-icons qui supporte très bien les polices custom https://github.com/oblador/react-native-vector-icons#custom-fonts

La navigation

C’est le bordel complet ! Pour résumer, soit vous choisissez une librairie qui a une implémentation JS; soit une librairie qui a une implémentation native.

Vous avez le choix entre :

Pro tip : utilisez une librairie avec une implémentation native pour avoir de meilleurs performances.

Les vidéos

Vous allez enfin pouvoir lancer des vidéos Youtube sans être forcément en mode fullscreen grâce à https://github.com/inProgress-team/react-native-youtube
Sinon utilisez https://github.com/react-native-community/react-native-video avec https://github.com/cornedor/react-native-video-player

Pro tip : si vous avez un compte Vimeo premium, vous pourrez récupérer le flux mp4 de vos vidéos et les lire grâce au player react-native-video.

InteractionManager

Une action à dispatcher ? Une animation à démarrer ? Pour améliorer la fluidité de votre application, il vaut mieux attendre que les transitions entre les écrans ou que les animations soit terminées. Pour ça utilisez : InterationManager.runAfterInteractions :

componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.props.userActions.fetchContacts();
this.setState({isReady: true});
});
}

Collapsable (property)

J’ai rencontré des bugs de layout avec des bouts d’ihm qui disparaissaient quand mon composant se mettait à jour, cf : https://github.com/facebook/react-native/issues/12234
La solution consiste à ajouter une propriété collapsable={false} sur la vue qui wrap le composant http://facebook.github.io/react-native/releases/0.43/docs/view.html#collapsable :

<View style={styles.content} collapsable={false}>
  <ActivityIndicator size="small" color="#000" loading={this.state.renderFull}/>
</View>

Offline / persistance des données

Le couple AsyncStorage combiné à redux-persist https://github.com/rt2zz/redux-persist fait tout à fait l’affaire.
Si vous avez des besoins plus complexe, je vous suggère d’aller voir du côté de Realm ou de Firebase

Les tests d’IHM automatisés

La librairie Appium est excellente mais le code pour écrire pour les tests fonctionnels reste complexe à lire et à maintenir. http://chase-seibert.github.io/blog/2017/01/06/appium-react-native-quickstart.html
Un projet très prometteur (encore par la team de WIX) existe mais il ne supporte que iOS pour le moment : https://github.com/wix/detox. La version Android arrivera un peu plus tard et sera basé sur Espresso.
Je vous conseille également de lire cet article d’un des développeurs de code-push et de regarder cette vidéo qui montre la synchronisation d’une application sur plusieurs devices (c’est hyper impressionnant)
http://blog.nparashuram.com/2017/03/reactconf-web-like-release-and.html
https://youtu.be/iMLpUVZseEg?t=691

Les mise-à-jours de RN

Un outil officiel existe pour mettre à jour votre projet mais je n’ai jamais réussi à m’en sortir https://facebook.github.io/react-native/docs/upgrading.html
Je vous conseille d’aller voir ce projet qui permet de voir toutes les différences entre chaque version https://github.com/ncuillery/rn-diff.

La communauté

Le groupe facebook https://www.facebook.com/groups/react.native.community/ est très actif, vous trouverez beaucoup de support ou d’exemples d’application ou d’utililsation de librairie.

Autres librairies

Carte

La librairie de Airbnb https://github.com/airbnb/react-native-maps est maintenant recommandée par Facebook, il n’y a pas de raison de ne pas s’en servir.

Notifications Push

Je vous conseille d’utiliser firebase https://github.com/evollu/react-native-fcm même si c’est un peu l’enfer à installer.
Je vous recommande de suivre les instructions attentivement et sans utiliser POD pour iOS, sinon vous serez dans le même cas de figure que ce dévelopeur : https://school.shoutem.com/lectures/add-serverless-firebase-push-notifications-react-native-app-chat-app-part-2/

Informations du téléphone

On a souvent besoin de récupérer des informations comme la locale, la timezone ou encore la version de l’app qui est installée : https://github.com/rebeccahughes/react-native-device-info

Conclusion

React Native est à la hauteur de ses promesses et nous offre un résultat bluffant. Cette technologie répond à toutes les attentes que l’on a d’une application native et les gains de temps entre debbugage et développements multi-plateformes sont impressionnants.
Le développement de React Native est toujours très actif, une nouvelle version sort chaque mois en apportant chaque fois de nombreuses corrections et nouvelles fonctionnalités.
Microsoft vient d’annoncer son support officiel https://ericroz.wordpress.com/2017/03/09/react-native-windows-moving-to-microsoft-github-organization/ il n’y a donc plus de raison de ne pas franchir le pas.

12/04/2017 8 MIN READ TAGS: React Native, Reactjs BY: Pierre-Alexandre Dupuy 0 COMMENT

Pierre-Alexandre Dupuy

Développeur front et mobile

Adfab Connect