Android | iOS |
---|---|
Looking for the Yoroi Extension? See here
Make sure your Node.js version matches v10.14.2
. If you have nvm
installed, you can just nvm use
# install rustup
curl https://sh.rustup.rs -sSf | sh
# use 1.41.0 version
rustup toolchain install 1.41.0
rustup install 1.41.0
rustup target add wasm32-unknown-unknown --toolchain 1.41.0
Make sure rustc --version
outputs 1.41.0
, which is the stable version (and not nightly).
Install cocoapods and download ios dependencies:
gem install cocoapods
Install rust build targets: rustup target add aarch64-apple-ios armv7-apple-ios armv7s-apple-ios x86_64-apple-ios i386-apple-ios
Install cargo-lipo for building: cargo install cargo-lipo
MacOS Big Sur changed the default path of the system C linker, which breaks cargo lipo
. Some approaches to fix this are detailed here TimNN/cargo-lipo#41.
This requires a physical Android phone & USB cable
- Download VirtualBox
- Expose the USB to VirtualBox guide here Note: You MUST expose USB 2.0 for Android devices. Exposing 3.0 will not work
- If your devices still doesn't appear, follow these steps Note: The format for these steps have changed over the years so be careful if you need this.
On Host (Setup Android device)
- Run Virtual Device from Android Studio
On VM (Detect VirtualDevice from VirtualBox)
adb tcpip 5555
adb kill-server
adb connect 10.0.2.2:5555
On Host (allow app to connect to packaged bundle after build)
- Open VirtualBox
- VM Settings > Network >> Advanced > Port Forwarding
- Enter
8081
as Host Port and Guest Port (leave everything else blank)
# install & setup android studio
follow https://facebook.github.io/react-native/docs/getting-started.html (tab Building Projects with Native Code)
- Ask for a copy of (or create a blank version of)
android/gradle.properties.local
- Make sure your Anddroid build tools match the version in android/build.gradle (you will get an error otherwise)
- Download the NDK from Android Studio (see here for instructions)
- Install Rust for Android
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
Make sure the rust targets for the platform you will work on (android/iOS) have been correctly installed with rustup show
. Then:
yarn install
yarn setup_configs
- links libraries to ios testnet build configurations- When building on iOS:
cd ios && pod install
If these steps fail, try looking at the android CLI
-
react-native start
- this will run RN packager, let it running (optional step) -
react-native run-android --variant=devDebug --appIdSuffix=staging
- for version with testnet -
react-native run-android --variant=mainnetDebug
- for version with mainnet -
react-native run-ios --scheme=emurgo-staging --configuration=Staging.Debug
- staging (testnet) configuration -
react-native run-ios --scheme=emurgo --configuration=Debug
- production configuration
To run all unit tests:
$ yarn test
You can also run single test files, e.g.:
$ jest wallet.test.js
For E2E tsting we use the detox framework.
- iOS: MacOS 10.13 (High Sierra) or higher, Xcode 10.1 or higher.
- Android: Tested on Android Studio 3.5.1. Simulator: Android >= 9, API >= 28 (but prior versions may work too).
You only need to follow the instructions listed in the Step 1 of Detox's official docs:
$ brew tap wix/brew
$ brew install applesimutils
$ npm install -g detox-cli
Important: You need to build the app not only the first time you run the tests but also anytime you modify the code.
$ yarn e2e:build-android # for ios just replace "android" by "ios"
$ yarn e2e:test-android
This will build and test a release version of the app.
Read through this page to understand debugging for React-Native
This will allow you to put breakpoints and everything else you would ever need.
- Download & run https://github.com/jhen0409/react-native-debugger/releases
- While app is running, open debug menu
- Select
Debug JS remotely
- Follow Signed Android APK to generate and setup signing certificate for Android (required only before first release).
cd android
./gradlew assembleMainRelease
Important: You may run into Could not follow symbolic link third-party/glog-0.3.5/test-driver
error
if you try to build Android release on Mac. This is caused by incorrect linking in react-native/npm.
To fix the issue, locate path where automake
is installed (default /usr/local/share
) and re-link
file by running command:
ln -sf /usr/local/share/automake-<version>/test-driver <path_to_repo>/third-party/glog-0.3.5/test-driver
After following the instructions for iOS and Android -- it is not required to install both, rustup show
should return something like this:
rustup show
Default host: x86_64-apple-darwin
rustup home: /Users/nijaar/.rustup
installed toolchains
--------------------
stable-x86_64-apple-darwin
1.41.0-x86_64-apple-darwin (default)
installed targets for active toolchain
--------------------------------------
aarch64-apple-ios
aarch64-linux-android
armv7-apple-ios
armv7-linux-androideabi
armv7s-apple-ios
i386-apple-ios
i686-linux-android
x86_64-apple-darwin
x86_64-apple-ios
x86_64-linux-android
active toolchain
----------------
1.41.0-x86_64-apple-darwin (default)
rustc 1.41.0 (5e1a79984 2020-01-27)
The imports should be in this order:
- import of external libraries
- import of our custom code
- import of component styles
- import of types
Example:
// @flow
// external libraries
import React from 'react'
import {compose} from 'redux'
import {connect} from 'react-redux'
import {View} from 'react-native'
// our code
import Screen from '../../components/Screen'
import AdaIcon from '../../assets/AdaIcon'
import {confirmationsToAssuranceLevel, printAda} from '../../helpers/utils'
// styles
import styles from './TxDetails.style'
// types
import type {TransactionType} from '../../types/HistoryTransaction'
- If you use component in multiple screens, it should be in
UiKit
folder with other UI components and imported from it. - Each component file has own file with styles.
- Don't import multiple style files into one component.
- Keep the style's structure flat.
- If there is same component in
UiKit
as inreact-native
, use the one fromUiKit
.
// src/components/UiKit/index.js
// Example of export for a default component that can be imported from UI.
export {default as Button} from './Button'
import {Text, Button, Input} from '../UiKit'
// ...
import {colors} from './config'
// Wrong
// The background color can change, gray is constant name for specific color.
background: colors.GRAY
// ...
// Good
// Changing the background color doesn't require to change the name.
// We want to change values, not labels most of time.
background: colors.background
// ...