DEV Community: Chris Finn

Amplify Algolia Search

Chris Finn — Tue, 27 Jul 2021 14:28:22 +0000

I built a custom directive to enable searching with Algolia:
https://github.com/thefinnomenon/graphql-algolia-transformer

It has been a pleasure building MVPs with Amplify but I was annoyed at the monthly cost of Elasticsearch and wanted a search that fits the Serverless "pay per use" model -- enter Algolia. It has a decent free monthly quota so you can make a low cost MVP or small app. It also has a really simple management interface and solid client libraries and UI widgets.

I created a simple searchable blog example (which turned more into a recipe search 😆) that can be found in the Github repo. If you need to add search to your Amplify project, give this transformer a shot.

type Blog @model {
  id: ID!
  name: String!
  posts: [Post] @connection(keyName: "byBlog", fields: ["id"])
}

type Post @model @algolia(fields:{include:["title"]}) @key(name: "byBlog", fields: ["blogID"]) {
  id: ID!
  title: String!
  blogID: ID!
  blog: Blog @connection(fields: ["blogID"])
  comments: [Comment] @connection(keyName: "byPost", fields: ["id"])
}

type Comment @model @key(name: "byPost", fields: ["postID", "content"]) {
  id: ID!
  postID: ID!
  post: Post @connection(fields: ["postID"])
  content: String!
}

react-navigation v5 (alpha)

Chris Finn — Tue, 19 Nov 2019 00:00:00 +0000

Same post for react-navigation v4

Introduction

One of the most important aspects of any application is navigation. Unless your application is truly one single screen, your user is going to have to click to navigate around and this requires a good navigation library. There are a few popular options in the React-Native world but the most popular, and the one recommended in Facebook’s React-Native documentation, is React Navigation. The library just underwent a huge rewrite with v5 which is currently in alpha , but we will use this is the library throughout this post and cover how to use it for common navigation scenarios.

IMPORTANT NOTE

I currently can’t get the gestures to work for the drawer so if you need a drawer I would avoid upgrading to v5.

What are Navigators?

The main concept behind React Navigation is navigators. The app will essentially be a chain of navigators that define the app’s screens and flow between them. There are multiple navigation types and each has its configuration options.

It is up to you to decide which navigator or navigators fit best in your app. You are not limited to just using one and they can even be embedded in one another (e.g. a stack navigator embedded in a tab navigator).

For our demo app we will be making an app with a tab navigator with three tabs. The first tab is simply a normal screen component, the second tab will have a stack navigator embedded with two buttons, “Red” and “Blue, that lead to a screen of the color clicked. The second tab has a drawer navigator with a screen containing a button to trigger the drawer.

Initialize Project

npx react-native init magellan --template react-native-template-typescript
cd magellan

git init
git add -A
git commit -m "react-native init"

Install Supporting Libraries

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

iOS

cd ios/
pod install
cd ..

Android

// android/app/build.gradle

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

// android/app/src/main/java/com/<PROJECT_NAME>/MainActivity.java

...
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
...

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }

    ...
}

Install React-Navigation Core

yarn add @react-navigation/core@next @react-navigation/native@next

Install Stack Navigator

yarn add @react-navigation/stack @react-native-community/masked-view

iOS

cd ios/
pod install
cd ..

Install Tab Navigator

yarn add @react-navigation/bottom-tabs

Install Drawer Navigator

yarn add @react-navigation/drawer

Example App

App

// App.tsx

import React from 'react';
import { NavigationNativeContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';
import { enableScreens } from 'react-native-screens';
import TabNavigator from './src/navigators/TabNavigator';

// Enable react-native-screens for performance improvements
enableScreens();

// Import main Navigator & wrap it in NavigationNativeContainer
const App = () => (
  <NavigationNativeContainer>
    <TabNavigator />
  </NavigationNativeContainer>
);

export default App;

Navigators

TabNavigator

// src/navigators/TabNavigator.tsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// Import Components
import HomeScreen from '../screens/HomeScreen';
import ColorStackNavigator from './ColorStackNavigator';
import DrawerNavigator from '../navigators/DrawerNavigator';

// Initialize Bottom Tab Navigator
const BottomTabs = createBottomTabNavigator();

// Create TabNavigator with three tabs
const TabNavigator = () => (
  <BottomTabs.Navigator>
    <BottomTabs.Screen name="Home" component={HomeScreen} />
    <BottomTabs.Screen name="Color" component={ColorStackNavigator} />
    <BottomTabs.Screen name="Drawer" component={DrawerNavigator} />
  </BottomTabs.Navigator>
);

export default TabNavigator;

ColorStackNavigator

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

// Import Components
import ChooseColorScreen from '../screens/ChooseColorScreen';
import ColorScreen from '../screens/ColorScreen';

// Make type for the screens and params
export type ColorStackNavigatorParamList = {
  ChooseColor: undefined;
  Color: { color: 'blue' | 'red' };
};

// Initialize StackNavigator with the created type
const Stack = createStackNavigator<ColorStackNavigatorParamList>();

// Create ColorStackNavigator with two screens
const ColorStackNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="ChooseColor"
      component={ChooseColorScreen}
      options={{ title: 'Choose Color' }}
    />
    <Stack.Screen
      name="Color"
      component={ColorScreen}
      options={({ route }) => ({ title: route.params.color })}
    />
  </Stack.Navigator>
);

export default ColorStackNavigator;

DrawerNavigator

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Import Components
import DrawerScreen from '../screens/DrawerScreen';
import OtherScreen from '../screens/OtherScreen';

// Make type for the screens and params
export type DrawerNavigatorParamList = {
  Drawer: undefined;
  Other: undefined;
};

// Initialize DrawerNavigator with the created type
const Drawer = createDrawerNavigator<DrawerNavigatorParamList>();

// Create DrawerNavigator with two screens
const DrawerNavigator = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Drawer" component={DrawerScreen} />
    <Drawer.Screen name="Other" component={OtherScreen} />
  </Drawer.Navigator>
);

export default DrawerNavigator;

Currently the gesture-handler doesn’t seem to be working so you can’t slide the drawer out or tap it away. It is an ongoing issue so I will update when I find a solution.

Screens

HomeScreen

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>Welcome! Try navigating with the other tabs.</Text>
    </View>
  );
};

ChooseColorScreen

import React from 'react';
import { StackNavigationProp } from '@react-navigation/stack';
import { ColorStackNavigatorParamList } from '../navigators/ColorStackNavigator';
import { StyleSheet, View, Button } from 'react-native';

// Make type for screen navigation props
type ChooseColorScreenNavigationProp = StackNavigationProp<
  ColorStackNavigatorParamList,
  'ChooseColor'
>;

// Make type for screen props
type Props = {
  navigation: ChooseColorScreenNavigationProp;
};

const ChooseColorScreen = ({ navigation }: Props) => (
  <View style={styles.container}>
    <Button
      title="Red"
      onPress={() => navigation.navigate('Color', { color: 'red' })}
    />
    <Button
      title="Blue"
      onPress={() => navigation.navigate('Color', { color: 'blue' })}
    />
  </View>
);

...

export default ChooseColorScreen;

ColorScreen

import React from 'react';
import { RouteProp } from '@react-navigation/core';
import { ColorStackNavigatorParamList } from '../navigators/ColorStackNavigator';
import { View } from 'react-native';

// Make type for screen route prop
type ColorScreenRouteProp = RouteProp<ColorStackNavigatorParamList, 'Color'>;

// Make type for screen props
type Props = {
  route: ColorScreenRouteProp;
};

const ColorScreen = ({ route }: Props) => {
  const { color } = route.params;

  return <View style={{ flex: 1, backgroundColor: color }} />;
};

export default ColorScreen;

DrawerScreen

import React from 'react';
import { DrawerNavigationProp } from '@react-navigation/drawer';
import { DrawerNavigatorParamList } from '../navigators/DrawerNavigator';
import { StyleSheet, View, Button } from 'react-native';

// Make type for screen navigation props
type DrawerScreenRouteProp = DrawerNavigationProp<
  DrawerNavigatorParamList,
  'Drawer'
>;

// Make type for screen props
type Props = {
  navigation: DrawerScreenRouteProp;
};

const DrawerScreen = ({ navigation }: Props) => {
  return (
    <View style={styles.container}>
      <Button
        title="Click this text or swipe in from the left to toggle the drawer"
        onPress={() => navigation.toggleDrawer()}
      />
    </View>
  );
};

...

Currently the gesture-handler doesn’t seem to be working so you can’t slide the drawer out or tap it away. It is an ongoing issue so I will update when I find a solution.

OtherScreen

...

const OtherScreen = () => {
  return (
    <View style={styles.container}>
      <Text>I am another screen!</Text>
    </View>
  );
};

...

Currently the gesture-handler doesn’t seem to be working so you can’t slide the drawer out or tap it away. It is an ongoing issue so I will update when I find a solution.

Conclusion

Navigation is really important for basically every app and thankfully React-Navigation makes quick, beautiful routing management and animated transitions a cinch. This post only covered the basics of how to use these main navigators but it should be enough to get you started. Even though v5 is in alpha right now, the only problem I have seen is the drawer gesture control. v5 adds a huge improvement in the structure of the navigators, making it more declarative and “Reacty”. Also the Typescript support is much better with the types in v4 being hard to work with.

When you need to start styling your navigation bars, adding icons, or whatnot, head over to the beautiful React-Navigation documentation. As I mentioned in the post, gestures are currently not working on the DrawerNavigator. I will update the post when I find a solution.

Checkout This Project’s Code On Github

React-Native Internationalization

Chris Finn — Tue, 19 Nov 2019 00:00:00 +0000

Introduction

Not every project needs internationalization but if you plan to have global customers, say if you were making a worldwide entertainment company, then you would need internationalization (i18n for short). For this, we will use the popular internationalization library i18next , its React wrapper library react-i18next , and react-native-localize to detect the device language.

Initialize Project

npx react-native init PrestigeWorldwide --template react-native-template-typescript
cd PrestigeWorldwide

git init
git add -A
git commit -m "react-native init"

Internationalization

Add Dependencies

yarn add i18next react-i18next react-native-localize

iOS

cd ios
pod install
cd ..

Add Locales

English

// locales/en.json

{
    "Hello": "Hello"
}

Portuguese

// locales/pt.json

{
    "Hello": "Olá"
}

Add JSON Support to Typescript

// tsconfig.json

{
  "compilerOptions": {
    ...
    "esModuleInterop": true,
    "resolveJsonModule": true,
    ...
  },
}

i18n Functionality

// utils/i18n.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

// Define the fallback language
const fallbackLanguage = { languageTag: 'en', isRTL: false };
// Check what the best supported language is based off of the device languages
const defaultLanguage =
  RNLocalize.findBestAvailableLanguage(['en', 'pt']) || fallbackLanguage;

// Load translation files
import en from '../locales/en.json';
import pt from '../locales/pt.json';

// Initialize the internationalization library
i18n.use(initReactI18next).init({
  lng: defaultLanguage.languageTag,
  resources: {
    en: { translation: en },
    pt: { translation: pt },
  },
  nsSeparator: false,
  keySeparator: false,
  fallbackLng: false,
  debug: true,
  interpolation: {
    escapeValue: false,
    formatSeparator: ',',
  },
  react: {
    wait: true,
  },
});

export default i18n;

Example Usage

Download the logo and add it to assets/images/.

// App.tsx

import React from 'react';
import {I18nextProvider, useTranslation} from 'react-i18next';
import i18 from './utils/i18n';
import {View, Image, Text, Button, StyleSheet} from 'react-native';

const Home = () => {
  const {t, i18n} = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <View style={styles.container}>
      <Image
        style={{width: 250, height: 250}}
        source={require('./assets/images/logo.png')}
      />
      <Text style={styles.message}>{t('THE FIRST WORD IN ENTERTAINMENT')}</Text>
      <Button title={t('English')} onPress={() => changeLanguage('en')} />
      <Button title={t('Portuguese')} onPress={() => changeLanguage('pt')} />
    </View>
  );
};

const App = () => {
  return (
    <I18nextProvider i18n={i18}>
      <Home />
    </I18nextProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  message: {
    fontSize: 18,
    marginBottom: 20,
  },
});

export default App;

Conclusion

Internationalization isn’t always needed but as you can see it’s not too difficult to setup. There are advanced options for loading languages from the backend and whatnot but that is for another day. Now go out there and start a global company so you have an excuse to use it!

Checkout This Project’s Code On Github

React-Native Dark Mode

Chris Finn — Mon, 18 Nov 2019 00:00:00 +0000

Introduction

In this post we will be implementing light and dark mode in our React-Native app using styled-components, context, and react-native-appearance. By the end of the post our app will default to the OS theme on start, update on OS theme change, and toggle light and dark based off of the switch. If a picture says a thousand words than a GIF says like a million or something so just look at this GIF of what we will be making.

Initialize Project

npx react-native init lightSwitch --template react-native-template-typescript
cd lightSwitch

git init
git add -A
git commit -m "react-native init"

Add Styled-Components

yarn add styled-components
yarn add --dev @types/styled-components

Theming

Handle System Mode

Currently React-Native doesn’t have an API for checking if the device is set to dark mode so we need this library.

yarn add react-native-appearance

iOS

cd ios/
pod install
cd ..

Android

Add the uiMode flag

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

<activity
...
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">
... >

Implement the onConfigurationChanged method

// android/app/src/main/java/com/<PROJECT_NAME>/MainActivity.java

import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import

public class MainActivity extends ReactActivity {
  ......

  // copy these lines
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    sendBroadcast(intent);
  }

  ......
}

Define Types

// types.ts

export type ThemeMode = 'light' | 'dark';

export interface ThemeContext {
  mode: ThemeMode;
  setMode(mode: ThemeMode): void;
}

export interface Theme {
  theme: {
    background: string;
    border: string;
    backgroundAlt: string;
    borderAlt: string;
    text: string;
  };
}

Add Themes

Light

// themes/light.ts

import {Theme} from '../types';

const light: Theme = {
  theme: {
    background: '#ededed',
    border: '#bdbdbd',
    backgroundAlt: '#eaeaeb',
    borderAlt: '#bdbdbd',
    text: '#171717',
  },
};

export default light;

Dark

// themes/dark.ts

import {Theme} from '../types';

const dark: Theme = {
  theme: {
    background: '#2E3440',
    border: '#575c66',
    backgroundAlt: '#575c66',
    borderAlt: '#2E3440',
    text: '#ECEFF4',
  },
};

export default dark;

Create Context

The ManageThemeContext is where all the magic happens. Here we create a new context, get the current OS mode, pass the theme into the styled-component’s ThemeProvider, register for OS mode changes, and set the status bar color appropriately.

// contexts/ManageThemeContext.tsx

import React, {createContext, useState, FC, useEffect} from 'react';
import {ThemeMode, ThemeContext} from '../types';
import {StatusBar} from 'react-native';
import {ThemeProvider} from 'styled-components/native';
// @ts-ignore
import {Appearance, AppearanceProvider} from 'react-native-appearance';
import lightTheme from '../themes/light';
import darkTheme from '../themes/dark';

// Get OS default mode or default to 'light'
const defaultMode = Appearance.getColorScheme() || 'light';

// Create ManageThemeContext which will hold the current mode and a function to change it
const ManageThemeContext = createContext<ThemeContext>({
  mode: defaultMode,
  setMode: mode => console.log(mode),
});

// Export a helper function to easily use the Context
export const useTheme = () => React.useContext(ManageThemeContext);

// Create the Provider
const ManageThemeProvider: FC = ({children}) => {
  const [themeState, setThemeState] = useState(defaultMode);

  const setMode = (mode: ThemeMode) => {
    setThemeState(mode);
  };

  // Subscribe to OS mode changes
  useEffect(() => {
    const subscription = Appearance.addChangeListener(
      ({colorScheme}: {colorScheme: ThemeMode}) => {
        setThemeState(colorScheme);
      },
    );
    return () => subscription.remove();
  }, []);

  // Return a component which wraps its children in a styled-component ThemeProvider,
  // sets the status bar color, and injects the current mode and a function to change it
  return (
    <ManageThemeContext.Provider
      value={{mode: themeState as ThemeMode, setMode}}>
      <ThemeProvider
        theme={themeState === 'dark' ? darkTheme.theme : lightTheme.theme}>
        <>
          <StatusBar
            barStyle={themeState === 'dark' ? 'light-content' : 'dark-content'}
          />
          {children}
        </>
      </ThemeProvider>
    </ManageThemeContext.Provider>
  );
};

// This wrapper is needed to add the ability to subscribe to OS mode changes
const ManageThemeProviderWrapper: FC = ({children}) => (
  <AppearanceProvider>
    <ManageThemeProvider>{children}</ManageThemeProvider>
  </AppearanceProvider>
);

export default ManageThemeProviderWrapper;

Example Usage

This is the example code behind the GIF at the top of this post.

import React from 'react';
import {Theme} from './types';
import styled from 'styled-components/native';
import ThemeManager, { useTheme } from './contexts/ManageThemeContext';
import { Switch } from 'react-native';

const Home = () => {
  // Helper function => useContext(ManageThemeContext)
  const theme = useTheme();
  return (
    <Container>
      <Switch
        value={theme.mode === 'dark'}
        onValueChange={value => theme.setMode(value ? 'dark' : 'light')}
      />
    </Container>
  );
};

// Get the background color from the theme object
const Container = styled.View<Theme>`
  flex: 1;
  justify-content: center;
  align-items: center;
  background: ${props => props.theme.background};
`;

// Wrap Home in the ThemeManager so it can access the current theme and
// the function to update it
const App = () => (
  <ThemeManager>
    <Home />
  </ThemeManager>
);

export default App;

Conclusion

Adding a light and dark mode to your app is pretty simple and adds a cool dynamic. It is also the hot, new thing to do so get to it!

Checkout This Project’s Code On Github

React-Native Linting & Testing

Chris Finn — Wed, 13 Nov 2019 00:00:00 +0000

Intro

Okay bear with me on this one. It ended up being longer than I expected but I promise it will be worth it! Testing may not be the most sexy topic but having a good testing setup is key for worry free (or at least minimal worrying) development. The following setup may look like a lot of steps but its pretty quick and once you do it once (or twice if you setup a CI) you are good to go. All that’s left is to write the actual tests 🤢.

Initialize Project

npx react-native init lintingAndTesting --template react-native-template-typescript
cd lintingAndTesting

Launch emulators

react-native run-android
react-native run-ios

Setup git

git init
git add -A
git commit -m "fresh react-native init"

Linting

Install Dependencies

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser cross-env husky lint-staged eslint prettier eslint-config-prettier eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native eslint-plugin-detox

This covers most of the default use cases but if you are using other libraries such as styled-components, you should look to see what linting tools there are for those.

ESLint Config

ESLint is a static analysis tool that checks your code for specific programming patterns; usually best practices for a language or tool.

Delete the Current Config

Delete .eslintrc.js

Add New Eslint Config

I prefer to keep my configs in package.json so I can try to reduce the number of files in the directory but you can keep it as it’s own config file if you want.

// package.json

{
  ...
  "eslintConfig": {
    "root": true,
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "prettier/react",
      "plugin:react/recommended",
      "plugin:react-native/all",
      "plugin:jsx-a11y/strict",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript",
      "plugin:jest/recommended",
      "@react-native-community"
    ],
    "plugins": [
      "react-hooks",
      "detox"
    ],
    "rules": {
      "react/jsx-filename-extension": [
        1,
        {
          "extensions": [
            ".js",
            ".jsx",
            ".ts",
            ".tsx"
          ]
        }
      ],
      "react/jsx-fragments": [
        1,
        "syntax"
      ],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    },
    "env": {
      "jest": true,
      "detox/detox": true,
      "react-native/react-native": true
    },
    "settings": {
      "react": {
        "version": "detect"
      }
    }
  },
  ...
}

Start with this basic setup & disable rules that you don’t want as you encounter them.

Prettier Config

Prettier is a code formatter that keeps your code formatted according to a specific configuration.

Delete the Current Config

Delete .prettierrc.js

Add New Prettier Config

I prefer to keep my configs in package.json so I can try to reduce the number of files in the directory but you can keep it as it’s own config file if you want.

// package.json

{
  ...
  "prettier": {
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all"
  },
  ...
}

This is the prettier config I use but you can customize it as you see fit.

Testing

Code Coverage

You can have jest compile a code coverage report which will give you an estimate of how well your tests cover your application and what spots you could use more focus in.

// package.json

{
  "scripts": {
    ...
    "test": "jest --coverage",
    ...
  }
}

Snapshot Testing

Snapshot testing is a super easy way to test that your components don’t accidently visually change. The idea is that you run the snapshot test & on first run, it will create a snapshot, a JSON file that represents the component’s elements, and on subsequent runs it will ensure that the component matches the snapshot. If not, it will fail. If this was an intended change than you simply update the snapshot to match the new output.

// __tests__ /App.tsx

it('renders correctly', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

yarn test

# If you want to update a failing snapshot
# yarn test -u

Detox

Detox is a tool from Wix that allows you to easily write end to end tests for your application.

Install iOS simulator utilities

brew tap wix/brew
brew install applesimutils

Install the Detox cli

npm install -g detox-cli

Add Detox to your project

yarn add --dev detox

Android Setup

// android/settings.gradle

...

include ':detox'
project(':detox').projectDir = new File(rootProject.projectDir, '../node_modules/detox/android/detox')

// android/build.grade

buildscript {
    ext {
        ...
        minSdkVersion = 18
        ...
        kotlinVersion = '1.3.10'
   }
   ...
   dependencies {
        ...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
   }
}

// android/app/build.gradle

dependencies {
  ...
  implementation "androidx.annotation:annotation:1.1.0"
  androidTestImplementation 'androidx.annotation:annotation:1.0.0'
  androidTestImplementation(project(path: ":detox"))
  androidTestImplementation 'junit:junit:4.12'
}

// android/app/build.gradle

android {
  ...

  defaultConfig {
      ...
      testBuildType System.getProperty('testBuildType', 'debug') // This will later be used to control the test apk build type
      testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
  }
}

Add Detox config to package.json

// package.json

{
  ...
  "detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/<APP_NAME>.app",
        "build": "xcodebuild -workspace ios/<APP_NAME>.xcworkspace -scheme <APP_NAME> -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11 Pro"
        }
      },
      "ios.sim.release": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/<APP_NAME>.app",
        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace ios/<APP_NAME>.xcworkspace -UseNewBuildSystem=NO -scheme APP_NAME -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -quiet",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11 Pro"
        }
      },
      "android.emu.debug": {
        "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
        "build": "cd android ; ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug ; cd -",
        "type": "android.emulator",
        "device": {
          "avdName": "Pixel_3_API_29"
        }
      },
      "android.emu.release": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android ; ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release ; cd -",
        "type": "android.emulator",
        "device": {
          "avdName": "Pixel_3_API_29"
        }
      }
    }
  },
  ...
}

Initialize for Jest

yarn run detox init -r jest

Add Scripts

// package.json

{
  "scripts": {
    ...
    "e2e:ios-debug": "detox build --configuration ios.sim.debug && detox test --configuration ios.sim.debug",
    "e2e:ios-release": "detox build --configuration ios.sim.release && detox test --configuration ios.sim.release",
    "e2e:android-debug": "detox build --configuration android.emu.debug && detox test --configuration android.emu.debug -l verbose",
    "e2e:android-release": "detox build --configuration android.emu.release && detox test --configuration android.emu.release -l verbose"
    ...
  }
}

Add a testID

Add a testID to the “Learn More” Text element.

// App.tsx

<Text style={styles.sectionTitle} testID="learnMore">
    Learn More
</Text>

Update Test

Write a test to make sure we can find our Text element.

// e2e/firstTest.spec.js

describe('App', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should show the learn more message', async () => {
    await expect(element(by.id('learnMore'))).toBeVisible();
  });
});

Modify Jest

E2E tests can take a while so you should set jest to ignore them by default.

// package.json

"jest": {
    ...
    "testPathIgnorePatterns": [
      "<rootDir>/e2e"
    ],
    ...
}

Run End to End Tests

yarn e2e:ios-debug
# yarn e2e:android-debug

There is currently an issue with Detox not connecting to the Android emulator so the Android tests won’t work. Some people have had luck by lowering the target sdk but for now it is an open issue and I will edit this post when I find a solution.

Git Hook

To ensure all your committed code is tested and formatted properly, we use husky and lint-staged to check everything pre-commit.

// package.json

{
  "scripts": {
        ...
        "ts-compile-check": "tsc -p tsconfig.json --noEmit"
    },
    ...
    "husky": {
        "hooks": {
            "pre-commit": "yarn audit && yarn run ts-compile-check && lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
            "eslint --fix",
            "prettier --fix",
            "cross-env NODE_ENV=test jest --bail --findRelatedTests",
            "git add"
        ]
    }
    ...
}

You could also trigger your E2E tests with this hook but I think it is better to manually trigger them at certain points or, ideally, have your CI run them on every push.

Conclusion

With this setup, you have a solid testing foundation to build your app off of. Your linters will enforce best coding practices and consistent formatting. Jest and react-test-renderer for unit and integration testing. Last but not least, you can write simple end to end tests with Detox. As you add libraries and your app complexities go you will most likely have to start mocking some functionality here and there as well as striving to keep a high code coverage.

This setup works great for your local development but if your team grows beyond just yourself or you want to offload the more intense tests (like the end to end ones), a good improvement would be setting the same thing up in a CI that is triggered on every push to your git repository.

Checkout This Project’s Code On Github

iOS and Android Notifications

Chris Finn — Thu, 26 Sep 2019 00:00:00 +0000

There are various libraries to handle notifications in a React-Native app but the support for both iOS and Android vary. The official React-Native solution, react-native-push-notifications-ios only supports iOS and the most popular community library, react-native-push-notification appears to currently be unmantained. After trying the most popular ones, I ended up using react-native-firebase which is well supported and has excellent documentation.

Project Setup

For this application I won’t be using Expo, but rather the react-native-cli and instead of plain JavaScript, I will use TypeScript.

Instead of reiterating the instructions provided by Facebook here, you can follow them at the following link, Getting Started.

npx react-native init notifications --template react-native-template-typescript
// Start an Android Simulator
cd notifications && react-native run-android
git init
git add -A
git commit -m "fresh react-native init"

Create Firebase Project

Create a new Firebase Project

Add Apps

Register Android

The Android Package Name can be found in /android/app/build.grade as applicationId. Defaults to com.project_name

Download google-services.json

Download google-services.json and add it to the app folder of your Android project.

Register iOS

Essentially the same as Android but grab the bundle id from the project in XCode.

Android

Add Project Dependency

// android/build.gradle

buildscript {
    //...
    dependencies {
       //...
        classpath 'com.google.gms:google-services:4.2.0'
    //...
    }
}
//...

Add App Dependencies

// android/app/build.gradle

//...
dependencies {
    //...
    implementation "com.google.android.gms:play-services-base:17.0.0"
    implementation "com.google.firebase:firebase-core:17.0.1"
    implementation "com.google.firebase:firebase-messaging:19.0.0"
    implementation 'me.leolin:ShortcutBadger:1.1.21@aar'
    //...
}
//...

apply plugin: 'com.google.gms.google-services'

Add packages in MainApplication

// android/app/src/main/java/com/notifications/MainApplication.java

//...

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;

//...

protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    //...
    packages.add(new RNFirebaseMessagingPackage());
    packages.add(new RNFirebaseNotificationsPackage());

    return packages;
}

Modify AndroidManifest

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

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.VIBRATE" />

...
<application>
    ...
    <activity
        android:name=".MainActivity"
        ...
        android:launchMode="singleTop">
        ...
    </activity>
    <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>

    <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

    <!-- Scheduled Notification Receivers -->
   <receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/>
   <receiver android:enabled="true" android:exported="true" android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver">
        <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED"/>
          <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
          <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
          <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
    </receiver>

    <!-- Set custom default icon. This is used when no icon is set for incoming notification messages.
       See README(https://goo.gl/l4GJaQ) for more. -->
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/ic_stat_ic_notification" />
    <!-- Set color used with incoming notification messages. This is used when no color is set for the incoming notification message. See README(https://goo.gl/6BKBk7) for more. -->
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_color"
        android:resource="@color/colorAccent" />
    <!-- Set default notification channel. This is used when incoming messages do not explicitly set a notification channel. -->
    <meta-data
    android:name="com.google.firebase.messaging.default_notification_channel_id"
    android:value="@string/default_notification_channel_id"/>
</application>

iOS

Add Capabilities

In Xcode, enable the following capabilities:

Push Notifications
Background modes > Remote notifications

Add Pods

// ios/Podfile

...

pod 'Firebase/Core', '~> 6.3.0'
pod 'Firebase/Messaging', '~> 6.3.0'

Modify AppDelegate

// ios/Notifications/AppDelegate.m

#import <Firebase.h>
#import "RNFirebaseNotifications.h"
#import "RNFirebaseMessaging.h"

//...

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  //...
  [FIRApp configure];
  [RNFirebaseNotifications configure];
  //...
}

//...

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo
fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
  [[RNFirebaseNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {
  [[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings];
}

//...

@end

Javascript

Add react-native-firebase

react-native-firebase had a major rewrite for v6 but unfortunately the Notifications module we are interested in is the only one that isn’t updated yet so we are stuck on v5. When it finally finishes I will update this post!

yarn add react-native-firebase@5.5.6

If you are using react-native v0.60 or higher you don’t need to run link, it will be auto-linked.

Notification Class

import firebase from "react-native-firebase"
import { Alert } from "react-native"

export class NotificationService {
  onTokenRefreshListener = null
  messageListener = null
  notificationDisplayedListener = null
  onNotificationListener = null
  onNotificationOpenedListener = null

  async getToken() {
    const fcmToken = await firebase.messaging().getToken()
    console.log(`Retrieved new token: ${fcmToken}`)
  }

  async checkPermission() {
    const enabled = await firebase.messaging().hasPermission()
    if (enabled) {
      console.log("Messaging permissions enabled")
      this.getToken()
    } else {
      this.requestPermission()
    }
  }

  async requestPermission() {
    console.log("Requesting messaging permissions")
    try {
      await firebase.messaging().requestPermission()
      this.getToken()
    } catch (error) {
      console.log("Messaging permission rejected")
    }
  }

  async createListeners() {
    this.onTokenRefreshListener = firebase
      .messaging()
      .onTokenRefresh(async fcmToken => {
        console.log(`Retrieved new token: ${fcmToken}`)
      })

    this.messageListener = firebase.messaging().onMessage(message => {
      console.log("on Message")
      console.log(message)
    })

    this.notificationDisplayedListener = firebase
      .notifications()
      .onNotificationDisplayed(notification => {
        // ANDROID: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
        console.log("onNotificationDisplayed")
        console.log(notification)
      })

    this.onNotificationListener = firebase
      .notifications()
      .onNotification(notification => {
        console.log("onNotification")
        console.log(notification)

        // UNCOMMENT IF YOU WANT ANDROID TO DISPLAY THE NOTIFICATION
        notification.android.setChannelId("default").setSound("default")
        firebase.notifications().displayNotification(notification)

        Alert.alert(
          "Push Notification",
          notification.body,
          [{ text: "OK", onPress: () => console.log("OK Pressed") }],
          { cancelable: false }
        )
      })

    this.onNotificationOpenedListener = firebase
      .notifications()
      .onNotificationOpened(notification => {
        console.log("onNotificationOpened")
        console.log(notification)

        Alert.alert(
          "Push Notification",
          `${notification.action},${notification.notification},${notification.results}`,
          [{ text: "OK", onPress: () => console.log("OK Pressed") }],
          { cancelable: false }
        )
      })
  }

  async scheduleNotification(date) {
    const notification = new firebase.notifications.Notification()
      .setNotificationId("1")
      .setTitle("Test notification")
      .setBody("This is a test notification")
      .android.setPriority(firebase.notifications.Android.Priority.High)
      .android.setChannelId("default")
      .android.setAutoCancel(true)

    firebase
      .notifications()
      .scheduleNotification(notification, {
        fireDate: date.getTime(),
      })
      .catch(err => console.error(err))
  }

  configure() {
    const channel = new firebase.notifications.Android.Channel(
      "default",
      "default channel",
      firebase.notifications.Android.Importance.Max
    )
    firebase.notifications().android.createChannel(channel)
    this.checkPermission()
    this.createListeners()
  }

  wasOpenedByNotification() {
    firebase
      .notifications()
      .getInitialNotification()
      .then(notificationOpen => {
        if (notificationOpen) {
          // App was opened by a notification
          // Get the action triggered by the notification being opened
          const action = notificationOpen.action
          // Get information about the notification that was opened
          const notification = notificationOpen.notification

          console.log("App was opened by a notification")
          console.log(action)
          console.log(notification)

          Alert.alert(
            "Push Notification",
            `${action},${notification}`,
            [{ text: "OK", onPress: () => console.log("OK Pressed") }],
            { cancelable: false }
          )
        } else {
          console.log("App was NOT opened by a notification")
        }
      })
  }
}

const Notification = new NotificationService()
export default Notification

App

import React, { useEffect } from "react"
import Notifications from "./notifications"
import { SafeAreaView, StyleSheet, View, Button } from "react-native"

export const App = () => {
  useEffect(() => {
    Notifications.configure()
  }, [])

  Notifications.wasOpenedByNotification()

  const sendLocalNotification = delay_seconds => {
    const date = new Date()
    date.setSeconds(date.getSeconds() + delay_seconds)
    Notifications.scheduleNotification(date)
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Button
          onPress={() => sendLocalNotification(1)}
          title="Scheduled notification for now"
        />
        <Button
          onPress={() => sendLocalNotification(10)}
          title="Scheduled notification for 10 seconds from now"
        />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "space-around",
    padding: 8,
  },
})

export default App

Testing Push Notifications

Grab your device’s token from the console, head over to the Firebase console, click on Cloud Messaging and send a notification to your device using the device token.

Conclusion

I am excited for the soon to be released v6 of react-native-firebase which should eliminate a lot of the manual native setup steps. You should also keep an eye on react-native-push-notifications-ios because if they wrap in Android support I think it would be a better library choice.

Checkout This Project’s Code On Github

Testing & CI/CD in JavaScript Projects

Chris Finn — Fri, 06 Sep 2019 00:00:00 +0000

“If you don’t like unit testing your product, most likely your customers won’t like to test it either.” - Anonymous

Few developers get excited over the idea of writing tests for their code. Especially with pressure to finish new features as fast as possible, it is an annoyance to write test code that doesn’t directly contribute to the progress of the project. This may seem fine at first when the project is small and you can test the few features manually to make sure everything looks fine but as the project grows, this manual checking is not only horribly inefficient and low quality but basically impossible.

Investing in testing upfront is one of the best investments you can make on your project. It is what allows you to write a feature, not touch it for weeks, come back, see it is passing all its tests, and have a level of confidence that everything is good in the world. This post will cover some important testing concepts and how to apply them to your JavaScript projects.

Testing Basics

Principles

Tests should,

be simple, short, and easy to understand. A good test is basically as good as documenation when it comes to understanding how to use a library or codebase.

- describe what is being tested, under what scenario, and what the expected result is.

follow AAA pattern.

Arrange: Code needed to setup the scenario the test is aiming to test.
Act: Invoke the code you are testing.
Assert: Check if the received result matches the expected results.
- use declarative assertions as opposed to imperative assertions.
- focus on behavioral tests, meaning tests that verify the behavior as opposed to specific implementation. This essentially boils down to only testing public methods and not the private methods they may use.
- favor stubs and spies over mocks. Mocks focus on the internals of a service and therefore are tightly coupled with the implementation. Spies and stubs on the otherhand focus on monitoring the service use rather than how it is implemented.
- improve input testing using a library like faker which generates random names, phone numbers, etc. and/or a Property-based testing library like fast-check which generates a huge number of inputs based on the input properties you define.
- Avoid global seeds and text fixtures, instead opting to add needed data on a per-test basis so they stay independent.
- expect errors instead of trying to try/catch them (e.g. expect(foo).to.throw(MyError)).
- be tagged in order to allow things like fast tests to be run on save and slower tests to be run on bigger events like before a push.
- aim for a code coverage of ~80%.
- use a mutation testing library like Stryker to confirm that the tests that the code coverage report is reporting on are actually effective.
- use test linters like eslint-plugin-jest.

Types

Static

Static tests run as you type your code.

These include,

Linters
Type systems
Vulnerable dependency scanner
Code complexity analysis
License checks
Plagiarism checks

Unit

A unit test is a test that verifies the behavior of a small unit of code independent of the rest of the code. These tests are not about finding bugs but rather about ensuring a small section of code works as expected and continues to even as refactoring (restructuring of code but not functionality) may occur.

These are short, fast, super specific error area, quick to write, and cheap but offer minimal actual overall testing confidence per test and require a lot of them to have good coverage.

Principles

F.I.R.S.T.

Fast : A project can have thousands of unit tests so they need to be fast.
Independent : The test must test a section of code independent from the rest of the project.
Repeatable : Each test should yield the same results every time as long as the code being tested hasn’t changed. This means it cannot depend on specific elements that may change like the date/time, system run on, or any renadom function output.
Self-Validating : Does not require any manual inspection to determine if the test passed or failed.
Thorough : Should cover every use case scenario, including corner/edge cases, exceptions/errors, bad inputs, etc.

// What is being tested
describe("MathJS", () => {
  // Scenario
  describe("Addition (add)", () => {
    // Expected result
    test("should add 3 and 4 to get 7", () => {
      // Arrange
      const spy = jest.spyOn(mathjs, "add")

      // Act
      const result = mathjs.add(3, 4)

      // Assert
      expect(result).toBe(7)
    })
  })
})

Integration

Integration tests verify that several units work properly together. It used to be popular to write a lot of unit tests but the trend seems to be moving to less unit tests and more integration tests since one integration test can test functionality that would take several unit tests to test. Obviously it is sacrificing the ability to have a fine grained knowledge of where a bug is when a test fails but it is important to find a balance between saving time and the amount of specificity you have.

These are usually 4-5x the size of a unit test, still pretty fast, decently small error area, a little more involved to write, not as cheap as unit tests but still reasonable, and offer decent actual overall testing confidence per test and don’t require as many tests to have good coverage.

End to End

End to End tests verify complete user flows by simulating actions as a user would actually do them.

These are large, slow, huge error area, very intensive to write, and expensive to run, but offer very high confidence and don’t require many of them.

Test Driven Development (TDD)

“More than the act of testing, the act of designing tests is one of the best bug preventers known. The thinking that must be done to create a useful test can discover and eliminate bugs before they are coded.” – Boris Beizer

This software development methodology aims to write more reliable and well designed software by writing failing tests first and then writing code that makes the tests pass. By focusing on only writing the code that is necessary to satisy your tests, your code should stay short and clean. TDD centers around 4 main cycles.

The Three Laws

You must write a failing test before you write any production code.
You must not write more of a test than is sufficient to fail, or fail to compile.
You must not write more production code than is sufficient to make the currently failing test pass.

These laws are applied second-by-second in TDD.

Red/Green/Refactor

Create a unit tests that fails
Write production code that makes that test pass.
Clean up the mess you just made.

These steps are followed minute-by-minute in TDD.

Specific/Generic

As the tests get more specific, the code gets more generic.

Every few minutes, you should ensure that the production code you are writing is generic and not specific to your tests. If you find it is becoming specific to your tests, you have to go back and make the code more generic.

Boundaries

Every hour, you should stop and check to see if you have reached or crossed a significant architectural boundary in your application. This gives you a chance to look at the program at a higher level and plan out where you want to draw the boundaries and appropriately focus your next hour of TDD cycles.

CI/CD

Continuous Integration (CI)

Continuous intregation is the software development practice of frequently pushing small changes to your code repository. For every push, automatic formatting and testing should be done. This gives the developer a quick feedback cycle for determining potential conflicts in commits while also allowing to frequently merge new updates to an application.

Continuous Deployment (CD)

Also called continuous delivery, continuous deployment works in conjunction with CI to take the tested and built application that results from the CI process and deploy (or deliver) it to the intended infrastructure. With CD, teams can push new code to production every day or even hourly.

Conclusion

Testing is a complex and important concept in the software world that is too often thrown to the side but with newer practices like CI/CD, having solid tests is more crucial than ever. There is no golden rule for how to write perfect tests but using TDD and trying to get ~80% coverage with a combination of unit, integration, and end to end tests should lead to clean, confident code. It takes some time to setup at first but the confidence that automated testing gives you in the end is priceless. Give the concepts from this post a try and I hope it helps relieve some of the stress that developers can feel when programming.

React-Native Routing

Chris Finn — Tue, 03 Sep 2019 00:00:00 +0000

One of the most important aspects of any application is navigation. Unless your application is truly one single screen, your user is going to have to click to navigate around and this requires a good navigation library. There are a few popular options in the React-Native world but the most popular, and the one recommended in Facebook’s React-Native documentation, is React Navigation. This is the library I use and throughout this post, we will cover how to use it for common navigation scenarios.

What is React Navigation?

React-Navigation is a pure JavaScript (no native code) library for navigation for React-Native apps. Being written completely in JavaScript gives you a lot of power and control over your navigation without ever having to write native code. The library implements the native navigation elements and transitions you are used to on iOS and Android in JavaScript as well as a simple API for handling navigation state and changes.

What are Navigators?

Demo App

Initialize App

expo init magellan
// Choose blank
// Choose name (magellan)
cd magellan
yarn start
// Open on your device using the Expo app or open in a simulator

Add the Navigation Library

yarn add react-navigation

Add the Tab Navigation Library

yarn add react-navigation-tabs

Add the Stack Navigation Library

yarn add react-navigation-stack

Add the Drawer Navigation Library

yarn add react-navigation-drawer

Add the Native Gesture Handling Library

yarn add react-native-gesture-handler@^1.3.0

Add Animation Library

yarn add react-native-reanimated@~1.1.0

Enable Navigation Optimization

Add the following code to App.js to optimize for view memory usage (read more here)

// Before rendering any navigation stack
import { useScreens } from 'react-native-screens';
useScreens();

Relaunch

You may have kill expo and relaunch it for the new packages.

Implementing Navigation

Screens

Screens are the pages you are going to actually display.

HomeScreen

Nothing crazy in this screen, just a simple component with a View and Text.

export default HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>Welcome! Try navigating with the other tabs.</Text>
    </View>
  );
};

ChooseColorScreen

This screen is a good example of triggering navigation based on a button press using the navigation prop which is automatically passed into a component that is in a navigator. As you can see the navigate function can take a second argument that is the values to pass to the screen you are navigating to. In the next screen you will see how to access it. This screen also shows you how to use navigationOptions on a functional component in order to set the title for the screen.

export default ChooseColorScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Button
        title="Red"
        onPress={() => navigation.navigate("Color", { color: "red" })}
      />
      <Button
        title="Blue"
        onPress={() => navigation.navigate("Color", { color: "blue" })}
      />
    </View>
  );
};

ChooseColorScreen.navigationOptions = screenProps => ({
  title: "Choose Color"
});

ColorScreen

This screen is navigated to from the ChooseColorScreen using

navigation.navigate("Color", { color: "red" })

As you can see, the color value that was passed can be accessed using

navigation.getParam("color", "white")

The first argument to getParam is the param key and the second is an optional default value.

export default ColorScreen = ({ navigation }) => {
  const color = navigation.getParam("color", "white");

  return <View style={{ flex: 1, backgroundColor: color }} />;
};

ColorScreen.navigationOptions = screenProps => ({
  title: screenProps.navigation.getParam("color", "White")
});

DrawerScreen

This screen is shown in the drawer navigator. It uses the components navigationOptions to set its drawerLabel. Also it toggles the drawer on button press using navigation.toggleDrawer().

export default DrawerScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Button
        title="Click this text or swipe in from the left to toggle the drawer"
        onPress={() => navigation.toggleDrawer()}
      />
    </View>
  );
};

DrawerScreen.navigationOptions = {
  drawerLabel: "Home"
};

OtherScreen

Nothing too exciting here, basically just a presentational component that also sets its drawerLabel.

export default OtherScreen = () => {
  return (
    <View style={styles.container}>
      <Text>I am another screen!</Text>
    </View>
  );
};

navigationOptions = {
  drawerLabel: "Other"
};

Navigators

DrawerNavigator

This component is a great demonstration of how short and simple the drawer navigator is to use. Simply import the screens and pass them as routes to the navigator create function.

import { createDrawerNavigator } from "react-navigation-drawer";

import DrawerScreen from "../screens/DrawerScreen";
import OtherScreen from "../screens/OtherScreen";

export default DrawerNavigator = createDrawerNavigator({
  Default: DrawerScreen,
  Other: OtherScreen
});

ColorStackNavigator

Another great demonstration of how this library lets you write a short and simple component that does a lot. Simply import the screens and pass them as routes to the navigator create function.

import { createStackNavigator } from "react-navigation-stack";

import ChooseColorScreen from "../screens/ChooseColorScreen";
import ColorScreen from "../screens/ColorScreen";

export default ColorStackNavigator = createStackNavigator({
  ChooseColor: ChooseColorScreen,
  Color: ColorScreen
});

TabNavigator

This navigator is the main navigator for the app. As you can see, one tab points to a screen component and the other two point at our ColorStackNavigator and our DrawerNavigator. Configuring this navigator is basically the same as the previous two but since this is our main navigator we need to wrap it in createAppContainer.

import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";

import HomeScreen from "../screens/HomeScreen";
import ColorStackNavigator from "./ColorStackNavigator";
import DrawerNavigator from "./DrawerNavigator";

const TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Color: ColorStackNavigator,
    Drawer: DrawerNavigator
});

export default createAppContainer(TabNavigator);

App.js

The App.js has the call to useScreens() for the optimization that I mentioned before and then simply imports and returns the TabNavigator.

import { useScreens } from "react-native-screens";
useScreens();
import TabNavigator from "./src/navigators/TabNavigator";

export default function App() {
  return <TabNavigator />;
}

Conclusion

Routing is really important for basically every app and thankfully React-Navigation makes quick, beautiful routing management and animated transitions a cinch. This post only covered the basics of how to use these main navigators but it should be enough to get you started. When you need to start styling your navigation bars, adding icons, or whatnot, head over to the beautiful React-Navigation documentation.

Checkout This Project’s Code On Github

React-Native State Management

Chris Finn — Sat, 31 Aug 2019 00:00:00 +0000

As your application grows, as does its complexity. Sharing state between components quickly becomes convoluted if you don’t use an appropriate state management solution. There are an endless amount of libraries, patterns, and solutions that have popped up over the years to address state management in React and this post will cover the most popular four; Component State, Context API, and Redux.

Component State

For simple apps Component state is a great solution.

For class based components this means using setState.

class Counter extends Component {
  state = { count: 0 }

  render() {
    return (
      <View>
        <Text>{this.state.count}</Text>
        <Button
          onPress={() => this.setState({ count: this.state.count + 1 })}
          title="+"
        />
        <Button
          onPress={() => this.setState({ count: this.state.count - 1 })}
          title="-"
        />
      </View>
    )
  }
}

For functional components, use useState.

const Counter = props => {
  const [count, setCount] = useState(0)

  return (
    <View>
      <Text>{count}</Text>
      <Button onPress={() => setCount(count + 1)} title="+" />
      <Button onPress={() => setCount(count - 1)} title="-" />
    </View>
  )
}

For more complex local state management in a functional component, you can use useReducer() which makes it easier to handle a lot of changing state in a predicatable way.

Pros

Simple for encapsulated state
Native React solution

Cons

Sharing state between components can be complicated
Not well suited for a complex app

Context API

The Context API helps remedy the issue of “prop drilling”, passing props down through multiple levels of components to get it to where it is needed. Using the Context API, you can share values between components without having to pass props. It is recommended by the React team to use it to “share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language”.

Using the Context API consists of three parts,

Call React.createContext(OptionalInitialValue) to create a context. It returns an object with a Provider and a Consumer.
Use the <Provider value={anything}> component higher up in the tree to wrap any component trees that you want to have access to value.
Use the <Consumer> component anywhere below the Provider in the tree to give a component access to the value prop in the Provider. There are two ways to use the Consumer, “render props” style or with a hook.

// Initialize a Context
const MyContext = React.createContext({name: ''});

const MyComponent = () => (
    // Wrap a part of the component tree in the Provider
    <MyContext.Provider value={{name: 'Alice'}}>
        <MySubComponent />
        <MyOtherSubComponent />
    </MyContext.Provider>
);

const MySubComponent = () => (
    // Wrap a component in the Consumer to access the value prop "render props" style
    <MyContext.Consumer>
        { value => (
            <Text>{value.name}</Text>
        )}
    </MyContext.Consumer>
);

const MyOtherSubComponent = () => {
    // Use the useContext hook to get the value
    const value = useContext(MyContext);

    return <Text>{value.name}</Text>;
};

A component calling useContext will always re-render when the context value changes. If re-rendering the component is expensive, you can optimize it by using memoization.

Pros

Great for when you have a few pieces of global state you want to make available to a lot of components (e.g. themes, internationalization, user info).
No prop drilling
Native React solution
Easy implementation, simply wrapping components in a Provider and Consumer component.

Cons

Not the best choice when you have a lot of global state and would end up with a lot of Contexts to wrap your app in.
The “render props” style of Consumer can introduce too much nesting and descrease readability.
May need to consider unnecessary re-renders when using useContext and the context value changes.

Redux

Redux is probably the most popular of all the third party state management solutions. Although it gets a bad wrap as being complicated for beginners and overused (this is true in some cases), Redux is actually rather simple and definitely has its use in a bigger app. Inspired by Flux and Elm, Redux uses the concept of uni-directional data flow.

The app has a central state
A state change triggers UI updates
Special functions handle state change
User interaction triggers these special state changing functions
Only one change happens at a time

Important Pieces

Root store

The single source of truth for the application.

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

Actions

Plain JavaScript objects that describe an action in your application. Usually has a type and a payload.

const action = {
    type: 'LOGIN',
    payload: { email: scott@dunder.com, password: 'thatswhatshesaid' },
}

It is good practice to make a file of all your action types since they will have to be used in multiple places in your application & you don’t want to risk mispelling them. Another good practice is to create action creators which you then import into your component and use.

// ./actions.js

// Action type
export const LOGIN = 'LOGIN';

// Action creator
export const login = (email, password) => {
    return { type: LOGIN, payload: { email, password} };
}

import { login } from './actions';

<Button onPress(() => dispatch(login(email,password)))>
    Login
</Button>

Reducers

Pure functions which take in the current state and an action, and return the new state. In order to keep the size of reducers manageable, you can split them into separate files.

import { LOGIN } from '../constants/actionTypes';

const initialState = {
  user: ''
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN:
        return { ...state, user: action.payload };
    default:
        return state;
  }
};

export default rootReducer;

The line { ...state, user: action.payload } is important to understand. It is creating a brand new state object with the whole old state, overwritten with the new user value. This adheres to the Redux principle of not modifying the state.

dispatch(action)

Dispatch is a Redux store function that is used for dispatching an action to the store.

// Dispatch an action object
dispatch({ type: INCREMENT, payload: 1 });

// Dispatch an action creator
dispatch(increment)

mapStateToProps(state, ownProps?)

This function is defined in a component that wants to access Redux state and is used to select the part of the state from the store that the component needs.

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

Optionally takes a second argument called ownProps which holds the props for the component.

mapDispatchToProps

This is an optional function that you can define for a component that wants to use the Redux store and it is used to create functions that dispatch when called and pass those functions as props to the component.

By default, a connected component has the dispatch function as a prop.

There are a few ways to define this mapping but the simplest is to use define it as an object.

// Import the action creators
import { increment, decrement, reset } from './actions';

const mapDispatchToProps = {
    increment,
    decrement,
    reset
};

connect(mapStateToProps, mapDispatchToProps?, mergeProps?, options?)(Component)

This function wraps your Component and connects it to the Redux store.

// Export and use this for your Component instead of normal Component export
export default connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

mergeProps and options are not commonly used.

useSelector()

The useSelector hook allows you to extract state from the Redux store. This function essentially replaces mapStateToProps for functional components.

export const Counter= () => {
  const count = useSelector(state => state.count);

  return <Text>{count}</Text>;
}

useDispatch()

The useDispatch hook returns a reference to the dispatch function from the Redux store. This hook replaces the need to use connect to inject dispatch.

export const Counter= () => {
  const dispatch = useDispatch();

  return (
    <Button onPress=(() => dispatch(increment))>
        Increment
    </Button>
  );
}

Main Principles

Single Source of Truth

The state of your whole application is stored in one object within a single store. This makes your state easier to work with, the application easier to reason about, and debugging less painful.

Read Only State

State cannot be modified directly, only through emitting an action describing the change. This means that Views do not directly modify state. Instead, user interactions in Views can dispatch an action that tells a function to update the state. This function replaces the old state with the updated state and the UI updates accordingly.

Reducers are Pure Functions

Reducers are simple and special functions, taking current state and an action, and returning a new, updated state.

The state is replaced not mutated

Reducers are also pure functions, meaning they always return the same output for the same set of inputs.

// Impure
const impure = function(n) {
  return Math.random() * n;
}

impure(3)   // 1.2
impure(3)   // 1.8
impure(3)   // 0.9

// Pure
const pure = function(a) {
  return 1 + a;
}

pure(3) // 4
pure(3) // 4
pure(3) // 4

As you can see, the first function is impure, if you were to input the same value for n multiple times, you would get varying results do to the Math.random(). The second function on the other hand, is pure since it will always be the input + 1.

Using Redux

yarn add redux react-redux

Under the hood, Redux utilizes the Context API covered earlier, so it requires wrapping your application in a Provider and passing in the root store.

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer)

const App = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

Then, there are two ways to access the state from the store.

import { connect } from 'react-redux';
import { increment } from '../actions';

class Counter extends Component {
  increment = () => {
     // Dispatch increment action
    this.props.increment();
  }

  render() {
    return (
      <View>
          // Access count variable that is available from props
          <Text>{this.props.count}</Text>
          <Button onPress={this.increment}>+</Button>
      </View>
    )
  }
}

// This function is used to pullout the state needed by this
// component and mapping it to the component's props
// (e.g. count -> this.props.count)
function mapStateToProps(state) {
  return {
    count: state.count
  };
}

// An object of action creators to add to the props
const mapDispatchToProps = {
    increment,
};

// Wrapping your component in connect puts the results of
// mapStateToProps, mapDispatchToProps and the dispatch 
// function into the components props
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

The newer way utilizes hooks so it can only be done in functional components.

import { useSelector, useDispatch } from 'react-redux';
import { increment } from '../actions';

const App = props => {
    // Get counter from the state store
    const counter = useSelector(state => state.counter);
    // Get the dispatch function
    const dispatch = useDispatch();

  return (
    <View>
        { counter }
        <Button onPress={ () => dispatch(increment) }>
            increase
        </Button>
    </View>
  );
}

Pros

Methodical and well structured state management
Easily testable/
Enables hot reloading
Powerful debugging; Time travel debugging

Cons

Slight learning curve
Lots of boilerplate code
Requires middleware to better handle advanced cases like async

Conclusion

It may seem like a daunting task to choose how to manage your state in your application but I suggest you start with local state and switch some of it to Context API as you find it is required in multiple places. If you find yourself with too many Contexts then you should consider moving just your global state over to Redux.

React-Native Styling

Chris Finn — Wed, 28 Aug 2019 00:00:00 +0000

Nobody likes ugly apps, that’s where styling comes in! There are two ways to style your React-Native app; StyleSheet and CSS-In-JS. There are pros and cons to each but in the end it is mostly a choice of preference. This post will cover them both, recreating the following design for each one.

Styling Basics

Before going into the two different methods it is important to cover the basics of styling in general. React-Native basically uses Flexbox for handling layout and a subset of CSS for the rest of the styling needs.

Flexbox

Flexbox is an algorithm used to provide a consistent layout on different screen sizes. The React-Native docs have a really good write-up of Flexbox, so instead of just copying it here, you should read through it here.

Views

Common CSS styling on a React-Native view,

height: number
width: number
backgroundColor: color
border: size color style
padding: number
margin: number

Text

Common CSS styling on a React-Native view,

color: color
fontFamily: string
fontSize: number
fontStyle: (‘normal’, ‘italic’)
fontWeight: (‘normal’, ‘bold’, ‘100’, ‘200’, …, ‘900’)
textAlign: (‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’)
textAlignVertical: enum(‘auto’, ‘top’, ‘bottom’, ‘center’)
textDecorationLine: (‘none’, ‘underline’, ‘line-through’, ‘underline line-through’)
textTransform: (‘none’, ‘uppercase’, ‘lowercase’, ‘capitalize’)

Styling Methods

StyleSheet

With StyleSheet, a javascript object is created to define the styles for your elements and are assigned to the elements via their style prop.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

;<View style={styles.container}>...</View>

Demo Code

import React from "react"
import { StyleSheet, Text, View } from "react-native"

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.title}>Stylin' App</Text>
        <Text style={styles.subtitle}>Look good. Feel good.</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#e2e2e2",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    height: 200,
    width: 300,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontFamily: "Helvetica",
    fontWeight: "bold",
    fontSize: 24,
    paddingBottom: 8,
  },
  subtitle: {
    fontFamily: "Helvetica",
    fontStyle: "italic",
    fontWeight: "100",
    fontSize: 18,
  },
})

CSS-In-JS

CSS-In-JS is a styling option that is fairly popular in React, allowing the developer to write normal CSS in javascript. In React-Native this isn’t as groundbreaking since StyleSheet is already basically CSS as a JavaScript object but using a CSS-In-JS library still has it’s advantages. There are numerous CSS-In-JS libraries but I prefer styled-components.

With styled-components, you write normal css in a template literal string to create a styled element.

const Container = styled.View`
  flex: 1;
  background: #e2e2e2;
  align-items: center;
  justify-content: center;
`

Advantages of styled-components over StyledSheet

Full CSS support

StyledSheet only supports a subset of CSS and also requires the property names to be camel cased, where as, styled-components supports as much CSS as possible on the React-Native platform.

A good example of this difference is with applying a box shadow,

// StyledSheet

box: {
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 2
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5
},

// styled-components

const Box = styled.View`
  box-shadow: 0px 2px 3.84px #000;
  shadow-opacity: 0.25;
  elevation: 5;
`

Dynamic Styling

styled-components makes dynamic styling and theming simple by enabling prop usage in the styling code.

const Item = styled.View`
  background-color:${props=>props.primary ? "blue" : "green"};
`

// Green background
<Item />

// Blue background
<Item primary />

Increased Readability

I find styled-components to lead to better organized & readable code since your JSX tree contains descriptive names for the custom elements you created instead of a bunch of View, Text, etc tags.

// StyleSheet

<View style={styles.container}>
  <View style={styles.box}>
    <Text style={styles.title}>Stylin' App</Text>
    <Text style={styles.subtitle}>Look good. Feel good.</Text>
  </View>
</View>

// styled-components

<Container>
  <Box>
    <Title>Stylin' App</Title>
    <Subtitle>Look good. Feel good.</Subtitle>
  </Box>
</Container>

Cross Platform

Although the styles written with styled-components do not directly translate between React and React-Native, the concepts and general flow do which is a big win if you are developing on multiple platforms.

// React
import styled from "styled-components"
const Container = styled.div`
  background: red;
  padding: 10px;
`

// React-Native
import styled from "styled-components"
const Container = styled.View`
  background: red;
  padding: 10px;
`

Demo Code

yarn add styled-components

import React from "react"
import styled from "styled-components"

export default function App() {
  return (
    <Container>
      <Box>
        <Title>Stylin' App</Title>
        <Subtitle>Look good. Feel good.</Subtitle>
      </Box>
    </Container>
  )
}

const Container = styled.View`
  flex: 1;
  background: #e2e2e2;
  align-items: center;
  justify-content: center;
`

const Box = styled.View`
  height: 200;
  width: 300;
  background: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 3.84px rgba(0, 0, 0, 0.25);
  elevation: 5;
`

const Title = styled.Text`
  font-family: Helvetica;
  font-weight: bold;
  font-size: 24;
  padding-bottom: 8;
`

const Subtitle = styled.Text`
  font-family: Helvetica;
  font-style: italic;
  font-weight: 100;
  font-size: 18;
`

Conclusion

Checkout This Project’s Code On Github

React-Native Basics

Chris Finn — Thu, 22 Aug 2019 00:00:00 +0000

What is React?

React is a JavaScript library for building user interfaces. It is an open source library that is made by Facebook and has a large community behind it. Three of the main pros for using React are

Declarative
Component-Based
Learn once, write anywhere

Declarative

Declarative programming is a paradigm that focuses on describing what you want instead of how. On the other end of the spectrum lies Imperative programming which is the how as opposed to the what. This difference is best observed in the code example below.

// Imperative
$("#btn").click(function() {
  $(this).toggleClass("highlight")
  $(this).text() === 'Add Highlight'
    ? $(this).text('Remove Highlight')
    : $(this).text('Add Highlight')
})

// Declarative
<Btn
  onToggleHighlight={this.handleToggleHighlight}
  highlight={this.state.highlight}>
    {this.state.buttonText}
</Btn>

Component-Based

With React, you can focus on building encapsulated components that manage their own state and then compose and re-use them to make complex UIs.

// Name Component
function Name(props) {
  return <h1>Hello, {props.name}</h1>
}

// App Component w/ 3 Name Components
function App() {
  return (
    <div>
      <Name name="Alice" />
      <Name name="Bob" />
      <Name name="Chris" />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

Learn Once, Write Everywhere

React runs on multiple platforms including being able to be rendered on the server, browser, mobile, and desktop.

What is React-Native?

React-Native is a library that brings React to mobile. It allows you to create native apps for Android and iOS using React. The React primitives render to native platform UI unlike the hybrid solutions that basically wrap your code in a webview.

This has become a popular choice for mobile development due to enabling high level of code reuse between the iOS and Android app. Also, the development experience is really enjoyable thanks to instantly see changes, meaning you no longer have to wait for your native builds to compile!

JSX

JSX = JavaScript XML

This is the HTML-esque language you will be using to write your React UI.

const element = <Text>My name is</Text>

The JSX above ends up being rendered as a native text label.

Embed Expressions

A powerful feature of JSX is the ability to embed any JavaScript expressions into your JSX. To embed an expression you simply have to wrap it in curly braces.

const name = "Chris"

function getAge() {
  return 28
}

const el1 = <Text>My name is {name}</Text>
const el2 = <Text>I'm {getAge()} years old</Text>
const el3 = <Text>2+2={2 + 2}</Text>

Compilation

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This allows you to use JSX in if and for loops, assign it to variables, pass it as arguments, and return it from functions.

function greet(name) {
  if (user) {
    return <Text>Hello, {name}!</Text>
  }

  return <Text>Hello, anonymous!</Text>
}

Empty Tag

If a JSX tag doesn’t have any children (anything between the tag open and close) then it can be self closing using />.

const element = <Image source={myPicSrc} />

Elements

Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen.

const element = <Text>Hello!</Text>

Elements are rendered into their corresponding code for the platform (e.g. becomes a UILabel on iOS).

Elements are immutable, meaning they do not change. If one of an element’s attributes or children changes then a new element is created and rendered in its place. This update only occurs on the elements that changed and not the whole tree.

Components, Props, & Children

One of the main advantages of React is its focus on splitting the UI into independent, reusable pieces called components.

Components are JavaScript functions or classes that accept inputs (props) and return React elements describing the UI.

Always start component names with a capital letter. This is for React when rendering to the DOM to be able to distinguish between DOM tabs and components.

Props

Props are the inputs passed to a component and are read-only.

const element = <Welcome name="Chris" />

The value ‘Chris’ is passed to the component Welcome in the props object as props.name.

Props are the key to a component’s reusability.

const welcome1 = <Welcome name="Alice" />
const welcome2 = <Welcome name="Bob" />
const welcome3 = <Welcome name="Chris" />

There is a special prop named children which is the elements passed in-between the component tags.

const Card = (props) => {
    return (
        <View>
            <Text>{props.title}</Text>
            {props.children}
        </View>;
}

const MyCard = (props) => {
    return (
        <Card title='Cats'>
            <Image source='logo.png') />    // <--
            <Text>Content</Text> // <-^- Children
        </Card>
    );
}

Components

Class-Based

Class-Based components used to be the only option for components that needed to hold state but are starting to fall out of popularity due to the introduction of React Hooks which give functional components all the powers of class-based components while still keeping them simpler.

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

One of the main reasons people find functional components easier to use than class-based is the lack of having to use ‘this’.

Functional

A functional component is literally a component written as a JavaScript function. Since it is a JavaScript function it can be written in the classic way or as an arrow function.

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

// Arrow
const Welcome = (props) => {
    return <Text>Hello, {props.name}</Text>;
};

// Arrow w/ Args Destructuring and Implicit return (Better)
const Welcome = ({ name }) => (
    <Text>Hello, {name}</Text>;
);

State

State is the key to a component’s encapsulation. It allows a component to hold and manage its own data.

Props are set by the parent and do not change throughout the lifetime of a component whereas state is handled by the component and can change.

The way state is used in class-based components and functional components are one of the main differences between the two.

Class-Based Component

class Counter extends Component {
  state = { count: 0 }

  render() {
    return (
      <View>
        <Text>{this.state.count}</Text>
        <Button
          onPress={() => this.setState({ count: this.state.count + 1 })}
          title="+"
        />
        <Button
          onPress={() => this.setState({ count: this.state.count - 1 })}
          title="-"
        />
      </View>
    )
  }
}

Functional Component

const Counter = props => {
  const [count, setCount] = useState(0)

  return (
    <View>
      <Text>{count}</Text>
      <Button onPress={() => setCount(count + 1)} title="+" />
      <Button onPress={() => setCount(count - 1)} title="-" />
    </View>
  )
}

useState Hook

The useState hook enables functional components to hold and manage state.

const [value, setValue] = useState(initialValue)

Hooks & Lifecycle Methods

For advanced logic, class based components have lifecycle methods and functional components have hooks.

Lifecycle Methods

We will cover the methods in bold because they are the most commonly used.

constructor

constructor(props)

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

The function is invoked before the component is mounted.

Since your class-based component is a subclass of React.Component, in the constructor, it should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor.

Used for:

Initializing local state by assigning an object to this.state.
Binding event handler methods to an instance. ( Forgetting to bind a method to this is a common problem when using class components )

You should not call setState() in the constructor(). Instead, if your component needs to use local state, assign the initial state to this.state directly in the constructor.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

render

render()

This is the only required method in a class component

This function is invoked when there is a change that needs to be rendered.

The render function is used to return the content you want rendered; React elements, Arrays and fragments, portals, strings, numbers, booleans, or null. This function should be pure , meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not cause any side-effects.

render() {
    return (
        <View>
            <Text>{this.state.name}</Text>
            <Text>{this.props.status}</Text>
        </View>
    );
}

componentDidMount

componentDidMount()

This function is invoked immediately after a component is mounted.

Used for:

loading data from a remote endpoint
setting up subscriptions (should be unsubscribed in componentWillUnmount()).

componentDidMount() {
    fetch('https://api.mydomain.com')
        .then(response => response.json())
        .then(data => this.setState({ data }));
}

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)

This function is invoked immediately after an update occurs (excluding the initial render).

Used for:

specific UI operations you want to happen after an update
network requests that should be triggered from state or prop changes

componentDidUpdate(prevProps) {
    if (this.props.searchTerm !== prevProps.searchTerm) {
        this.fetchData(this.props.searchTerm);
    }
}

If you use setState(), it must be wrapped in a condition or it will cause an infinite loop.

componentWillUnmount

componentWillUnmount()

This function is invoked immediately before a component is unmounted and destroyed.

Used for:

do any necessary cleanup (e.g. cancel requests, unsubscribe, etc.)

componentWillUnmount() {
    client.unsubscribe();
}

Hooks

Hooks are a new way to add functionality to functional components. Its two main selling points are

Extract stateful logic from a component so it can be independently tested and reused, all without changing your component hierarchy.
Do everything with functional components

There are only two rules for using hooks

Don’t call Hooks from inside loops, conditions, or nested functions
Only call Hooks from React functions

useState

const [value, setValue] = useState(initialValue);

This hook is used to add state to a functional component.

If you want multiple state variables you simply call useState again with different variable names. Another option is to use another hook like useReducer which is more apt for handling more complex state cases.

value holds the current state of value and setValue is a function to update the state of value.

const Counter = props => {
  const [count, setCount] = useState(0)

  return (
    <View>
      <Text>{count}</Text>
      <Button onPress={() => setCount(count + 1)} title="+" />
      <Button onPress={() => setCount(count - 1)} title="-" />
    </View>
  )
}

useEffect

useEffect(() => {
  // execute side effects

  return function cleanup() {
    // execute side effect cleanup if necessary
  }
}, [onlyRunEffectIfThisValueChanges])

This hook is used to perform side effects in functional components.

Side effects are actions like data fetching, setting up a subscription, and interacting with external resources. These are the things that would typically be in componentDidMount, componentDidUpdate, and componentWillUnmount. Also, just like with the useState hook, if you have multiple side effects you handle each in their own useEffect.

This hook is is triggered on the first render and after every subsequent render (if there is a clean up function, it is triggered in order to clesan up the previous effect before running the next one).

Things to note

Returning a cleanup function is optional. If you don’t have anything to cleanup just drop the return.
You can optionally pass in an array of variables as the second argument to specify that the effect should only run when one of them changes. Use this to make sure the effect (and clean up) is only triggered again when a relevant change occurs.
Pass an empty array ([]) as the second argument if you want your effect (and clean up) to run only once.

useEffect(() => {
  fetch("https://api.mydomain.com/search={searchTerm}")
    .then(response => response.json())
    .then(data => setResults({ data }))
}, [searchTerm])

Custom Hooks

If you find yourself writing logic that you would like to use across multiple components, consider writing a custom hook. A custom hook is just a JavaScript function whose name starts with “use” and that may call other Hooks. Then to use it, you simply import it into your component file and use it accordingly.

Conditional Render

Adding some simple JavaScript logic into your JSX can add some powerful conditional rendering to your component.

const Greeting = ({ user }) => {
  if (user) {
    return <Text>Greetings {user}</Text>
  } else {
    return <Text>Greetings anonymous</Text>
  }
}

// Using the ternary operator
// (condition ? true : false)
const Greeting = ({ user }) => {
  return <Text>Greetings {user ? user : "anonymous"}</Text>
}

// If you want to return nothing (null) when a condition
// is false then you can just use bitwise and (&&)
const Greeting = ({ user }) => {
    return {user && <Text>Greetings {user}</Text>};
}

Getting Started

Okay so now that we have covered the basics, we can move on to actually running some of this code on our phone! Thankfully for us there is a tool called Expo that makes the setup easy & lets us easily develop the app in a simulator or right on our device without having to setup XCode or Android Studio.

Install Node

Download Node

Install Expo CLI

npm install -g expo-cli

Initialize Project

expo init MyProject
cd MyProject

Start Development Server

npm start or yarn start

This starts the development server which you should see the status of in a browser page that opens. From this page you can launch the application in a simulator or download the Expo client on your device & scan the QR code to download & launch it there.

JavaScript Basics

Chris Finn — Mon, 19 Aug 2019 00:00:00 +0000

What is Javascript?

JavaScript is a high level, dynamically typed language that started off as a way to add functionality to an HTML page and now finds itself in just about everything from databases and servers on the backend to browsers, mobile devices, and even TV’s on the frontend.

Important Concepts

Functions

In Javascript there are two ways to define a function,

function foo(param) {
  doSomethingAmazing(param);
} 

foo("bar");

and (more succinctly) as an Arrow Function

const foo = (param) => doSomethingAmazing(param);

// If only one param, you can drop the parenthesis
const foo = param => doSomethingAmazing(param);

foo("bar");

Arrow functions inherit the this object from the context at the time of calling.

Functions can also have Default parameters which are overriden if arguments are passed in.

function foo(param = 0) {
  ...
}

const foo = (param = 0) => ...

Async

Callbacks

The original way to make asynchronous calls in JavaScript (e.g. retrieving items from a database) is with callbacks. A callback is a function that you pass as a parameter (usually the last) to another function which calls the callback function upon completion.

funcA(dataA => {
  funcB(dataB => {
    funcC(dataC => {
      ...
    })
  })
});

This nesting can get pretty insane, if you don’t trust me just google “Callback Hell”. To remedy this Promises were introduced to the language.

Promises

Promises were added to JavaScript to eliminate the callback hell.

A promise has three possible states, pending, fulfilled, or rejected. When a promise is fulfilled it resolves (using resolve(val)) to a value and when it is rejected (using reject(val)) it returns a reason it did not resolve. When resolved, the promise triggers the then clause and when rejected, it triggers the catch clause.

new Promise((resolve, reject) => {
    // resolve('Resolved');
    // reject('Rejected');
  })
  .then(value => {
    console.log(value);
  })
  .catch(err => {
    console.log(err);
  });

It might sound a bit confusing but it should become clear after seeing a few examples.

const wait = time => new Promise((resolve) => setTimeout(resolve, time));

wait(1000).then(() => console.log('Resolved!'));

Here is an example of using the Fetch API which returns a promise and asynchrounously handles an HTTP request. As you can see, you can chain promises together to form a chain. Often times, a catch is added at the end to capture any errors that occur in the chain.

fetch(url)
  .then(response => {
    return response.json();
  })
  .then(myJson => {
    console.log(JSON.stringify(myJson));
  })
  .catch(err => {
    throw new Error(err);
  }

Async/Await

A newest and best approach is to use async/await.

Async functions enable you to write promise based code as if it were synchronous. An async function always returns a promise (A value returned that isn’t a promise is automatically wrapped in a resolved promise with the original return value).

async function foo() {
  return "Async!";
}

foo().then(value => console.log(value));

The await operator is used to wait for a Promise. It is important to note that this can only be used inside an Async function.

async function foo() {
    let promise = new Promise((res, rej) => {
        setTimeout(() => res("Resolved"), 2000)
    });

    // wait here for promise to resolve...
    let result = await promise; 

    console.log(result); 
};

foo();

Variables

Javascript variables come in three flavors

var: function scoped
let: block scoped
const: block scoped and immutable (cannot be changed once set)

function foo() {
    var a = "A";
    let b = "B";

    if(true) {
        console.log(a); // A
        console.log(b); // B

        var c = "C";
        // Scoped to the if block
        let d = "D";
    }

    console.log(c) // C
    console.log(d) // d is not defined here!

    const e = "E";
    e = "F" // Error! Cannot re-assign const
}

Classes

Javascript classes are similar to their class counterpart in traditional object orientated languages.

class Vehicle {
    // Class constructor (initialized with new Vehicle(...))
    constructor(model, make, year) {
        this.model = model;
        this.make = make;
        this.year = year;
    }

    // Getter
    get makeAndModel() {
        return `${make} ${model}`;
    }

    // Setter
    set year(year) {
        this.year = year;
    }

    // Class function
    getDescription() {
        return `A ${year} ${make} ${model}`;
    }
}

class CoolVehicle extends Vehicle {
    getDesciption() {
        return `A cool ${year} ${make} ${model}`;
    }
}

In a class constructor you may see super(...) which is used to reference the parent class.

Import/Export

Export a module or code using export ...

export const foo = "Foo";
export function bar() { ... };
export default function defaultFunc() { ... };
const myConst = "hey";
export myConst as Hey;

Import a module or code using import ... from ...

// Import all exports from module
import * from 'module'; 
// Import all exports from module addressable as myModule.foo
import * as myModule from 'module';
// Import default export
import foo from 'module';
// Import named exports
import { foo, bar } from 'module';

Temporal Literals

const firstName = "Michael";
const lastName = "Scott";
// Using temporal literals to create a string from the variables
const fullName = `${firstName} ${lastName}`; // Michael Scott

Spread Operator

You can expand an array, object, or string using the spread operator ....

const arr = ['a', 'b', 'c'];
const arr2 = [...arr, 'd'] // ['a', 'b', 'c', 'd']

const obj = { firstName: 'Michael', lastName: 'Scott' };
// firstName key overwrites spreaded one because it comes after it
const obj2 = { ...obj, firstName: 'Mikey' }; // Mikey Scott

Destructuring Assignments

Destructure an array or object using a destructuring assignment.

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

{a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Null vs Undefined

null is an empty or non-existent value and must be assigned.

let foo = null;
console.log(foo); // null

undefined usually means a variable is declared but has not been defined.

let foo;
console.log(foo); // undefined