react native

18/11/2017

INSTALLATION

sur windows : yarn
sur apple : brew install watchman
Dans les 2 cas :

npm install -g react-native
npm install -g react-native-cli
npm install -g react-devtools

Pour apple :
xcode / preference / locations / command line tools > newest
pour windows :
androidstudio
lancer android studio
télécharger le sdk (en particulier la dernière version)
télécharger platform tools
télécharger tools
PATH: (ajouter cette ligne)
C:\Androidsdk\platform-tools
ANDROID_HOME
C:\Androidsdk
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
JAVA_HOME
C:\Program Files\Java\jdk1.8.0_11

créer un projet

react-native init AwesomeProject
npm install --save react-navigation
npm install --save react-native-vector-icons
npm install --save native-base
npm install --save react-native-calendars
npm install --save react-native-multiple-select
npm install --save react-native-datepicker

LANCER ANDROID

react-native run-android

Si probleme
android {
defaultConfig {
ndk {
abiFilters 'armeabi-v7a', 'x86'
}
}
}

SI problème, lancer une première fois le projet avec android studio et compiler, ça installera ce qu'il manque.
et créer un virtual device si necessaire
Si autre probleme
lancer a la main le bundler :

react-native start -- -reset-cache

Si tout merde

rm node_modules\react-native\local-cli\core__fixtures__\files\package.json
cd android    ./gradlew clean
rm -rf node_modules    npm install

pour debuger via adb (permet de voir les causes de plantage des version release par exemple)

adb logcat *:E

LANCER IOS

react-native run-ios

emacs ios/gextrareact/Info.plist

(ajouter ou modifier si ça existe ! en général il y a une règle localhost)

NSAppTransportSecurity

NSAllowsArbitraryLoads

RENAME PROJECT ID ANDROID

I've changed project subfolder name from:

"android/app/src/main/java/MY/APP/OLD_ID/"

to:

"android/app/src/main/java/MY/APP/NEW_ID/"

Then manually switched the old and new package ids:
In: android/app/src/main/java/MY/APP/NEW_ID/MainActivity.java:

package MY.APP.NEW_ID;

In android/app/src/main/java/MY/APP/NEW_ID/MainApplication.java:

package MY.APP.NEW_ID;

In android/app/src/main/AndroidManifest.xml:

package="MY.APP.NEW_ID"

In android/app/BUCK:

android_build_config(
    package="MY.APP.NEW_ID"
)
android_resource(
    package="MY.APP.NEW_ID"
)

And in android/app/build.gradle:

applicationId "MY.APP.NEW_ID"

Gradle' cleaning in the end (in /android folder):

./gradlew clean

RENAME PROJECT NAME ANDROID

In package.json

"name" : "gextranet",

In index.js

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

In app.json

{
    "name": "gextranet",
    "displayName": "gextranet"
}

In android/settings.graddle

rootProject.name = 'gextranet'

In android/app/src/main/java/net/gextra/app/MainActivity

protected String getMainComponentName() {
    return "gextranet";
}

In android/app/src/main/res/values/strings.xml

gextranet

RENAME PROJECT IOS

rm -rf ios
react-native upgrade

ou

react-native eject

puis vérifier ce qu'il s'est passé avec git
et récupérer les bouts de code manquant.

CHANGE VERSION ANDROID

android/app/build.gradle

android {
    defaultConfig {
        versionCode 1
        versionName "1.0"
        {...}
    }
    {...}
}

CHANGE TARGET SDK ANDROID

emacs android/app/build.gradle

android {
    compileSdkVersion 27
    buildToolsVersion "27.0.3"
    minSdkVersion 16
    targetSdkVersion 27
}
dependencies {
    compile "com.android.support:appcompat-v7:27.1.1"
}

emacs android/build.gradle

allprojects {
    repositories {
        maven {
            url 'https://maven.google.com'
        }
    }
}

CHANGER APP ICON ANDROID

Upload your image to Android Asset Studio ( http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html ).
download zip
extract to /android/app/src/main/res/ folder.
Make sure to put each image in the right subfolder mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

CHANGER APP ICON ios

https://makeappicon.com/
remplacer le dossier avec ce que le site fourni

RELEASE ANDROID

la première fois :
cd android/app
keytool -genkey -v -keystore gextrareact.keystore -alias gextrareact -keyalg RSA -keysize 2048 -validity 10000
emacs android/gradle.properties

MYAPP_RELEASE_STORE_FILE=gextrareact.keystore
MYAPP_RELEASE_KEY_ALIAS=gextrareact
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

emacs android/app/build.gradle

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

à chaque fois que l'on veut remettre sur le store :

cd android    ./gradlew assembleRelease

ca cree un fichier ici : android/app/build/outputs/apk/app-release.apk

react-native run-android --variant=release

tester manuellement :

adb devices
adb -s [device] install example.apk
adb -s 9885e64d5131533535 install android/app/build/outputs/apk/app-release.apk

BUG COMPILATION ANDROID : force sdk version on subprojects

error: failed linking references.
emacs android/build.graddle

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 28
                buildToolsVersion '28.0.0'
            }
        }
    }
}

RELEASE IOS

utiliser le flux normal de publication :
https://www.supinfo.com/articles/single/6726-publication-une-application-ios-app-store-debut-2018-partie-1
https://www.supinfo.com/articles/single/6953-publication-une-application-ios-store-debut-2018-partie-2
xcode
selectionner 'generic ios device'
product / archive / upload
si l'upload n'est pas possible on peut finaliser via 'application loader'