Ceci est l’introduction d’une série d’articles au travers de laquelle nous allons développer une application mobile de gestion de mots de passe à l’aide de React Native.

Les fonctionnalitées de l’application seront les suivantes :

• Définir le mot de passe principale qui servira de clé pour crypter les données.
• Ajouter/Modifier/Supprimer un mot de passe dans la liste des mots de passe.
• Crypter l’ensemble des données.
• Générer automatiquement des mots de passe forts.
• Exporter / Importer les données.

Dans cette série d’articles nous allons voir les points suivants :

• Utilisation de la navigation avec la librairie react-navigation
• Utilisation de redux
• Sauvegarde des données avec redux-persist
• Utilisation de Flow
• Créer une application avec des composants spécifiques par plateforme (Android, iOS)
• Internationalisation

Voici ceux à quoi devrait ressembler l’application sur iOS et Android

Android :

iOS :

Voici le plan des articles :

• Introduction et initialisation du projet
• Création des composants
• Les écrans et la navigation avec react-navigation
• Gestion du paramétrage de l’application
• Gestion des mot de passe de l’application
• Gestion de l’import / export des données

Initialisation du projet

Commençons par créer le projet React Native :

react-native init olly

Ensuite suivez cet article si vous souhaitez configurer votre environnement de développement de la même manière que moi. Sinon suivez juste l’étape pour l’installation de Flow.

Ensuite nous allons installer les différents librairies que nous utiliserons pour la création des composants dans l’article suivant :

• yarn add react-native-animatable react-native-i18n react-native-keyboard-aware-scroll-view react-native-swiper react-native-vector-icons
• react-native-animatable : Simplifie l’utilisation des animations.
• react-native-i18n : Pour l’internationalisation de notre application.
• react-native-keyboard-aware-scroll-view : Pour gérer les problèmes avec le clavier et les textfields sur iOS.
• react-native-swiper : Celle-ci nous permettra de créer un écran d’onBoarding.
• react-native-vector-icons : Librairie pour les icônes.

Maintenant que les librairie sont installées nous allons préparer l’internationalisation de l’application dans le projet créez un dossier src et dans celui-ci un dossier locales :

mkdir src && cd src
mkdir locales

Puis dans le dossier locales nous allons créer trois fichiers :

• fr.js : Contient l’objet json de toutes les ressources françaises.
• en.js : Contient l’objet json de toutes les ressources anglaises.
• strings.js : Contient l’objet json de toutes les ressources traduites.

Vous pouvez consulter cet article pour plus de détails sur le fonctionnement de l’internationalisation avec React Native.

Ajoutez le code suivant dans chacun des fichiers :

en.js

export default {
  olly_test: 'This is the test string for Olly app',
};

fr.js

export default {
  olly_test: "Ceci une chaine de test pour l'applications Olly",
};
strings.js;

import I18n from 'react-native-i18n';
import en from './en';
import fr from './fr';

I18n.fallbacks = true;

I18n.translations = {
  en,
  fr,
};

const AppString = {
  olly_test: I18n.t('olly_test'),
};

export default AppString;

Enfin pour tester le bon fonctionnement de ce que nous venons de faire nous allons créer un fichier index.js à la racine de notre dossier src et ajouter le code suivant :

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import strings from './locales/string';

export default () => (
  <View style={styles.container}>
    <Text style={styles.welcome}>{strings.olly_test}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Puis remplacez le code des fichiers index.android.js et index.ios.js par celui-ci :

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import { AppRegistry } from 'react-native';
import App from './src';

AppRegistry.registerComponent('olly', () => App);

Voila nous avons terminer l’initialisation du projet dans le prochaine article nous créerons l’ensemble des composants de l’application.

Le code source est disponible ici .