React Native & Expo on Aamnah - Frontend Web Developer

Setup dev environment for React Native CLI (macOS / Ubuntu)

Wed, 20 Jul 2022 00:00:00 +0500

Requirements

Node 14+
JDK 8+
Android 12 (S)
Android Studio
Xcode

Pre-requisite dependencies

 1# Homebrew - to make our lives easier
 2/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 3brew --version
 4
 5# Node (with NVM) - to run JavaScript from terminal
 6curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 7
 8echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
 9[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.zprofile
10
11nvm install --lts
12nvm alias default node
13node --version
14
15# Watchman - for watching for changes to files in the project
16brew install watchman
17watchman --version

macOS

1# CocoaPods - to bring in 3rd party packages written in Objective-C or Swift
2brew install cocoapods
3echo "export LANG=en_US.UTF-8" >> ~/.zprofile
4pod --version
5
6# JDK - to compile Android apps
7brew install openjdk # installs openjdk@18

Xcode

Xcode is Apple’s IDE (integrated development environment) for building Mac, iOS, watchOS, and tvOS apps. It supports the Objective-C and Swift languages. We need it for React Native in order to use its build tools, which allows us to compile the native code necessary to build React Native apps.

Setting up multiple environments in React Native in a cross-platform way and use variables in JS, Android and iOS projects

Mon, 14 Mar 2022 12:35:14 +0500

Environment variables

1npm install --save-dev cross-env
2npm install react-native-config

The following is involved

Setting environment variables with cross-env
Loading env files (.env.staging) by setting ENVFILE
Using these env vars inside JS/Android/iOS

1cross-env ENVFILE=.env.staging && react-native run-ios

1# .env.staging
2API_URL=https://myapi.com
3GOOGLE_MAPS_API_KEY=abcdefgh

1import Config from 'react-native-config'
2
3Config.API_URL // 'https://myapi.com'
4Config.GOOGLE_MAPS_API_KEY // 'abcdefgh'

Additionally, you should also set NODE_ENVto be able to use it in places like babel.config.js to be able to configure plugins (e.g. remove all console.log statements from production environment) Setting process.env.NODE_ENV inside the code is not recommended

Creating a Docker image for React Native, Android and Fastlane

Tue, 02 Mar 2021 19:12:59 +0500

Why? So i could use it inside my CD (Bitbucket Pipelines) and save on build minutes.

 1# Dockerfile
 2FROM ubuntu:20.04
 3
 4LABEL Description="This image provides a base Android development environment for React Native, and may be used to run tests."
 5
 6ENV DEBIAN_FRONTEND=noninteractive
 7
 8# set default build arguments
 9ARG SDK_VERSION=commandlinetools-linux-6609375_latest.zip
10ARG ANDROID_BUILD_VERSION=30
11ARG ANDROID_TOOLS_VERSION=30.0.3
12ARG BUCK_VERSION=2020.10.21.01
13ARG NDK_VERSION=20.1.5948944
14ARG NODE_VERSION=14.x
15ARG WATCHMAN_VERSION=4.9.0
16
17# set default environment variables
18ENV ADB_INSTALL_TIMEOUT=10
19ENV ANDROID_HOME=/opt/android
20ENV ANDROID_SDK_HOME=${ANDROID_HOME}
21ENV ANDROID_NDK=${ANDROID_HOME}/ndk/$NDK_VERSION
22ENV JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
23
24ENV PATH=${ANDROID_NDK}:${ANDROID_HOME}/cmdline-tools/tools/bin:${ANDROID_HOME}/emulator:${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/tools:${ANDROID_HOME}/tools/bin:/opt/buck/bin/:${PATH}
25
26# Install system dependencies
27RUN apt update -qq && apt install -qq -y --no-install-recommends \
28        apt-transport-https \
29        curl \
30        file \
31        gcc \
32        git \
33        g++ \
34        gnupg2 \
35        libc++1-10 \
36        libgl1 \
37        libtcmalloc-minimal4 \
38        make \
39        openjdk-8-jdk-headless \
40        openssh-client \
41        python3 \
42        python3-distutils \
43        rsync \
44        ruby \
45        ruby-dev \
46        tzdata \
47        unzip \
48        sudo \
49        ninja-build \
50        zip \
51    && gem install bundler \
52    && rm -rf /var/lib/apt/lists/*;
53
54# Refresh keys to prevent invalid signature
55RUN apt-key adv --refresh-keys --keyserver keyserver.ubuntu.com
56
57# install nodejs and yarn packages from nodesource and yarn apt sources
58RUN curl -sL https://deb.nodesource.com/setup_${NODE_VERSION} | bash - \
59    && echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list \
60    && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
61    && apt-get update -qq \
62    && apt-get install -qq -y --no-install-recommends nodejs yarn \
63    && rm -rf /var/lib/apt/lists/*
64
65# download and install buck using debian package
66RUN curl -sS -L https://github.com/facebook/buck/releases/download/v${BUCK_VERSION}/buck.${BUCK_VERSION}_all.deb -o /tmp/buck.deb \
67    && dpkg -i /tmp/buck.deb \
68    && rm /tmp/buck.deb
69
70# Full reference at https://dl.google.com/android/repository/repository2-1.xml
71# download and unpack android
72RUN curl -sS https://dl.google.com/android/repository/${SDK_VERSION} -o /tmp/sdk.zip \
73    && mkdir -p ${ANDROID_HOME}/cmdline-tools \
74    && unzip -q -d ${ANDROID_HOME}/cmdline-tools /tmp/sdk.zip \
75    && rm /tmp/sdk.zip \
76    && yes | sdkmanager --licenses \
77    && yes | sdkmanager "platform-tools" \
78        "emulator" \
79        "platforms;android-$ANDROID_BUILD_VERSION" \
80        "build-tools;$ANDROID_TOOLS_VERSION" \
81        "cmake;3.10.2.4988404" \
82        "system-images;android-21;google_apis;armeabi-v7a" \
83        "ndk;$NDK_VERSION" \
84    && rm -rf ${ANDROID_HOME}/.android

Setting up an M1 MacBook Pro for React Native (iOS and Android)

Wed, 24 Feb 2021 00:00:00 +0500

Setting up the environment

Setup for iOS needs:

Node (with NVM)
Watchman brew install watchman
Xcode (install from the App Store)
Xcode Command Line Tools xcode-select --install
Accept the Software License for Xcode sudo xcodebuild -license. It’ll prompt you anyway when you run Xcode for the first time.
CocoaPods sudo gem install cocoapods

1# node will be installed with NVM
2brew install watchman
3
4# install CocoaPods
5#sudo gem install cocoapods
6brew install cocoapods

clone the project
`npm ci`

Ruby

Install Ruby 3.x. The one that comes pre-installed with macOS is outdated

Signing your React Native app for Android with Google Play App Signing

Mon, 08 Feb 2021 21:54:47 +0500

There are two keys you needs. One is the App signing key, the master key used to sign your app. And the Upload key, which is an added layer of security on top of the original app signing key.

The app signing key can only be upgraded (i.e. generate a new one if old one is lost/compromised) once in an app’s lifetime. If you lose it twice, you’ll never be able to release updates for your app to the Play Store.

Styling the StatusBar in React Native, Expo and React Navigation

Wed, 26 Aug 2020 20:52:39 +0500

StatusBar.currentHeight is Android only (e.g. 49.14285659790039 on Pixel 3 XL with a notch), return null on iOS
Constants.statusBarHeight from expo-constants works on both iOS and Android. (e.g. 20 on iPhone 5, 49 on Pixel 3 XL with a notch )
backgroundColor is also Android only
StatusBar needs to be outside of the SafeArea for it to render properly
SafeArea excludes the StatusBar. If you don’t use a SafeArea, the view will get inside the StatusBar
Set translucent on the status bar to make it behave consistently on iOS and Android. Doing so will make your life easier. Not doing so will means you’ll always add Platform specific code.

StatusBar height in iOS

The height is pretty much always 20, unless it’s hidden or an app is active during an incoming call, in which case it is 40 points. Except iPhone X and iPhone 11 are different because they have notches..

Opening React Native Debugger automatically on the correct port

Tue, 11 Aug 2020 08:53:26 +0500

the issues:

I work on both Expo and React Native projects. The ports for both are different, one works on port 19001 and the other on 8080. React Native debugger always opens on the one default port in it’s config, and i have to manually open a new window with the correct port every time i switch from working on Expo or React Native.
React Native opens a Chrome tab every time i start debugging, which i have to close in order to work with React Native Debugger

the solutions:

Troubleshooting and Debugging React Native

Sat, 08 Aug 2020 00:00:00 +0000

console.log

Enable console.logs for React Native

1# run this command (when the app is running) to enable React Native logging
2# You only need to run this once and it'll be enabled for all future apps as well
3
4npx react-native log-ios
5npx react-native log-android

adb logs

You can start adb logging in another Terminal window

1# For a steady stream of constant logging
2adb logcat
3
4# filter React related logs
5adb logcat '*:S ReactNative:V ReactNativeJS:V'

Common Errors

White screen of death

Custom fonts in React Native

Mon, 03 Aug 2020 17:29:39 +0500

tl;dr

Create an assets folder and copy your fonts to it
Add config to react-native.config.js
Run react-native link to install fonts for both Android and iOS

1// react-native.config.js
2module.exports = {
3  assets: ['./assets/fonts/Graphik'],
4}

android/app/src/main/assets/

The value for fotFamily (or just font-family if you’re usig styled-components) will be the font filename minus the extension.

Notes of font formats

Use .otf or .ttf.

.woff won’t work. (.woff is a compressed version of OpenType .otf or TrueType .ttf)

notes on SafeAreaView in React Native

Mon, 27 Jul 2020 00:00:00 +0500

the default SafeAreaView that comes with react-native only works on iOS devices, and only on iOS version 11 or later. Plus it can cause jumpy behaviour when a screen is animating (according to React Navigation docs)
the recommened alternative is react-native-safe-area-context, which gives you SafeAreaProvider, SafeAreaView and useSafeAreaInsets etc, It works on Android as well as iOS.
you can’t set padding to a SafeAreaView because implementing it’s own padding is part of its behaviour. If you apply padding rules in styles, they’ll be ignored.
you can however set padding on a View inside a SafeAreaView

React Navbigation and Safe area

React Navigation handles safe area inside it’s default header. If you use the default header as well as a SafeArea then expect weird behaviour
If you’re using a custom header, make sure your UI is within safe area
SafeArea is no longer exported by react-navigation v5. Previously you could import { SafeAreaView } from "react-navigation"
React Navigation recommends using react-native-safe-area-context
When using nested headers, you get extra empty space at the top on Android but not on iOS

If using default header, don’t use SafeArea, default header handles both Android and iOS.

Passing params to React Navigation Header in Functional Components

Wed, 22 Jul 2020 00:00:00 +0500

You set the param first with navigation.setParams. If it’s gonna change often, you’ll probably set it in useEffect()

 1import React, { useEffect, useState } from 'react'
 2import { useNavigation } from 'react-navigation-hooks'
 3
 4export function Conversations() {
 5  const navigation = useNavigation()
 6
 7  const [showArchived, setShowArchived] = useState(false)
 8  const [search, setSearch] = useState('')
 9  const [isSearching, setIsSearching] = useState(false)
10
11  useEffect(() => {
12    navigation.setParams({ showArchived })
13    navigation.setParams({ setShowArchived })
14    navigation.setParams({ isSearching })
15    navigation.setParams({ setIsSearching })
16    navigation.setParams({ search })
17    navigation.setParams({ setSearch })
18  }, [showArchived, isSearching, search])
19
20return ()
21}
22
23Conversations.navigationOptions = ({
24  navigation,
25}: {
26  navigation: NavigationStackProp<NavigationRoute>,
27}): NavigationStackOptions => {
28  const showArchived = navigation.getParam('showArchived', false)
29  const setShowArchived = navigation.getParam('setShowArchived', false)
30  const isSearching = navigation.getParam('isSearching', false)
31  const setIsSearching = navigation.getParam('setIsSearching', false)
32  const search = navigation.getParam('search', '')
33  const setSearch = navigation.getParam('setSearch', '')
34
35  return {}
36}

React Native - Getting Started

Wed, 24 Jun 2020 20:52:08 +0500

Running the app

You need to run

1npx react-native start

to start the app. And then

1npx react-native run-android

to start the app in an Android emulator or on device.

The docs are a bit misleading here, as they only mention the rnu-android command. but if you run that directly, you’ll get a red error saying script not found. So npx react-native start first and then in another Terminal, do npx react-native run-android

Setting up React Native development environment on Linux Ubuntu 20.04

Wed, 24 Jun 2020 18:31:56 +0500

Checklist

Install Node
Install JDK
Install Watchman (optional)
Install Android Studio
Install Android SDK
Configure Android environment variables
Setup physical Android device

The entire process above gets fairly simple once you have done it at least twice.. Most of it can be done via the Terminal and can be scripted. Installing the SDK is the one step that you have got to do from inside Android Studio..

Beta testing your React Native app

Wed, 03 Jun 2020 23:57:59 +0500

Fastlane (Android, iOS)
Firebase App Distribution (Android, iOS)
Google Play Console (Android)
TestFlight (iOS)
App Center (iOS, Android, Windows, Xamarin, React Native)

Fastlane

Fastlane takes screenshots as well. Works well with react native

1# install fastlane on Ubuntu
2sudo apt install -y ruby ruby-dev
3sudo gem install fastlane -NV

Automated UI Testing

App Center, Play Console, Firebase Test Lab

React Native tips

Fri, 22 Nov 2019 16:28:41 +0500

1<TabBarIcon
2  focused={focused}
3  name={
4    Platform.OS === 'ios'
5      ? `ios-information-circle${focused ? '' : '-outline'}` // changing icon based on focus
6      : 'md-information-circle'
7  }
8/>

focused is a boolean here that is part of React Navigation’s navigationOptions

 1import Colors from '../constants/Colors';
 2
 3export default function TabBarIcon(props) {
 4  return (
 5    <Ionicons
 6      name={props.name}
 7      size={26}
 8      style={{ marginBottom: -3 }}
 9      color={props.focused ? 'teal' : 'salmon'}
10    />
11  );
12}

Defining `shadow` if `iOS` and `elevation` if Android

Android does not support box shadows while iOS does. The Android equivalent of shadow is elevation: number

Animating SVG in React Native

Fri, 22 Nov 2019 12:13:35 +0500

So this started when i wanted to create placeholder components using SVG.. Here’s the complete code:

  1// Placeholder.tsx
  2import React, { useEffect } from 'react'
  3import { Animated, View } from 'react-native'
  4import Svg, {
  5  SvgProps,
  6  Circle,
  7  CircleProps,
  8  Rect,
  9  RectProps,
 10  CommonPathProps
 11} from 'react-native-svg'
 12
 13type Props = Readonly<{
 14  loading?: boolean
 15  shape?: 'circle' | 'rect'
 16  size: number
 17  height: number
 18  width: number
 19}>
 20
 21// set a value to be animated
 22const currentColor = new Animated.Value(0)
 23
 24// interpolate color value
 25const changeColor = currentColor.interpolate({
 26  inputRange: [0, 1, 2], // the values that the animation will transition from
 27  outputRange: ['gainsboro', 'whitesmoke', 'gainsboro'] // values that are animating
 28})
 29
 30// define the looping animation
 31const animateColor = ()=> {
 32    Animated.loop(
 33      Animated.sequence([
 34        Animated.timing(currentColor, {
 35          toValue: 2, // the value in interpolated output range that you want to go to
 36          duration: 2000 // ms
 37        }),
 38      ])
 39    ).start()
 40  }
 41
 42export default function Placeholder({
 43  loading = true,
 44  size = 50,
 45  height = 50,
 46  width = 50,
 47  radius = 8,
 48  shape = 'rect',
 49  fill = 'gainsboro',
 50  ...rest
 51}: Props &
 52  SvgProps &
 53  CircleProps &
 54  RectProps &
 55  CommonPathProps &
 56  any) {
 57
 58  useEffect(() => {
 59    // start the animation to change background color
 60    animateColor()
 61  })
 62
 63  const AnimatedSvg = Animated.createAnimatedComponent(Svg)
 64
 65  return (
 66    <View
 67    loading={loading}
 68    style={{margin: 8}}
 69    {...rest}
 70    >
 71      {shape === 'circle' && (
 72      <AnimatedSvg
 73        size={size}
 74        height={size}
 75        width={size}
 76        viewBox={`0 0 ${size * 2} ${size * 2}`}
 77        fill={loading ? changeColor : fill}
 78      >
 79        <Circle
 80          cx={size}
 81          cy={size}
 82          r={size}
 83        />
 84      </AnimatedSvg>
 85      )}
 86
 87      {shape === 'rect' && (
 88      <AnimatedSvg
 89        height={height}
 90        width={width}
 91        viewBox={`0 0 ${width} ${height}`}
 92        fill={loading ? changeColor : fill}
 93      > 
 94        <Rect
 95          x="0"
 96          y="0"
 97          rx={radius}
 98          width={width}
 99          height={height}
100        />
101      </AnimatedSvg>
102      )}
103    </View>
104  )
105}

Referencing the component:

Creating a placeholder loading Component in React Native using Animated

Thu, 21 Nov 2019 00:00:00 +0500

I’m creating a React Native component that shows as a placeholder for live data (in other words: loading boxes) and changing it’s color to indicate that stuff is loading..

Here’s how you go about doing that:

Create a new Animated value, and give it the initial value.

1// set a value to be animated
2const currentColor = new Animated.Value(0)

To change color you can use .interpolate() on the animated value you just created. Interpolate will take an array of input values inputRange, and another one of output values outputRange, and then map the values to each other. You can either do this interpolation inside your Animate function, or you can define it separately, which i did, like so:

1// interpolate color value
2const changeColor = currentColor.interpolate({
3  inputRange: [0, 1, 2],
4  outputRange: ['gainsboro', 'whitesmoke', 'gainsboro']
5})

What the code above would mean is that at my initial value of 0, the color would be gainsboro and when i move to 1 it’ll change to whitesmoke. Then i’m changing it back to gainsboro at 2 (because i want to loop the color change). If you set the toValue as 1 in the above code, it’ll only transition till whitesmoke and ignore what comes afterwards.

Time it taskes to setup a Recat Native project

Mon, 04 Nov 2019 00:00:01 +0500

Time it takes to setup a React Native project

~15 minutes: finding a logo/graphic to use with the app and create PNGs for icon and splash page
~15 minutes: Setting up bitbucket pipelines
~10 minutes: Setting up the repo on Bitbucket/Github
~5 minutes: Initializing a React Native app with Expo

Debugging Redux State in React Native

Mon, 04 Nov 2019 00:00:00 +0500

tl;dr

Install React Native Debugger for your system and redux-devtools-extension for your app
Shake your app (device) and enable Debug JS Remotely from the menu.
Close all open debugger windows (e.g. the one that opens in the Browser when you enable Remote debugging)
Open a tab in React Native Debugger with the port your app’s debugger is running on. For Expo DevTools it’s usually 19002. (RND is smart enough to automatically detect the port when you open a new tab..)

Setup Redux DevTools Extension in your app

1npm install -D redux-devtools-extension

If you just have a simple Redux store with no middleware or enhancers, use devToolsEnhancer()

React Native & Expo on Aamnah - Frontend Web Developer

Setup dev environment for React Native CLI (macOS / Ubuntu)

Pre-requisite dependencies

macOS

Xcode

Setting up multiple environments in React Native in a cross-platform way and use variables in JS, Android and iOS projects

Environment variables

Creating a Docker image for React Native, Android and Fastlane

Links

Setting up an M1 MacBook Pro for React Native (iOS and Android)

Setting up the environment

Ruby

Signing your React Native app for Android with Google Play App Signing

Styling the StatusBar in React Native, Expo and React Navigation

StatusBar height in iOS

Opening React Native Debugger automatically on the correct port

Troubleshooting and Debugging React Native

console.log

adb logs

Common Errors

White screen of death

Custom fonts in React Native

Notes of font formats

notes on SafeAreaView in React Native

React Navbigation and Safe area

Passing params to React Navigation Header in Functional Components

React Native - Getting Started

Running the app

Setting up React Native development environment on Linux Ubuntu 20.04

Beta testing your React Native app

Fastlane

Automated UI Testing

React Native tips

Changing navigation icon and color based on focus

Defining `shadow` if `iOS` and `elevation` if Android

Animating SVG in React Native

Creating a placeholder loading Component in React Native using Animated

Time it taskes to setup a Recat Native project

Debugging Redux State in React Native

Setup Redux DevTools Extension in your app

React Native & Expo on Aamnah - Frontend Web Developer

Setup dev environment for React Native CLI (macOS / Ubuntu)

Pre-requisite dependencies

macOS

Xcode

Setting up multiple environments in React Native in a cross-platform way and use variables in JS, Android and iOS projects

Environment variables

Creating a Docker image for React Native, Android and Fastlane

Links

Setting up an M1 MacBook Pro for React Native (iOS and Android)

Setting up the environment

Ruby

Signing your React Native app for Android with Google Play App Signing

Styling the StatusBar in React Native, Expo and React Navigation

StatusBar height in iOS

Opening React Native Debugger automatically on the correct port

Troubleshooting and Debugging React Native

console.log

adb logs

Common Errors

White screen of death

Custom fonts in React Native

Notes of font formats

notes on SafeAreaView in React Native

React Navbigation and Safe area

Passing params to React Navigation Header in Functional Components

React Native - Getting Started

Running the app

Setting up React Native development environment on Linux Ubuntu 20.04

Beta testing your React Native app

Fastlane

Automated UI Testing

React Native tips

Changing navigation icon and color based on focus

Defining shadow if iOS and elevation if Android

Animating SVG in React Native

Creating a placeholder loading Component in React Native using Animated

Time it taskes to setup a Recat Native project

Debugging Redux State in React Native

Setup Redux DevTools Extension in your app

Defining `shadow` if `iOS` and `elevation` if Android