React Native Notes sur le déploiement sur Android et IOS

React Native

Setup:

npm install -g create-react-native-app
create-react-native-app MyReactNative

install NodeJS Python Jdk8

npm install -g react-native-cli

npm start

Bootstrap bare react Native CLI App :

$ npm install -g react-native-cli
$ react-native init helloWorldReactNative
$ cd helloWorldReactNative

Run much easier than Ionic !!!

Run instructions for iOS:
• cd /Users/poste5hookipa/sites/reactnative/helloWorld && npx react-native run-ios
– or –
• Open helloWorld/ios/helloWorld.xcworkspace in Xcode or run “xed -b ios”
• Hit the Run button

Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd /Users/poste5hookipa/sites/reactnative/helloWorld && npx react-native run-android

Bootstrap with Expo CLI :
$ npm install -g expo-cli
$ expo init AwesomeProject
$ cd AwesomeProject
$ npm start # you can also use: expo start
Install Expo Client on device & connect to the same network

REACT NAVIGATION V5: StackNavigator is deprecated, use createStackNavigator insted

#Step 1:
$ npm install @react-navigation/native @react-navigation/stack
#Step 2: install the required peer dependencies
$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view


Bare react Native CLI

Le CLI originel, toujours en activité et c’est le CLI recommandé car de base.

Expo CLI : (PS Expo sucks IMHO)

Je ne recommande d’utiliser Expo qui est une surcouche sensé faciliter le développement d’application React Native, il en peut pas tout faire et finalement on se retrouve à éjecter en application de base.

$ expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Note: For iOS with bare React Native project, make sure you have Cocoapods installed

IOS. install cocoapod : mandatory for React Native 0.60+ (https://medium.com/@appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9)
sudo gem install cocoapods

REACT NATIVE VECTOR ICONS :

Installation avec yarn

$ yarn add react-native-vector-icons

ou avec npm

$ npm i --save react-native-vector-icons

link << cette commande ne semble pas marcher…

link sert dans le cas de React Native à lier les dépendance native, par exemple certaines librairies sont seulement en Javascript, pas besoin de faire un link, mais certaines librairies font appel à des fonctionnalité natives, donc il faut faire un link. Dans les anciennes versions de React Native, il fallait le faire manuellement, mais les récentes versions de React Native n’ont pas besoin de faire cette commande.

$ react-native link react-native-vector-icons
donc il est conseillé de le faire manuellement : copier le dossier Font depuis node_modules/react-native-vector-icons

Ouvrir Xcode et aller dans Info.plist (rien que le fait d’ouvrir Xcode normalement devrait faire marcher l’inclusion des icônes)
Néanmmoins éditer le fichier info.plist et ajouter une propriété “Fonts provided by application”
Ajouter ensuite :
import Icon from "react-native-vector-icons/Ionicons"; //dans votre fichier

Il faut recompiler le projet pour que ça marche

Si message d’erreur :error Could not find the following native modules: RNVectorIcons. Did you forget to run "pod install"
faire $ pod install

REACT NATIVE ELEMENT : use the V1.2 because different from 0.19.1 !

Faire attention à la version de la librairie que vous utilisez, vous risquez de tomber dans des anciennes version de tutoriels qui ne marcheront pas pour vous. Exemple FormLabel, FormInput sont enlevés de la version 1.2

Viewing App

on simulator
on device (with cable)

Debugging App:
on simulator
on device

Erreur courante lors du déploiement en émulateur :

1/no bundle URL present

2/“Invariant Violation: Application AwesomeProject has not been registered” When building for iOS device with static jsbundle

aller dans /ios et faire $ pod install. pour réinstaller

React Fragment example https://fr.reactjs.org/docs/fragments.html

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Bonjour</td>
        <td>Monde</td>
      </React.Fragment>
    );
  }
}

Syntaxe plus concise :

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Bonjour</td>
        <td>Monde</td>
      </>
    );
  }
}

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

  • react-native-vector-icons (to unlink run: “react-native unlink react-native-vector-icons”)
    This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via “react-native unlink ” and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.
    Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

Que fait la commande link?

https://reactnative.dev/docs/linking-libraries-ios << conseillé de le lire

Que fait la commande Pod Install?

(https://medium.com/@scottlydon18/podspecs-podfile-pod-install-what-happens-518af7e6471d)

Les Builds sur IOS et Android

Les builds c’est vraiment la difficulté dans le développement des application mobile, au moins au début, mais c’est suffisamment difficile et décourageant car c’est d’une très grande complexité, et un même problème peux avoir deux causes différentes, et comme vous êtres développeur, vous n’êtes pas axé sur cet aspect, qui est pourtant nécessaire, sans quoi vos compétences de développeur ne seront rien, en effet à quoi bon avoir l’application codées si on ne peut pas la déployer sur le store?

Un build sur Android nécessite Android Studio, un build sur IOS nécessite Xcode. Si vous êtes sur Windows, vous ne pourrez développer que pour Android, pas pour IOS. SI vous être sur Mac OS vous pourrez développer pour Android et IOS ! Donc voilà une raison de vous acheter un macBook Pro !

La difficulté tient à la complexité d’un processus de build, d’un cache non vidé, en effet un build réussi peut très bien échouer pour X raison mais vous ne pourrez résoudre ce problème que si vous remettez tout à zéro !

Néanmoins il y a des messages d’erreur qui reviennent souvent et vous devez connaitre.

Mais avant il faudra vous familiariser avec le parcours nominal de configuration d’un build, pour Android, il s’agira bien sûr de mettre en place Android Studio et tout ce qui va avec, télécharger les SDK qu’il faut. Pour IOS c’est plus fluide, néanmoins vous devez connaître le flow de build, les commandes correspondantes.

D’autre part, notez qu’en développement vous pouvez builder pour un émulateur, ou votre terminal physique.

Déployer sur le store est une autre paire de manche, spécialement pour Apple Store, où le fameux provisioning profile en fera suer plus d’un ! oui le développement d’application mobile est un métier, et nettement plus fastidieux que de faire un site web. Par moment vous vous direz “Vive les PWA !”.

Problèmes de builds pour IOS

BUILD FOR IOS problems: (https://stackoverflow.com/questions/35449248/failure-to-call-appregistry-registercomponent)
======================

A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

Problèmes de builds pour Android

A quoi sert AppCompat?
When new versions of android are published, Google will have to support the older versions of android. So AppCompat is a set of support libraries which can be used to make the apps developed with newer versions work with older versions.

Troubleshoot configuration : https://www.youtube.com/watch?v=GUZVGidimqY
https://medium.com/pvtl/react-native-android-development-on-mac-ef7481f65e47

React navigation causes android not working because of maybe

java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/swiperefreshlayout/widget/SwipeRefreshLayout;

Gradle build file add two lines to build.gradle: (https://github.com/react-navigation/react-navigation/issues/6267 and https://github.com/software-mansion/react-native-screens#usage-with-react-navigation-without-expo)

lignes à ajouter dans VOTRE_APP/android/app/build.gradle

dans la section dependencies

dependencies {
 ...
 implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
 implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
    }    

Error running android: Gradle project sync failed. Please fix your project and try again
Goto File -> Invalidate caches / Restart

Erreur gradle ne trouve pas une dépendance ‘react-native-screen’, parfois mettre à jour le plugin de Gradle pour Android Studio peut résoudre le problème.

Lien suite les versions compatible entre la version du plugin pour Android et la version de Gradle:
https://stackoverflow.com/questions/17727645/how-to-update-gradle-in-android-studio

FUNCTIONAL COMPONENT VS CLASS COMPONENT

ReactJS notes:https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

REACT NAVIGATION 5 (no more switchNavigator)

Configuration initiale de React NAvigator

Il vous faut installer le package principal et tous les package suivants

$ npm install @react-navigation/native
$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Installation des fichiers natifs IOS

$ cd ios; pod install; cd ..

Chargement de gesture handler en tout début de script du fichier d’entrée App.js ou index.js, cet import doit être vraiment le tout premier code Js de votre projet.

# dans index.js (ou App.js si pas de index.js)
import 'react-native-gesture-handler';

Pour Android, pas d’installation, mais ajouter deux lignes dans le fichier build.gradle dans votre_projet/android/app/build.gradle dans la directive dependencies

 dependencies {
    ....
  implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
  implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
}

Passing data to Screen:

<Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />

passing initial param to a screen from <Stack.Screen>
<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>


Retrieving from the destination Screen :
function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
    ....

Pour migrer de la version 4 de React Navigation à la 5, voici le lien, principale différence dans la version 5

“In React Navigation 5.x, we have split the navigation prop into 2 props: navigation prop contains helper methods such as navigate, goBack etc., route prop contains the current screen’s data (previously accessed via navigation.state).

In React Navigation 5.x there’s no createAppContainer which provided screens with navigation context. You’ll need to wrap your app with NavigationContainer provider.

Imbrication de routes

Nesting Navigation: https://reactnavigation.org/docs/nesting-navigators/

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

React Hooks, une autre façon de faire par rapport aux classes

Au début, React se travaillait essentiellement avec des classes avec le mot clé class, ce n’est pas une varie classe au sens OOP, mais plutôt un sucre syntaxique. Depuis la version 16.8, les Hooks sont là et permettent de travailler d’une façon plus fonctionnelle (au sens programmation fonctionnelle)

https://medium.com/better-programming/react-hooks-vs-classes-add2676a32f2

Exemple avec class

import React from 'react'

class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      counter: 0
    }
    this.handleIncrement = this.handleIncrement.bind(this)
  }
  
  handleIncrement() {
    this.setState({
      counter: this.state.counter += 1
    })
  }
  
  render() {
    return (
      <div>
        <div>{this.state.counter}</div>
        <hr />
        <button type="button" onClick={this.handleIncrement}>+</button>
     </div>
    ) 
  }
}

Exemple fonctionnel

import React, {useState} from 'react'

function Counter() {
  const [counter, incrementCounter] = useState(0)
  
  function handleIncrement() {
    incrementCounter(counter + 1)
  }

  return (
    <div>
      <div>{counter}</div>
      <hr />
      <button type="button" onClick={handleIncrement}>+</button>
    </div>
  ) 
}

Déploiement sur Android Device (depuis MacOs)

Ouvrez Android Studio, branchez votre device Android (vous devrez avoir configuré en mode développeur). autorisez le transfert de fichier entre votre device et l’ordinateur.

Il y a deux façon de déployer sur votre device, soir en ligne de commande, soit en via Android Studio. Il faut au préalable avoir branché le device et ensuite faire la même commande

Vous aimerez aussi...