DEV Community: Wern Ancheta

Creating a workout tracking app with React Native and Fauna

Wern Ancheta — Thu, 06 Jan 2022 14:08:58 +0000

There are lots of options when it comes to databases in React Native, either cloud or offline. But I don't see a lot of tutorials showing how to use Fauna within a React Native. That's why in this tutorial, I'll be showing you how it can be done.

For those who are new to Fauna, it's a cloud database that supports relations, documents and graphs. It also supports real-time streaming and GraphQL. If you're in need of a serverless solution for your database needs then consider using Fauna.

As a practical use case, I'll be walking you through how to create a workout tracking app with React Native and Fauna.

App overview

The app that we will be creating allows for recording the exercises performed by the user on a given day.

First, we have the exercises screen. This is where the user can add new exercises that they want to keep track of. Each exercise is classified by category and muscle being worked by the exercise. In this case, there's only one category: weight and reps. This allows the user to track the weight they're lifting and the number of repetitions they have lifted it:

Here's what shows up when the user clicks on the ADD button:

Next, we have the current workout screen. This is where the user can add a new workout. To get to this screen, they first have to go to the exercises screen and select an existing exercise. From there, they can enter the weight and reps they performed. This is considered "one set" of the workout. A workout can have as many sets as the user wants:

Lastly, we have the workout history screen where the user can keep track of the workouts they performed for a specific exercise. This is grouped into days, sorted from latest to oldest:

You can view the source code of this app on its GitHub repo.

Prerequisites

To follow this tutorial, you need to have the following installed on your machine:

React Native CLI 2.0.1
Node 14.18.0
npm 6.14.15
Xcode 13.0

Experience in JavaScript, React and React Native is also required. This isn't a "building from scratch" tutorial where we build the app from scratch, showing all of the code. We will only focus on the crucial parts such as navigation and working with Fauna. We won't be going through the code for the different components or their styling, so I expect you’ll download the source code from GitHub for this tutorial.

Lastly, a Fauna account is required. Go ahead and sign up for an account if you don't have one already.

Setting up Fauna

Once you're inside the Fauna dashboard, the first thing to do is create a new database:

You can also set it to whichever you like. Be sure to use the correct connection domain once you connect the app.

Create Collections

The next step is adding the collections. If you're coming from a relational database background, these are pretty much the same as tables in a database. It's basically a way of storing related data together. We only need two collections for this app:

exercises - for storing exercises
workouts - for storing workout history

Create one for the exercises. Leave the defaults as they are then click SAVE:

And another for the workouts:

Generating an access key

We won't be able to talk to the database from the app without creating an access key. Click on the Security menu and click NEW KEY:

Select the database, and set the role to Server then click SAVE:

Once created, copy the secret key somewhere safe because it won't be displayed again. We'll be adding this key to the app later:

Creating a custom role

The final step in setting up Fauna is creating a custom role. Still on the Security page, click on the Roles tab and click on NEW CUSTOM ROLE button:

Set the name as MyCustomRole and from the collections dropdown, select both the exercises and workouts collection then check all the privileges. Note that this is just for testing purposes so we won't have any issues when it comes to permissions. In a production app, you have to check only the privileges your app is using:

Once that's done, don't forget to click on SAVE.

That's it for now. Later on, you'll need to update this role again to give it permission for the indexes that we'll be creating.

Bootstrapping the app

Start by generating a new React Native project:

npx react-native init RNFaunaWorkout

Once that's done, you should have a new RNFaunaWorkout folder in your current working directory. Navigate inside that folder. That will be the root directory for all the commands and file paths that I'll be referring to in this tutorial.

Installing the dependencies

Our project depends on the following packages:

FaunaDB - the JavaScript driver for Fauna.
React Navigation - for implementing navigation in the app.
React Native Paper - for implementing cross-platform Material Design in React Native.

Here are the commands for installing the dependencies. First is Fauna:

npm install faunadb

Next, install React Navigation and its dependencies:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-pager-view

Next, install React Native Paper:

npm install react-native-paper
npm install react-native-vector-icons

Once that's done, link the native dependencies for React Native Vector Icons:

react-native link react-native-vector-icons

If you're on Mac, also execute the following to install the iOS dependencies:

npx pod-install

Be sure to follow any additional installation instructions mentioned in the documentation for each package we installed.

At this point, you should be able to run the app:

npx react-native run-android

For iOS, you need to open the .xcworkspace file in the ios directory. This will launch the iOS project in Xcode. Simply run the app from there.

Building the app

As mentioned earlier, we're not actually building the app from scratch. We'll only go through the most relevant parts in this tutorial. I'll leave it to you to check out the code that we won't be going through in the GitHub repo.

First, we have the index.js file. It's where we set up the React Native Paper theme:

// index.js
import * as React from "react";
import { AppRegistry } from "react-native";
import { DefaultTheme } from "@react-navigation/native";
import { Provider as PaperProvider } from "react-native-paper";
import App from "./App";
import { name as appName } from "./app.json";

const theme = {
  ...DefaultTheme,
  dark: true,
  roundness: 10,
  colors: {
    ...DefaultTheme.colors,
    text: "#333",
    background: "#ccc",
    gray: "#858585",
    white: "#fff",
    default: "#f2f2f2",
  },
  fonts: {
    ...DefaultTheme.fonts,
    small: 15,
    regular: 16,
    big: 20,
    icon: 30,
  },
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

Then in the App.js we're wrapping the app's Root component with AppContextProvider. As you'll see later, this will provide global state that will be used throughout the app:

// App.js
import React from "react";
import type { Node } from "react";
import {
  SafeAreaView,
  StatusBar,
  useColorScheme,
  StyleSheet,
} from "react-native";
import Root from "./Root";

import { AppContextProvider } from "./src/context/AppContext";

const App: () => Node = () => {

  const isDarkMode = useColorScheme() === "dark";

  return (
    <SafeAreaView style={styles.root}>
      <StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
      <AppContextProvider>
        <Root />
      </AppContextProvider>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: "center",
  },
});

export default App;

Root Component

The Root component is where we set up the screens that will be used throughout the app. We're using a bottom tab navigator as the root navigator. Inside it are the exercises screen and the workout screen. Both of these screens has an "add" button on the right header position. The one for the exercises screen toggles the value for the isAddingExercise in the global app state. As you'll see later, this state value is used to determine whether to show the modal for creating a new exercise or not. On the other hand, the "add" button for the workout screen is used to navigate to the exercises screen. Because to start recording a new workout session, the user has to select an exercise first. The main purpose of having a separate tab for the workout screen is for easy access when the user has already selected an exercise:

// Root.js
import React, { useContext } from "react";
import { NavigationContainer } from "@react-navigation/native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { Button, withTheme } from "react-native-paper";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import ExercisesScreen from "./src/screens/ExercisesScreen";
import WorkoutTabScreen from "./src/screens/WorkoutTabScreen";
import { AppContext } from "./src/context/AppContext";

const Tab = createBottomTabNavigator();

function getHeaderTitle(route) {
  // ..
}

function Root({ theme }) {
  const { colors, fonts } = theme;
  const { setIsAddingExercise, setIsAddingWorkout } = useContext(AppContext);
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Exercises"
          component={ExercisesScreen}
          options={{
            tabBarLabel: "Exercises",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="dumbbell"
                color={colors.gray}
                size={fonts.icon}
              />
            ),
            headerRight: () => (
              <Button
                icon="plus"
                color={colors.text}
                onPress={() => setIsAddingExercise(true)}
              >
                Add
              </Button>
            ),
          }}
        />
        <Tab.Screen
          name="Workout"
          options={({ route, navigation }) => ({
            tabBarLabel: "Workout",
            headerTitle: getHeaderTitle(route),
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="weight-lifter"
                color={colors.gray}
                size={fonts.icon}
              />
            ),
            headerRight: () => (
              <Button
                icon="plus"
                color={colors.text}
                onPress={() => navigation.navigate("Exercises")}
              >
                Add
              </Button>
            ),
          })}
          component={WorkoutTabScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default withTheme(Root);

The getHeaderTitle() function is used for showing a different title for the workout screen based on the exercise selected by the user. You might be wondering why it's route.params.params instead of just route.params. That's because the data is being passed to the nested screen as you'll see later:

function getHeaderTitle(route) {
  if (route.params) {
    const exercise_name = route.params.params.exercise.name;
    return exercise_name.length > 25
      ? exercise_name.substr(0, 25) + ".."
      : exercise_name;
  }
  return "Workout";
}

AppContext

The AppContext is what provides the global app state. This allows us to use the data that was set from the current screen in another screen:

// src/context/AppContext.js
import React, { useState } from "react";
const AppContext = React.createContext();

const AppContextProvider = (props) => {
  const [isAddingExercise, setIsAddingExercise] = useState(false); // whether to show the add exercise modal or not
  const [workoutHistory, setWorkoutHistory] = useState([]); 

  const value = {
    isAddingExercise,
    setIsAddingExercise,
    workoutHistory,
    setWorkoutHistory,
  };

  return (
    <AppContext.Provider value={value}>{props.children}</AppContext.Provider>
  );
};

export { AppContext, AppContextProvider };

Connecting to Fauna

Before we proceed with the code for each of the screens, let's first take a look at the code for connecting to Fauna and manipulating the database:

// src/config/db.js
import faunadb from "faunadb";
const client = new faunadb.Client({
  secret: "YOUR FAUNA SECRET",
  domain: "YOUR FAUNA DOMAIN",
});

const q = faunadb.query;
export { client, q };

That's really all there is to it when it comes to connecting to Fauna. Just supply the secret and the domain where your database instance is hosted. If you selected "United States" earlier, the connection domain should be db.us.fauna.com. If you selected anything else, check out the docs on region groups. If you scroll down near the bottom, you'll find a table showing the region group and their corresponding connection domain.

Get Exercises

Now we're ready to make some queries to the database. First, let's take a look at the query for getting the exercises:

// src/data/index.js
import {client, q} from '../config/db';
export const getExercises = () => {
  return client
    .query(q.Paginate(q.Match(q.Ref('indexes/exercises_index'))))
    .then(response => {
      const exercises_ref = response.data;
      const getAllDataQuery = exercises_ref.map(ref => {
        return q.Get(ref);
      });
      return client.query(getAllDataQuery).then(data => data);
    })
    .catch(error => console.error('Error: ', error.message));
};

Fauna uses FQL (Fauna Query Language) as its query language. We won't be diving into it in this tutorial since there are already existing guides for that. If you're up for some reading, I recommend the following:

It's not required for you to read the articles above to follow this tutorial, but its definitely recommended.

The faunadb package we installed earlier provides the JavaScript API for FQL. This means that the function calls we made above basically looks similar to FQL in its raw form (eg. when you execute it via the Fauna console). If you check out the FQL API cheat sheet, you'll see the same methods we used above:

In most cases, you'll have to use client.query(q.Paginate(q.Match(q.Ref('YOUR INDEX')))) to fetch data from the database.

In the following code, we're getting the data from the exercises index:

We haven't really created it yet, so go to the Fauna dashboard and click on the Indexes menu then click on NEW INDEX:

Select the exercises collection and set the name of the index to exercises_index. Leave the defaults as it is then click SAVE:

Next, you need to give permission to the role you created earlier to access this index. To do that, go to the Security page and click on the Roles tab then click on the gear icon on the role. This should redirect you to the same page as below. In the Indexes section, select the exercises index and check all the privileges:

Once that's done, the code for getting data from the exercises index should work. Note that response.data doesn't actually contain the data. All it returns is the reference to the data. That's why we have to use JavaScript's map() function to go through the results and call q.Get() on each to construct the query for getting the data for each row. The call to client.query(getAllDataQuery) is what returns the actual data:

return client
    .query(q.Paginate(q.Match(q.Ref('indexes/exercises_index'))))
    .then(response => {
      const exercises_ref = response.data;
      const getAllDataQuery = exercises_ref.map(ref => {
        return q.Get(ref);
      });
      return client.query(getAllDataQuery).then(data => data);
    })
    .catch(error => console.error('Error: ', error.message));

Save Exercise

Creating a new exercise record is a lot simpler. We just need to use the q.create() method and pass in the collection as the first argument, and an object containing a data object which contains the data you want to save:

// src/data/index.js
export const saveExercise = (name, category, primary_muscle) => {
  return client
    .query(
      q.Create(q.Collection('exercises'), {
        data: {
          name,
          category,
          primary_muscle,
        },
      }),
    )
    .then(ret => ret)
    .catch(error => console.error('Error: ', error.message));
};

Get Workouts by Exercise

Getting workouts for a specific exercise is also required as we can't be fetching all the workouts that had been saved ever since the user started recording. It's bad for performance reasons.

To achieve this, we need to create another index. This time, let's use the shell to create the index. Go ahead and click on the Shell menu in the Fauna dashboard. That should show you the following screen. The larger box on the top is where the output of whatever commands you execute in the shell is shown. While the one below it is where you type in the commands. Clear it out for now:

Enter the following command in the shell:

CreateIndex({
  name: "all_workouts_by_exercise_id",
  source: Collection("workouts"),
  terms: [
    { field: ["data", "exercise_id"]}
  ]
})

Make sure to run it as the role you created earlier. You can change that by clicking on the RUN AS button and selecting the role. The above code is the standard code for creating an index in Fauna. The CreateIndex() function accepts an object containing the following properties:

name - the machine-friendly name for the index.
source - the source collection.
terms - an array of term objects describing the fields that should be searchable.

Here's the code. It looks pretty much the same as the code for getting the exercises, the only difference is that we're passing a second argument to q.Match(). This value will be used as the value for the term you added:

// src/data/index.js
export const getWorkoutsByExercise = exercise_id => {
  return client
    .query(
      q.Paginate(
        q.Match(q.Ref('indexes/workouts_by_exercise_id_index'), exercise_id),
      ),
    )
    .then(response => {
      const workouts_ref = response.data;
      const getAllDataQuery = workouts_ref.map(ref => {
        return q.Get(ref);
      });
      return client.query(getAllDataQuery).then(data => data);
    })
    .catch(error => console.error('Error: ', error.message));
};

We can actually implement the same thing without using an index, but since we already know we will need this exact query in the app, it's better to create an index for it instead. That way we don't have to construct the query for it everytime we need it.

Create Workout

Next is the code for creating a new workout. It looks pretty much the same as the code for creating a new exercise, only this time we're saving the data to the workouts collection. We also need to save the timestamp. Fauna actually saves a timestamp for each document already. But that one is attached to the database itself and is used for the temporal stuff. It also provides date and time functions but we also won't be using that. To keep things simple, we're gonna use good old new Date() to get the unix timestamp and storing it along with the other data we need to store for each workout:

// src/data/index.js
export const saveWorkout = (exercise_id, weight, reps) => {
  const time_created = Math.round(new Date().getTime() / 1000);
  return client
    .query(
      q.Create(q.Collection('workouts'), {
        data: {
          exercise_id,
          weight,
          reps,
          time_created,
        },
      }),
    )
    .then(ret => console.log('created workout: ', ret))
    .catch(error => console.error('Error: ', error.message));
};

Update Workout

Updating a workout also looks the same as creating a workout. The only difference is that we need to pass in the document's ref ID as a second argument to the q.Update() function. Note that the data you pass in doesn't have to contain all the fields (with their updated values) that were present when you created the document. That's why we're only specifying the weight and reps here:

// src/data/index.js
export const updateWorkout = (id, weight, reps) => {
  return client
    .query(
      q.Update(q.Ref(q.Collection('workouts'), id), {
        data: {
          weight,
          reps,
        },
      }),
    )
    .then(ret => console.log('updated workout: ', ret))
    .catch(error => console.error('Error: ', error.message));
};

Delete Workout

Lastly, here's the code for deleting a workout. All we need is to pass in the ref ID as a second argument to q.Ref(). That should delete the corresponding document in the collection you specified as the first argument:

// src/data/index.js
export const deleteWorkout = id => {
  return client
    .query(q.Delete(q.Ref(q.Collection('workouts'), id)))
    .then(ret => console.log('deleted workout'))
    .catch(err => console.error('Error: %s', err));
};

Data Formatter Helper

The data formatter is our nifty little helper which allows us to manipulate the raw data that we get from Fauna to a format which best suits our needs. It's also responsible for filtering the workout history to only the one's performed by the user in the current day:

// src/helpers/DataFormatter.js
import groupBy from 'lodash.groupby';
import {fromUnixTime, format} from 'date-fns';

function getGroupedWorkouts(res) {
  const formatted_workouts = res.map(item => {
    const {exercise_id, weight, reps, time_created} = item.data;
    const date = format(fromUnixTime(time_created), 'yyyy-MM-dd');

    return {
      id: item.ref.id,
      exercise_id,
      weight,
      reps,
      date,
      time_created,
    };
  });

  return groupBy(formatted_workouts, 'date');
}

export const groupWorkouts = res => {
  return getGroupedWorkouts(res);
};

export const filterTodaysWorkout = grouped => {
  const today = format(new Date(), 'yyyy-MM-dd');
  return grouped[today] ? grouped[today] : [];
};

Exercises Screen

Now, let's proceed with the exercises screen. First, import the modules we need. getExercises, getWorkoutsByExercise, and saveExercise allows us to interact with the Fauna database. While groupWorkouts is for formatting the data so that it can easily be presented in the UI:

// src/screens/ExercisesScreen.js
import React, { useState, useEffect, useContext } from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { List, withTheme } from "react-native-paper";
import AddExerciseModal from "../components/AddExerciseModal";
import { getExercises, getWorkoutsByExercise, saveExercise } from "../data";
import { AppContext } from "../context/AppContext";
import { groupWorkouts } from "../helpers/DataFormatter";

Inside the ExercisesScreen component, we have some state for storing the exercises, filtered exercises, and the exercise being searched by the user. Filtered exercises are simply the exercises that has been filtered based on the value of searchExercise. The filtered exercises is what's going to be displayed in the UI:

function ExercisesScreen({ navigation, theme }) {
  const { fonts, colors } = theme;

  const [exercises, setExercises] = useState([]);
  const [filteredExercises, setFilteredExercises] = useState([]);
  const [searchExercise, setSearchExercise] = useState("");
}

Next, we extract the methods we need from the AppContext:

const {
  // for toggling the create exercise modal visibility
  isAddingExercise, 
  setIsAddingExercise,
  setWorkoutHistory, // for updating the state with the current workout history being viewed
} = useContext(AppContext);

Once the component has loaded, that's the time we fetch the exercise data from the database then update the state:

useEffect(() => {
  getExercises().then((res) => {
    setExercises(res);
    setFilteredExercises(res);
  });
}, []);

We also have another useEffect, this time for listening for changes on searchExercise. Here, we're filtering the exercises based on its value:

useEffect(() => {
  const filtered = exercises.filter((item) => {
          return item.data.name.startsWith(searchExercise);
  });
        setFilteredExercises(filtered);
}, [searchExercise]);

Next, the createExercise function is executed when the user clicks on the "create" button on the add exercise modal. All it does is call the saveExercise() function for interacting with the FaunaDB database, then calls getExercises() function to update the UI with the updated data:

const createExercise = (name, category, primary_muscle) => {
    saveExercise(name, category, primary_muscle).then(() => {
      getExercises().then((res) => {
        setExercises(res);
        setFilteredExercises(res);
      });
    });
    setIsAddingExercise(false);
};

The goToWorkout function is executed when the user clicks on any exercise on the list. This makes a request to Fauna to get the workout history for a particular exercise then updates the global state with it. Navigation works a bit differently because the workout screen is actually a tab navigator. This means that it has other screens under it. That's why aside from the name of the workout screen, we also need to pass in the name of the screen under it. In this case, it's CurrentWorkout. Then we pass in the parameters we want to pass via the params property. That's the reason why this specific data had to be accessed under route.params.params as you've seen earlier in the getHeaderTitle() function:

const gotoWorkoutScreen = (item_id, item_data) => {
    getWorkoutsByExercise(item_id).then((res) => {
      const grouped_workouts = groupWorkouts(res);
      setWorkoutHistory(grouped_workouts);
    });
    navigation.navigate("Workout", {
      screen: "CurrentWorkout",
      params: {
        exercise_id: item_id,
        exercise: item_data,
      },
    });
};

Lastly, here's the the UI for the exercises screen. All it contains is the search field for searching an exercise, the list of exercises, and the add exercise modal:

return (
    <View style={styles.container}>
      <View style={[styles.box, styles.searchContainer]}>
        <TextInput
          value={searchExercise}
          placeholder="Search Exercise"
          onChangeText={(text) => setSearchExercise(text)}
          style={[styles.input, { backgroundColor: colors.white }]}
        />
      </View>
      <View style={styles.box}>
        {filteredExercises.map((item) => {
          return (
            <List.Item
              title={item.data.name}
              description={item.data.muscle}
              key={item.data.name}
              onPress={() => gotoWorkoutScreen(item.ref.id, item.data)}
            />
          );
        })}
      </View>
      <AddExerciseModal
        isAddingExercise={isAddingExercise}
        setIsAddingExercise={setIsAddingExercise}
        createExercise={createExercise}
      />
    </View>
);

I'll leave it to you to check out the complete code in the GitHub repo for the styles.

Workout Tab Screen

The workout tab screen is just a tab navigator with two screens on it: the current workout screen and the workout history screen. We need to pass in the initialParams prop on each screen so that they inherit whatever navigation params is passed to their parent:

// src/screens/WorkoutTabScreen.js
import React, { useState } from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import WorkoutScreen from "./WorkoutScreen";
import WorkoutHistoryScreen from "./WorkoutHistoryScreen";

const Tab = createMaterialTopTabNavigator();

function WorkoutTabScreen({ route }) {
  return (
    <Tab.Navigator>
      <Tab.Screen
        initialParams={route.params}
        name="CurrentWorkout"
        options={{
          title: "Today",
        }}
        component={WorkoutScreen}
      />
      <Tab.Screen
        initialParams={route.params}
        name="WorkoutHistory"
        options={{
          title: "History",
        }}
        component={WorkoutHistoryScreen}
      />
    </Tab.Navigator>
  );
}
export default WorkoutTabScreen;

Workout Screen

The workout screen is where all the workout recording happens. This is where the user can create new workouts, and update or delete existing ones:

// src/screens/WorkoutScreen.js
import React, { useState, useContext, useEffect } from "react";
import { View, Text, TextInput, ScrollView, StyleSheet } from "react-native";
import { Button, IconButton, withTheme } from "react-native-paper";
import { useRoute } from "@react-navigation/native";
import SetItem from "../components/SetItem";
import {
  saveWorkout,
  updateWorkout,
  deleteWorkout,
  getWorkoutsByExercise,
} from "../data";
import { groupWorkouts, filterTodaysWorkout } from "../helpers/DataFormatter";
import { AppContext } from "../context/AppContext";

Inside the component, we extract the workoutHistory and setWorkoutHistory from the global state. Because as you've seen in the exercises screen earlier, we're actually calling the setWorkoutHistory() function to update the global state with the workout history of the exercise clicked on by the user. So we're basically just reading that here. Below that, we have a few state variables for keeping track of the currently selected set (selectedSet), the index of the selected set (selectedIndex), the weight (weight), repetitions (reps), and an array containing the workout for the current day for that specific exercise:

function WorkoutScreen({ navigation, theme }) {
  const route = useRoute();
  const { colors, fonts } = theme;

  const {
    workoutHistory,
    setWorkoutHistory,
  } = useContext(AppContext);

  const [selectedSet, setSelectedSet] = useState(null);
  const [selectedIndex, setSelectedIndex] = useState(null);
  const [weight, setWeight] = useState(0);
  const [reps, setReps] = useState(0);
  const [todaysWorkout, setTodaysWorkout] = useState([]);
  const currentAction = selectedIndex !== null ? "Update" : "Add";
  const disableDelete = selectedIndex !== null ? false : true;
}

Next, we have the functions for incrementing or decrementing the weight and reps:

const increment = (type, value) => {
  if (type === "weight") {
    setWeight(weight + 1);
  } else if (type === "reps") {
    setReps(reps + 1);
  }
};

const decrement = (type, value) => {
  if (value >= 1) {
    if (type === "weight") {
      setWeight(value - 1);
    } else if (type === "reps") {
      setReps(value - 1);
    }
  }
};

Next, we have the function that gets called when the user clicks on a specific set. In this case, we need to update the selectedSet and selectedIndex to match. The weight and reps field also need to be updated based on the weight and reps for that set. This will then allow us to update the details for that set:

const selectSet = (item, index) => {
  setSelectedSet(item);
  setSelectedIndex(index);
  setWeight(parseInt(item.weight));
  setReps(parseInt(item.reps));
};

Next is the function that gets called everytime the user creates a new workout entry or updates an existing entry. We can determine which one needs to be executed based on the presence of the selectedIndex in the state. If it's present then we're updating a workout entry. Otherwise, we're creating a new entry:

const saveAction = () => {
  if (selectedIndex !== null) {
    updateWorkout(selectedSet.id, weight, reps).then(() =>
      syncWorkoutHistory()
    );
  } else {
    if (route.params) {
      saveWorkout(route.params.params.exercise_id, weight, reps).then(() =>
        syncWorkoutHistory()
      );
    }
  }
};

Here's the code for fetching the fresh workout history from the database. We need to call this function everytime we make a modification to the workout history so that the UI can be updated:

const syncWorkoutHistory = () => {
  getWorkoutsByExercise(route.params.params.exercise_id).then((res) => {
    const grouped_workouts = groupWorkouts(res);
    setWorkoutHistory(grouped_workouts);
  });
};

The deleteSet() function gets called when the user clicks on the "delete" button after selecting a set:

const deleteSet = () => {
  deleteWorkout(selectedSet.id).then(() => syncWorkoutHistory());
};

When the route params changes, we call the syncWorkoutHistory() function to update the UI with the workouts for the specific exercise:

useEffect(() => {
  if (route.params) {
    syncWorkoutHistory();

    // reset the inputs
    setSelectedSet(null);
    setSelectedIndex(null);
    setWeight(0);
    setReps(0);
  }
}, [route.params]);

Since this is the current workout screen, we only need to show today's workout to the user. So we watch for changes in the workoutHistory and update todaysWorkout based on that:

useEffect(() => {
  if (workoutHistory) {
    const todays_workout = filterTodaysWorkout(workoutHistory);
    setTodaysWorkout(todays_workout);
  }
}, [workoutHistory]);

Here's the UI code for the current workout screen:

return (
    <ScrollView style={styles.container}>
      <View style={styles.top}>
        <View style={styles.field}>
          <Text>WEIGHT (LB)</Text>
          <View style={styles.inputContainer}>
            <IconButton
              icon="minus"
              size={fonts.icon}
              style={{ backgroundColor: colors.background }}
              onPress={() => decrement("weight", weight)}
            />
            <TextInput
              keyboardType="number-pad"
              style={[styles.input, { fontSize: fonts.big }]}
              onChangeText={(text) => setWeight(text)}
              value={weight.toString()}
            />
            <IconButton
              icon="plus"
              size={fonts.icon}
              style={{ backgroundColor: colors.background }}
              onPress={() => increment("weight", weight)}
            />
          </View>
        </View>
        <View style={styles.field}>
          <Text>REPS</Text>
          <View style={styles.inputContainer}>
            <IconButton
              icon="minus"
              size={fonts.icon}
              style={{ backgroundColor: colors.background }}
              onPress={() => decrement("reps", reps)}
            />
            <TextInput
              keyboardType="number-pad"
              style={[styles.input, { fontSize: fonts.big }]}
              onChangeText={(text) => setReps(text)}
              value={reps.toString()}
            />
            <IconButton
              icon="plus"
              size={fonts.icon}
              style={{ backgroundColor: colors.background }}
              onPress={() => increment("reps", reps)}
            />
          </View>
        </View>
      </View>
      <View style={styles.buttonContainer}>
        <Button color={colors.text} onPress={() => saveAction()}>
          {currentAction}
        </Button>
        <Button
          labelStyle={{ color: colors.text }}
          disabled={disableDelete}
          onPress={() => deleteSet()}
        >
          Delete
        </Button>
      </View>
      <View style={styles.setContainer}>
        {todaysWorkout.map((item, index) => {
          const isSelected = index === selectedIndex;
          return (
            <SetItem
              item={item}
              index={index}
              key={index}
              onPress={() => {
                selectSet(item, index);
              }}
              isSelected={isSelected}
            />
          );
        })}
      </View>
    </ScrollView>
);

Workout History Screen

We now proceed to the workout history screen. This is where the user can see all the workouts they performed for a specific exercise since they started recording:

// src/screens/WorkoutHistory.js
import React, { useState, useContext } from "react";
import { ScrollView, View, Text, StyleSheet } from "react-native";
import { withTheme } from "react-native-paper";
import { fromUnixTime, format } from "date-fns";
import { AppContext } from "../context/AppContext";
import SetItem from "../components/SetItem";
import { getWorkoutsByExercise } from "../data";

Since all the data we require for this screen has already been set in the current workout screen, all we have to do is extract the workoutHistory from the app context. The workout history has to be sorted from latest to oldest so we need to use Object.keys() to get an array of the workoutHistory's properties. In this case, the properties are the workout dates. Calling reverse() on this resulting array will sort the workout history from latest to oldest. From there, we simply extract and format the data accordingly:

function WorkoutHistoryScreen({ theme }) {
  const { fonts } = theme;
  const { workoutHistory } = useContext(AppContext);

  return (
    <ScrollView style={styles.container}>
      {Object.keys(workoutHistory)
        .reverse()
        .map((key, date) => {
          const day_workouts = workoutHistory[key];
          const formatted_date = format(
            fromUnixTime(day_workouts[0]["time_created"]),
            "yyyy, MMMM dd"
          );
          return (
            <View style={styles.card} key={date}>
              <View style={styles.sectionHeader}>
                <Text style={{ fontSize: fonts.regular }}>
                  {formatted_date}
                </Text>
              </View>
              <View>
                {day_workouts.map((item, index) => {
                  return <SetItem item={item} index={index} key={index} />;
                })}
              </View>
            </View>
          );
        })}
    </ScrollView>
  );
}

Conclusion and next steps

That's it! In this tutorial, you learned how to use Fauna within a React Native app. Specifically, you learned how to fetch, create, update, and delete documents in Fauna. Along the way, you also learned how to use tab navigation and nested navigation in React Navigation and also how to use React Native Paper.

There's a lot of opportunity to improve this app further. Here are a few ideas:

Limit database transactions on the currently logged in user - we haven't implemented authentication yet, so the first thing in the todo list is to add authentication. That will then allow you to get a unique ID for each user which can be added when saving data in the database. From there, you can create a new index that will filter out the data based on the user ID.
Different workout categories - we've only used "weight and reps". You can also add "time", "time and weight", "distance and time", "distance and weight", and "distance, time, and weight".
Show the personal record. For example, with "weight and reps", you mark the personal record calculated by weight x reps to encourage the user to surpass it.
Live UI updates for database changes - as you have seen, we performed a new query everytime the workout data changed just so we can update the UI. This Fauna feature will allow us to skip that part so we can listen directly for data changes and update the UI accordingly.
Graphs to visualize the workout data over time.
Calendar UI to view the workouts the user performed on a specific day.
Add an offline database like SQLite for offline capability. Then sync the offline data to Fauna when the user goes online.

I could go on, but let's leave it there.

You can view the source code of the workout tracking app in its GitHub repo.

Getting Started with Facades in Laravel

Wern Ancheta — Mon, 30 Aug 2021 05:48:59 +0000

Facades in Laravel allows you to call non-static methods as if they were static methods. This makes it possible for you to call methods in certain classes without the need for creating an object everytime you use them. It basically has the same benefit of using the service container.

Before we look into how we can implement our own Facades with Laravel, let's first take a look at a few examples on how Laravel uses Facades.

The Laravel framework stores its Facades in the vendor/laravel/frameworks/src/Illuminate/Support/Facades directory. There you will see familiar one's such as DB.php, View.php, Validator.php, and Request.php. If you open any of these files, you will see some code which looks like the following:

class DB extends Facade
{

    protected static function getFacadeAccessor()
    {
        return 'db';
    }
}

This class extends the Facade class (Facade.php in the same directory). If you open that up, you'll see a bunch of methods for testing purposes. We're not gonna go over those today. Instead, we'll focus on the __callStatic method. What this methos does is call the getFacadeAccesor() method in the extending class (e.g the DB class) and resolves an instance of the class being returned by that method. In this case, it's the db class.

That sounds really confusing even if you tried tracing through the method calls in the base Facade class. So let's go through a simpler example first.

Create an app/ShowName.php file and add the following:

<?php
namespace App;

class ShowName {

    public static function __callStatic($method, $arguments)
    {
        dd($method);
    }
}

Then in your routes/web.php file, add the following route.

Route::get('show', function(App\ShowName $obj) {

    $obj::someMethodName('cat', 'dog');
});

That should then output "somemethodName" or whatever method you called.

You can also get access to the arguments passed to the method from here:

dd($arguments);

That should then show the following output:

array:2 [▼
  0 => "cat"
  1 => "dog"
]

That's the basic idea behind how Facades work. The Facade has this __callStatic() method which then resolves the underlying from the service container. This means that Facades aren't really a replacement to using the service container. It's a supplement to make methods even more easier to call.

Now that you know how Facades work behind the scenes, let's now try to implement one ourselves.

Open the app/ShowName.php file from earlier and update the __callStatic() method with the following:

public static function __callStatic($method, $arguments)
{
    return (self::resolveFacade('ShowName'))->$method(...$arguments);
}

Then add this method:

public static function resolveFacade($name)
{
    return app()[$name];
}

This method resolves the specific class from the service container. This will only work if you bind the Facade in your app service provider:

// app/Providers/AppServiceProvider.php

$this->app->bind('ShowName', function () {
    return new ShowNameService;
});

The ShowNameService contains the following:

<?php
// app/Services/ShowNameService.php

namespace App\Services;

class ShowNameService {

    public function hello($name)
    {
        return 'hello ' . $name;
    }
}

Next, open your config/app.php file and add a new item to the aliases array.

'aliases' => [
    // ...
    'ShowName' => App\ShowName::class, // add this
],

Once that's done, you should now be able to call methods from the ShowNameService class using the ShowName facade.

Route::get('hello', function() {

    return ShowName::hello('cat'); // outputs: "hello cat"
});

If you then add a new method on your ShowNameService class:

public function hi($name)
{
    return 'hi ' . $name;
}

You should still be able to call it through the Facade:

ShowName::hi('cat'); // outputs: "hi cat"

Cover image from matthaeus: https://unsplash.com/photos/hew8vAvvvz4

A Primer to Service Container in Laravel

Wern Ancheta — Sun, 15 Aug 2021 09:49:52 +0000

In this post we'll take a look at how to make use of the service container in Laravel.

Let's say we have a class for paying with Stripe:

<?php

namespace App\Services;

class StripePaymentService {


    public function pay() 
    {
        return 'paid!';
    }
}

With type-hinting, you can easily make use of this class like so:

<?php

use App\Services\StripePaymentService;

class PaymentsController extends Controller
{

    public function pay(StripePaymentService $stripe)
    {
        return $stripe->pay();
    }

This way you don't need to initialize it before you can call the method:

$stripe = new StripePaymentService()
$stripe->pay();

Here's the route for those of you who likes to code along:

Route::get('pay', 'PaymentsController@pay'); // it's GET for easy testing, should be POST in the real-world

But what if you need to supply arguments to it? This is where the Service Container comes into play. It provides a way for you to manage your class dependencies so you can easily inject them anywhere you need it. All of this without having to initialize the class each time.

Let's say we now have a constructor for our StripePaymentService class. This allows us to specify the payment method and the currency:

class StripePaymentService {

    private $payment_method;
    private $currency;


    public function __construct($payment_method, $currency)
    {
        $this->payment_method = $payment_method;
        $this->currency = $currency;
    }


    public function pay()
    {
        return [
            'payment_method' => $this->payment_method,
            'currency' => $this->currency,
        ];
    }
}

With this change, we can no longer make use of the code from earlier since there's no way for us to supply the arguments for the constructor:

The easiest way to solve this is via the AppServiceProvider class:

<?php
// app/Providers/AppServiceProvider.php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
use App\Services\StripePaymentService; 

class AppServiceProvider extends ServiceProvider
{

    public function register()
    {

        $this->app->bind(StripePaymentService::class, function () {
            return new StripePaymentService('card', 'usd');
        });

    }

}

The key code is this one. What this does is return a new instance of the class everytime the StripePaymentService is injected anywhere:

$this->app->bind(StripePaymentService::class, function () {
     return new StripePaymentService('card', 'usd');
});

With this code added, this bit of code will now work like usual:

public function pay(StripePaymentService $stripe)
{
        return $stripe->pay();
}

In the real world, this isn't how it usually plays out. We usually have other classes interacting with the StripePaymentService. Let's now add it into our code.

Create an app/Services/BasketService.php file. This will handle our basket logic. But at the same time, it also needs to use the StripePaymentService to set the amount (basket total) and discount:

<?php
namespace App\Services;

use App\Services\StripePaymentService;

class BasketService {

    private $stripe;

    // total: 45
    private $items = [
        [
            'title' => 'Biscuit',
            'price' => 2,
            'qty' => 10
        ],
        [
            'title' => 'Oranges',
            'price' => 5,
            'qty' => 5
        ],
    ];

    private $total;

    public function __construct(StripePaymentService $stripe)
    {
        $this->total = 0;
        $this->stripe = $stripe;
    }


    public function summarize()
    {
        $this->total = collect($this->items)->map(function($row) {
            return $row['price'] * $row['qty'];
        })->sum();

        $this->stripe->setAmount($this->total);
        $this->setDiscount();
    }


    public function setDiscount()
    {
        if ($this->total >= 40) {
            $this->stripe->setDiscount(10);
        }
    }

}

Open StripePaymentService and update it to handle the amount and the discount:

// app/Services/StripePaymentService.php

private $payment_method;
private $currency;

// add these:
private $amount;
private $discount;

public function __construct($payment_method, $currency)
{
    $this->payment_method = $payment_method;
    $this->currency = $currency;

    // add these
    $this->amount = 0;
    $this->discount = 0;
}

public function setAmount($amount)
{
    $this->amount = $amount;
}


public function setDiscount($discount)
{
    $this->discount = $discount;
}

public function pay()
{
    return [
        'payment_method' => $this->payment_method,
        'currency' => $this->currency,

        // add these
        'amount' => $this->amount,
        'discount' => $this->discount,
    ];
}

Then in the PaymentsController, we're now ready to make use of the BasketService:

// app/Http/Controllers/PaymentsController.php

use App\Services\StripePaymentService;
use App\Services\BasketService;

class PaymentsController extends Controller
{
    // update this
    public function pay(StripePaymentService $stripe, BasketService $basket)
    {

        $basket->summarize();
        return $stripe->pay();
    }
    // ...
}

When you run it on the browser though, you'll see that it doesn't actually perform as expected:

The problem with this is the way we're binding the StripePaymentService class. Instead of $this->app->bind(), we should call $this->app->singleton() instead. This way, it wouldn't create a new instance everytime the class is injected anywhere else in the code. Using a singleton means that it will check to see if a class had already been instantiated before creating a new instance again. If it has already been instantiated then it will simply return the old one.

// app/Providers/AppServiceProvider.php
public function register()
{

    $this->app->singleton(StripePaymentService::class, function () {
        return new StripePaymentService('card', 'usd');
    });

}

With that change, we now see the expected output:

Note that we didn't really need to add BasketService into the AppServiceProvider like so:

$this->app->singleton(BasketService::class, function () {
    return new BasketService;
});

This is because we don't need it yet. Most likely, you'll be using sessions to store the items data anyway, so you don't really need a singleton for that.

Now what if we need to introduce a new method of collecting payments? PayPal for example.

Most likely, the code should be pretty similar like so. Note that payment_method is removed since it's assumed that the PayPal balance will be used:

<?php

namespace App\Services;

class PaypalPaymentService {

    private $currency;

    private $amount;
    private $discount;


    public function __construct($currency)
    {
        $this->currency = $currency;

        $this->amount = 0;
        $this->discount = 0;
    }


    public function setAmount($amount)
    {
        $this->amount = $amount;
    }


    public function setDiscount($discount)
    {
        $this->discount = $discount;
    }


    public function pay()
    {
        return [
            'currency' => $this->currency,
            'amount' => $this->amount,
            'discount' => $this->discount,
        ];
    }
}

Then you'll have to add it again to your AppServiceProvider:

// app/Providers/AppServiceProvider.php

$this->app->singleton(PaypalPaymentService::class, function () {
    return new PaypalPaymentService('card', 'usd');
});

As well as everywhere else you used StripePaymentService earlier.

And then you'll have to do this over and over as you accept more types of payments. Not really ideal in the long run.

We can solve this by creating an interface in which all payment types (Stripe, PayPal, etc.) will be based on. This way, we can inject the interface instead of the individual classes wherever we need it.

Create an app/Services/PaymentServiceInterface.php. This will serve as the "blue-print" for all our payment types:

<?php
namespace App\Services;

interface PaymentServiceInterface {

    public function setAmount($amount);

    public function setDiscount($discount);

    public function pay();
}

Then in your individual classes, all you have to do is implement the PaymentServiceInterface. The rest of the code will remain the same:

<?php

namespace App\Services;

use App\Services\PaymentServiceInterface; // add this

class StripePaymentService implements PaymentServiceInterface { // implement the PaymentServiceInterface


    private $payment_method;
    private $currency;

    private $amount;
    private $discount;


    public function __construct($payment_method, $currency)
    {
        $this->payment_method = $payment_method;
        $this->currency = $currency;

        $this->amount = 0;
        $this->discount = 0;
    }


    public function setAmount($amount)
    {
        $this->amount = $amount;
    }


    public function setDiscount($discount)
    {
        $this->discount = $discount;
    }


    public function pay()
    {
        return [
            'service' => 'stripe', // add this so we can see which class is being used
            'payment_method' => $this->payment_method,
            'currency' => $this->currency,
            'amount' => $this->amount,
            'discount' => $this->discount,
        ];
    }
}

Do the same for the PaypalPaymentService:

<?php

namespace App\Services;

use App\Services\PaymentServiceInterface;

class PaypalPaymentService implements PaymentServiceInterface {

    private $currency;

    private $amount;
    private $discount;


    public function __construct($currency)
    {
        $this->currency = $currency;

        $this->amount = 0;
        $this->discount = 0;
    }


    public function setAmount($amount)
    {
        $this->amount = $amount;
    }


    public function setDiscount($discount)
    {
        $this->discount = $discount;
    }


    public function pay()
    {
        return [
            'service' => 'paypal',
            'currency' => $this->currency,
            'amount' => $this->amount,
            'discount' => $this->discount,
        ];
    }
}

Then update your AppServiceProvider to return a new instance of the correct class based on the request input that's passed in:

// app/Providers/AppServiceProvider.php

use App\Services\PaymentServiceInterface;
use App\Services\StripePaymentService;
use App\Services\PaypalPaymentService;

class AppServiceProvider extends ServiceProvider
{

    public function register()
    {
        $this->app->singleton(PaymentServiceInterface::class, function () {

            if (request()->has('stripe')) {
                return new StripePaymentService('card', 'usd');
            }
            return new PaypalPaymentService('usd');
        });
    }
}

The final step is to update all instances where you used the StripePaymentService and PaypalPaymentService to use the PaymentServiceInterface instead.

First, we have the BasketService:

<?php
// app/Services/BasketService.php

namespace App\Services;

use App\Services\PaymentServiceInterface;

class BasketService {

    private $payor;

    private $items = [
        [
            'title' => 'Biscuit',
            'price' => 2,
            'qty' => 10
        ],
        [
            'title' => 'Oranges',
            'price' => 5,
            'qty' => 5
        ],
    ];

    private $total;

    public function __construct(PaymentServiceInterface $payor)
    {
        $this->total = 0;
        $this->payor = $payor;
    }


    public function summarize()
    {
        $this->total = collect($this->items)->map(function($row) {
            return $row['price'] * $row['qty'];
        })->sum();

        $this->payor->setAmount($this->total);
        $this->setDiscount();
    }


    public function setDiscount()
    {
        if ($this->total >= 40) {
            $this->payor->setDiscount(10);
        }
    }

}

Next, we have the controller:

use App\Services\PaymentServiceInterface;

class PaymentsController extends Controller
{

    public function pay(PaymentServiceInterface $payor, BasketService $basket)
    {

        $basket->summarize();
        return $payor->pay();
    }
}

Now, when you supply stripe in the request, you'll trigger the StripePaymentService:

Otherwise, you get the PayPal one:

Now, anytime you need to add a new payment type, all you have to do is create a new class which adheres to the PaymentServiceInterface then add the corresponding check on AppServiceProvider.

One final thing before I let you go is the use of service provider classes. Sooner or later your AppServiceProvider file will fill with a bunch of codes under the register() method. To avoid that problem, you can create a separate service provider class for each interface.

Execute the following on your terminal:

php artisan make:provider PaymentServiceProvider

That will generate a new file app/Providers/PaymentServiceProvider.php. Here, you will just copy and paste the specific binding code you have for the interface that you want this provider to cater to. In this case, we have the PaymentServiceInterface:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use App\Services\PaymentServiceInterface;
use App\Services\StripePaymentService;
use App\Services\PaypalPaymentService;

class PaymentServiceProvider extends ServiceProvider
{

    public function register()
    {
        $this->app->singleton(PaymentServiceInterface::class, function() {
            if (request()->has('stripe')) {
                return new StripePaymentService('card', 'usd');
            }
            return new PaypalPaymentService('usd');
        });
    }


    public function boot()
    {
        //
    }
}

The final step is add that provider to the providers array in the config/app.php file:

'providers' => [
    // ...
    App\Providers\PaymentServiceProvider::class,
]

Summary

Laravel's Service Container is a useful tool to add in our arsenal to keep our code tidy. By using it in combination with interfaces, you can easily manage your class dependencies. Be sure to read the official documentation for more information regarding the Service Container.

Cover Image from Guillaume Bolduc: https://unsplash.com/photos/uBe2mknURG4

Creating a Real-Time Location Tracking App with NativeScript-Vue

Wern Ancheta — Mon, 23 Mar 2020 15:11:46 +0000

In this tutorial, you're going to learn how to create a real-time location tracking app using the NativeScript Vue template.

Prerequisites

Basic knowledge of NativeScript is required to follow this tutorial. Vue knowledge is optional.

The following package versions were used in creating this tutorial:

Node 12.7.0
Yarn 1.19.1
Nativescript-Vue 2.4.0
NativeScript CLI 6.1.2

Be sure to install the same versions or higher to ensure that the app will work.

Lastly, you need to have a Pusher and Google account so you can use their API.

App Overview

We're going to create a real-time location tracking app. It will allow the user to either share their current location or track another person's location via a map interface. Here's what it will look like:

You can view the source code on this GitHub repo.

Setting up a Pusher app instance

We need a Pusher app instance in order to use Pusher's services. Go to the Pusher dashboard and create a new Channels app:

Once the app is created, go to the app settings tab and enable client events. This is what will allow the users to trigger real-time events directly from the client-side:

Setting up Google Maps API

To use Google Maps, we need to enable the Google Maps SDK on the Google Cloud Platform console.

On your dashboard, click on the burger menu on the upper left side, hover over APIs & Services and click on Library:

Once you're in the libraries page, search for "Maps SDK", click on Maps SDK for Android and enable it:

Next, go to API & Services -> Credentials and click on the Create Credentials button. Then, select API key on the dropdown that shows up:

That will generate a new API key that you can use later on in the app. Note that you should also restrict access to that key so that it can only be used in the app.

Setting up the project

The app will have both a server and app component. We'll start by setting up the app itself.

Setting up the app

Create a new NativeScript project that uses the Vue template:

tns create LocationTracker --vue

Once that's done, navigate to the newly generated LocationTracker directory and install the dependencies as below:

tns plugin add nativescript-geolocation
tns plugin add nativescript-google-maps-sdk
tns plugin add nativescript-permissions
tns plugin add nativescript-websockets
tns plugin add pusher-nativescript

Next, we need to install the library for generating random strings:

yarn add random-string

Here's a brief overview of the packages we just installed:

nativescript-geolocation — used for getting the user's current location.
nativescript-google-maps-sdk — NativeScript library for working with the Google Maps SDK.
nativescript-permissions — used for asking permissions in Android.
nativescript-websockets — WebSocket library for NativeScript. Pusher uses WebSockets so this is a dependency for pusher-nativescript.
pusher-nativescript — NativeScript library for Pusher integration.
random-string — for generating random strings that will serve as the unique ID for users who want to share their location.

Once everything is installed, update the app/App_Resources/Android/src/main/AndroidManifest.xml file. Add the following permissions so we can access the user's current location:

<manifest>
    <<!-- ... -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <!-- add these-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
</manifest>

Then, under <application>, add the <meta-data> for the Google API key:

<application>
    ...
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_GOOGLE_API_KEY" />
</application>

Setting up the server

For the server, create a server folder inside your working directory and create a package.json file with the following contents:

{
  "name": "ns-realtime-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "pusher": "^3.0.0"
  }
}

Once that's done, execute yarn inside the server folder to install all the packages.

Here's a brief overview of the packages we just installed:

express — for creating a server.
dotenv — allows fetching environment variables (app config) in a .env file.
cors — allows the app to make requests to the server.
body-parser — for parsing the request body to a JavaScript object.
pusher — for real-time communications.

Building the app

Now, we're ready to build the app. We'll start by adding the server code, then we'll proceed to adding the code for the app itself.

Adding the server code

Create an index.js file and add the following. This will import all the packages that we need:

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
require("dotenv").config();
const Pusher = require("pusher");

Next, initialize Pusher. This is what will allow us to connect to the Pusher app instance we created earlier:

const pusher = new Pusher({
    appId: process.env.PUSHER_APP_ID,
    key: process.env.PUSHER_APP_KEY,
    secret: process.env.PUSHER_APP_SECRET,
    cluster: process.env.PUSHER_APP_CLUSTER
});

Next, initialize the Express server. Here, we need to enable CORS (Cross-origin resource sharing) so that the app can make a request to the server:

const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false })); // disables nested object in the request body

For the server, we'll only need a couple of routes: one for testing if the server is running and the other for authenticating users of the app so that they can trigger messages directly from the client-side:

app.get("/", (req, res) => {
    res.send("ok");
});

app.post("/pusher/auth", (req, res) => {
    const socketId = req.body.socket_id;
    const channel = req.body.channel_name;
    const auth = pusher.authenticate(socketId, channel);
    res.send(auth);
});

The authentication code above simply authenticates every request that comes in. In a production app, you would need to check in your database if the user who made the request exists.

Lastly, expose the server:

const PORT = 5000;
app.listen(PORT, err => {
    if (err) {
        console.error(err);
    } else {
        console.log(`Running on ports ${PORT}`);
    }
});

Adding the app code

Now, we're ready to add the code for the app. Start by opening the app/app.js file and register the MapView component. We need to do this because, by default, the Google Maps library for NativeScript doesn't support Vue. The code below is used to manually register the MapView element so we can use it in our templates:

// app/app.js
Vue.registerElement(
    "MapView",
    () => require("nativescript-google-maps-sdk").MapView
);

Next, open the app/components/Home.vue file, clear its contents and add the following template. This is going to render the map inside a StackLayout. Its height is set to 85% so that there will be space for the buttons that the user will use to either share or track location. The MapView uses the latitude, longitude, and zoom values that we will set later as the data for this component:

<template>
    <Page actionBarHidden="true" backgroundSpanUnderStatusBar="false">

        <StackLayout height="100%" width="100%" >
            <MapView
                :latitude="latitude"
                :longitude="longitude"
                :zoom="zoom"
                height="85%"
                @mapReady="onMapReady">
            </MapView>
            <Button text="Stop Sharing Location" @tap="stopSharingLocation" v-if="isSharingLocation"></Button>
            <Button text="Share Location" @tap="startSharingLocation" v-else="isSharingLocation"></Button>

            <Button text="Stop Tracking Location" @tap="stopTrackingLocation" v-if="isTrackingLocation"></Button>
            <Button text="Track Location" @tap="startTrackingLocation" v-else="isTrackingLocation"></Button>
        </StackLayout>
    </Page>
</template>

Right below the component UI, we add the JavaScript code. Start by importing the packages we need:

import * as geolocation from "nativescript-geolocation";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { Position, Marker } from "nativescript-google-maps-sdk";
import { Accuracy } from "tns-core-modules/ui/enums";
import Pusher from "pusher-nativescript";
const randomString = require("random-string");

Next, add the Pusher app config. Leave the SERVER_BASE_URL for now — that will have to be an internet-accessible URL. So, we'll use ngrok to expose the local server:

const PUSHER_APP_KEY = "YOUR PUSHER APP KEY";
const PUSHER_APP_CLUSTER = "YOUR PUSHER APP CLUSTER";
const SERVER_BASE_URL = "YOUR PUSHER AUTH SERVER URL";

Next, initialize the data to bind to the component:

export default {
    data() {
        return {
            // current coordinates being displayed on the map
            latitude: "",
            longitude: "",

            zoom: 17, // map zoom level

            mapView: null, // map view being rendered

            marker: new Marker(), // google map marker
            watchID: null, // unique ID for the watch location instance

            isSharingLocation: false, // whether the current user is sharing their location or not
            isTrackingLocation: false, // whether the current user is tracking someone else's location or not

            ownID: null, // unique ID of the current user for tracking
            trackingID: null, // unique ID of the person being tracked
            socket: null, // pusher socket

            ownChannel: null, // current user's own channel for triggering events
            trackingChannel: null // channel of the user being tracked by the current user
        };
    }

    // next: add mounted()
};

After this, add the methods to be bind to the component. First is onMapReady(), which we've attached to the mapReady event of MapView. This gets called once the MapView component is ready for use. args.object represents the map itself. Assigning it to data bound to the component allows us to manipulate the map later on:

methods: {
    onMapReady(args) {
        this.mapView = args.object;
    }
}

Next, add the mounted() method. This gets fired when the component is mounted. This is where we generate a unique ID for location sharing. Once that's done, we check if Geolocation (location services) is enabled. If it isn’t, then we request it from the user by calling geolocation.enableLocationRequest(). If the user enabled it, we proceed to getting their current location and updating the map:

methods: {
    onMapReady() {
        // ...
    }
},

mounted() {
    this.ownID = randomString({length: 5}); // unique ID for sharing location
    let that = this

    geolocation.isEnabled().then(function(isEnabled) {
        if (!isEnabled) { // GPS is not enabled
            geolocation.enableLocationRequest(true, true).then(() => {

                geolocation
                    .getCurrentLocation({
                        timeout: 20000
                    })
                    .then(location => {
                        if (!location) {
                            dialogs.alert('Failed to get location. Please restart the app.');
                        } else {
                            // show the user's current location in the map and add the marker
                            that.updateMap(location);
                            that.mapView.addMarker(that.marker);
                        }
                    });
            }, (e) => {
                console.log("error: " + (e.message || e));
            }).catch(ex => {
                console.log("Unable to Enable Location", ex);
            });
        } else {
            // GPS is enabled
            geolocation
                .getCurrentLocation({
                    timeout: 20000
                })
                .then(location => {
                    if (!location) {
                        dialogs.alert('Failed to get location. Please restart the app.');
                    } else {
                        that.updateMap(location);
                        that.mapView.addMarker(that.marker);
                    }
                });
        }
    }, function(e) {
        console.log("error: " + (e.message || e));
    });

    // next: subscribe to own Pusher channel

},

Once that’s done, initialize Pusher and subscribe to the user's own channel. This is where we use the unique ID we generated earlier to subscribe to a private channel. We're using a private channel because we only want authenticated users to use the channel:

this.socket = new Pusher(PUSHER_APP_KEY, {
    cluster: PUSHER_APP_CLUSTER,
    authEndpoint: `${SERVER_BASE_URL}/pusher/auth`
});

this.ownChannel = this.socket.subscribe(`private-${this.ownID}`);

this.ownChannel.bind("pusher:subscription_error", () => {
    dialogs.alert("Failed to connect. Please restart the app.");
});

Below, we have the updateMap() function. This sets the map coordinates to the location passed as an argument. After that, it also changes the marker position:

updateMap(loc) {
    this.latitude = loc.latitude;
    this.longitude = loc.longitude;
    this.marker.position = Position.positionFromLatLng(
        loc.latitude,
        loc.longitude
    );
},

Next, add the startSharingLocation() method. This will show the user their unique ID so that they could share it with someone. After that, the app will begin to watch the user's current location via the geolocation.watchLocation() method. This accepts the success callback as the first argument and the error callback as the second. The third argument is the options.

In this case, we're setting the updateDistance to 5 meters so that it will only fire the success callback if the change in the distance traveled is 5 meters or more. On the other hand, minimumUpdateTime is the minimum time interval between each location update. desiredAccuracy relates to the level of accuracy of the coordinates. Accuracy.high is the finest location available, so it consumes more battery. When the success callback is fired, it's going to update the map and trigger the client-location-changed event. The current location is passed to this so whoever subscribes to that same event will get updates in real-time:

methods: {
    onMapReady() {
        // ..
    },

    startSharingLocation() {
        dialogs.alert(`Your unique ID is: ${this.ownID}`);
        this.isSharingLocation = true;

        this.watchID = geolocation.watchLocation(
            (loc) => {
                if (loc) {
                    this.updateMap(loc);
                    this.ownChannel.trigger('client-location-changed', {
                        latitude: loc.latitude,
                        longitude: loc.longitude
                    });
                }
            },
            (e) => {
                dialogs.alert(e.message);
            },
            {
                updateDistance: 5, // 5 meters
                minimumUpdateTime : 5000, // update every 5 seconds
                desiredAccuracy: Accuracy.high,
            }
        );
    },

    // next: add stopSharingLocation()
}

Next, add the code for stopping the location sharing. This is where we use this.watchID to stop watching the location:

stopSharingLocation() {
    this.isSharingLocation = false;
    geolocation.clearWatch(this.watchID);
},

For users who want to track the location of another user, we ask them to enter the unique ID. From there, we simply subscribe to the channel with that ID and bind to client-location-changed to receive real-time updates:

startTrackingLocation() {
    dialogs.prompt("Enter unique ID", "").then((r) => {

        this.trackingID = r.text;
        this.isTrackingLocation = true;
        this.trackingChannel = this.socket.subscribe(`private-${this.trackingID}`);
        this.trackingChannel.bind('pusher:subscription_succeeded', () => {

            this.trackingChannel.bind('client-location-changed', (loc) => {
                this.updateMap(loc);
            });
        });
    });
},

Lastly, add the code for stopping the location tracking:

stopTrackingLocation() {
    this.socket.unsubscribe(`private-${this.trackingID}`);
    this.isTrackingLocation = false;
},

Running the app

At this point, we're ready to run the app. First, start the server:

node server/index.js

Next, expose the server using ngrok:

./ngrok http 5000

Then, update the app/components/Home.vue file with the ngrok URL:

const SERVER_BASE_URL = 'YOUR NGROK HTTPS URL';

You can run the app either on the emulator or a real device:

tns debug android

However, since the nature of the app requires us to change locations, it's easier if you use an emulator for testing. This way, you can easily change the location by searching for a specific location or pointing to a specific location via a map interface. The Genymotion emulator allows you to do it very easily.

Alternatively, you can also use a fake location app such as Floater on your Android device. This will allow you to spoof the current location and specify a different one via a map interface — though I've had an issue with this method. It seems that it switches the current location and the fake location back and forth, which beats the whole purpose because you can't properly test the functionality.

Conclusion

That's it! In this tutorial, you learned how to create a real-time location tracking app in NativeScript.

Along the way, you learned how to work with the NativeScript Vue template, rendering Google Maps, watching the user's current location, and publishing it in real-time.

As always, we recommend that you protect your JavaScript source code when you're developing commercial or enterprise apps. See our tutorials on protecting Vue and NativeScript.

Accepting payments in React Native

Wern Ancheta — Sat, 10 Aug 2019 13:33:08 +0000

An important aspect when creating an app or website is the ability to accept payments from its customers. Platforms such as the web, Android, and iOS already have well-supported APIs for payment gateways such as Stripe. But what about cross-platform frameworks like React Native? In this tutorial, we’ll be looking at how to accept payments within a React Native app.

Prerequisites

Basic knowledge of React Native is required. Although we’ll be using a bit of PHP, it’s optional because the code will be self-explanatory.

Development environment

You need to have PHP and MySQL installed on your machine. The easiest way to get the development environment is through Laravel Homestead. If you’re on Mac, you can get up and running even faster with Laravel Valet.

You also need a MySQL database manager for creating the database:

DBeaver - Windows, Linux, Mac
Sequel Pro - Mac only

You also need to have an ngrok account for exposing the server to the internet.

Developer accounts

We will be using Stripe to process payments, so a Stripe account is required.

Optionally, you will also need to have the following if you want to use Google Pay and Apple Pay in production:

Google Play developer console account - you can actually use the Tipsi-Stripe library without a developer account if you use the test environment. But if you want to use it in production, you’ll need to have a Google Play developer console account which can accept payments.
Apple developer account - you need this if you want to use Apple Pay with Tipsi-Stripe. At the time of writing this tutorial, there are only a handful of countries in which Sandbox testing for Apple Pay is supported. This means you’ll have to use real credit cards for testing if you’re not living in one of those countries. As this tutorial won’t be covering how to set up Apple Pay on your developer account, be sure to read the Getting Started with Apple Pay guide.

Package versions

The following package versions are used in the app:

React Native 0.57.8
Tipsi-stripe 6.1.2

While the following are used in the backend:

Lumen framework 5.7
Stripe PHP 6.28

To ensure compatibility, start with the versions above before upgrading to the latest versions.

App overview

We’ll create a simple app which displays a product to be bought. The user can then pay for it with the credit card they have added to their Google Account. We will use Google Pay as a means for accepting the payment, and Stripe for processing it. If you’ve previously worked with Stripe for the web, the process is pretty much the same. Tipsi-Stripe provides a way to use either Google Pay, Apple Pay, or its custom React component for accepting the payment details. You will then use any of these methods to generate the token which you will submit to the app’s backend. This token allows you to charge the card added by the user.

Here’s what the app will look like:

You can find the source code on this GitHub repo.

Building the app

Start by creating a new React Native project and installing the dependencies:

react-native init RNPay
cd RNPay
yarn add tipsi-stripe react-native-config axios
react-native link

Once that’s done, add the config for enabling the Google Wallet API in the android/app/src/main/AndroidManifest.xml file. This allows you to use Google Pay within the app:

<application>
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>

Next, update the android/app/build.gradle file and add the path to React Native Config:

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

For iOS, please refer to the documentation:

Next, create a .env file at the root of the project directory and add your Stripe publishable key. If you’re testing, this can be the test credentials provided by Stripe. You can find your API keys here. Be sure to toggle Viewing Test Data if you want your test credentials:

STRIPE_PUBLISHABLE_KEY=YOUR_STRIPE_PUBLISHABLE_KEY

Once that’s done, you’re now ready to work on the code. Start by opening the App.js file and add the following:

import React, { Component } from 'react';
import { View, Alert } from 'react-native';

import stripe from 'tipsi-stripe';
import Config from 'react-native-config';

import ItemBox from './src/components/ItemBox';
import pay from './src/helpers/pay';

stripe.setOptions({
  publishableKey: Config.STRIPE_PUBLISHABLE_KEY,
  androidPayMode: 'test', // test || production
});

The most important part in the above code is the setting of the options for Stripe. The publishableKey is basically the same key as the one you put on your JavaScript files when working on the web. androidPayMode is the mode to be used by Google Pay. test means that the requirements for using it won’t be as tight as when you’re on production. For example, the app doesn’t need to be uploaded in the Google Play Store. Your Google Play console developer account also don’t need to have Google Pay enabled. In fact, you don’t even need a developer account in order to try it out. You can find more info about it here.

Next, initialize the data to be used throughout the app. This includes the user’s access token which is used for authenticating the user’s request when we hit the endpoint for creating a charge. To simplify things we’re simply going to hardcode an existing access token that’s already in the database. I’ll show you how to create the database later on when we get to the backend:

export default class App extends Component {

  constructor(props) {
    super(props);
    this.access_token = "AN EXISTING USER'S ACCESS TOKEN FROM YOUR DB";
    this.currency_code = 'USD'; // the currency to be used for processing the transaction
    // item data
    this.item = {
      title: 'Loop 720',
      price: 1,
      image: require('./src/images/loop720.jpg')
    };
  }

  state = {
    isPaying: false, // whether the user is currently paying for something
    canPay: false // whether the user's device has the ability to pay using Google Pay
  }

  // next: add componentDidMount
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
  }
};

Next, we check if the user’s device can make payments with Google Pay:

async componentDidMount() {
  const device_supported = await stripe.deviceSupportsAndroidPay();
  const can_make_android_pay_payments = await stripe.canMakeAndroidPayPayments();

  if (device_supported && can_make_android_pay_payments) {
    this.setState({
      canPay: true
    });
  }
}

For the app’s UI we’re simply going to render a single item:

render() {
  return (
    <View style={styles.container}>
      <ItemBox
        {...this.item}
        canPay={this.state.canPay}
        isPaying={this.state.isPaying}
        payAction={this.payItem} />
    </View>
  );
}

Here’s the code for the ItemBox component:

// src/components/ItemBox.js
import React, { Component } from 'react';
import { View, Text, Button, ActivityIndicator, Image } from 'react-native';

const ItemBox = ({ title, price, image, canPay, isPaying, payAction }) => {

  return (
    <View>
      <Image
        style={styles.image}
        source={image} />

      <View style={styles.textContainer}>
        <Text style={styles.title}>{title}</Text>
      </View>

      <View style={styles.textContainer}>
        <Text style={styles.price}>${price.toFixed(2)}</Text>
      </View>

      {
        isPaying &&
        <ActivityIndicator size="large" color="#0000ff" />
      }

      <View style={styles.buttonContainer}>
      {
        canPay && !isPaying &&
        <Button
          onPress={payAction}
          title="Buy Now"
          color="#841584"
        />
      }

      {
        !canPay &&
        <View style={styles.alertContainer}>
          <Text style={styles.errorText}>Can't accept payments</Text>
        </View>
      }
      </View>

    </View>
  );

}

export default ItemBox;

const styles = {
  image: {
    width: 170,
    height: 150
  },
  textContainer: {
    alignItems: 'center'
  },
  title: {
    fontSize: 20
  },
  price: {
    fontSize: 23,
    fontWeight: 'bold'
  },
  buttonContainer: {
    margin: 10
  },
  alertContainer: {
    width: 150
  },
  errorText: {
    color: 'red'
  }
};

Back to the App.js file, add the function for paying for the item. This gets executed when the Buy Now button from the ItemBox component is clicked:

// App.js
payItem = async () => {

  this.setState({
    isPaying: true // show loader instead of the button
  });

  const token = await stripe.paymentRequestWithNativePay({
    total_price: this.item.price.toFixed(2),
    currency_code: this.currency_code,
    line_items: [
      {
        currency_code: this.currency_code,
        description: this.item.title,
        total_price: this.item.price.toFixed(2),
        unit_price: this.item.price.toFixed(2),
        quantity: '1',
      }
    ]
  });

  // next: add code for committing the charge into the server
}

If you want to capture shipping information, you need to set the shipping_address_required option and set its value to true. Optionally, you can also set the shipping_countries to an array of country codes to limit the countries you want to ship to:

shipping_countries: ['US', 'PH', 'SG']

Here’s what the value of token looks like when the request is successful:

{  
   "card":{  
      "currency":null,
      "fingerprint":"xxxxxxxxxx",
      "funding":"credit",
      "addressZip":null,
      "brand":"MasterCard",
      "cardId":"card_xxxxxxxxxxx",
      "number":null,
      "addressState":null,
      "country":"US",
      "cvc":null,
      "expMonth":7,
      "addressLine1":null,
      "expYear":3040,
      "addressCountry":null,
      "name":"Wern Ancheta",
      "last4":"11xx",
      "addressLine2":null,
      "addressCity":null
   },
   "created":1546997773000,
   "used":false,
   "extra":{  
      "shippingContact":{  
         "postalCode":"2500",
         "name":"Wern Ancheta",
         "locality":"San Juan",
         "countryCode":"PH",
         "administrativeArea":"La Union",
         "address1":"Forest street"
      },
      "billingContact":{  

      }
   },
   "livemode":false,
   "tokenId":"tok_xxxxxxxx"
}

For more examples, please refer to the example folder in Tipsi-Stripe’s GitHub repo. And for more info on how to use them, check out the following:

paymentRequestWithNativePay (Android) - uses Android Pay for accepting payments.
paymentRequestWithNativePay (iOS) - uses Apple Pay for accepting payments.
paymentRequestWithCardForm - a ready-made React form for accepting payments.
PaymentCardTextField - use this if you want full control over the styling of the card field.

Do note that if you plan on using the paymentRequestWithNativePay method, you have to first determine the platform the app is running on because the options you need to pass to the method will differ based on the platform. This is one advantage of the paymentRequestWithCardForm because of its platform-agnostic API.

Next, send the request for creating a charge to the server:

const response = await pay(this.item.price, this.item.title, this.access_token, token.tokenId);
if (response) {
  Alert.alert("Done!", "Payment successful");
} else {
  Alert.alert("Error occurred", "Something went wrong while processing payment. Please try again.");
}

this.setState({
  isPaying: false // show the Buy Now button again
});

Next, create a src/helpers/pay.js file and add the following. This sends a POST request to the server which includes the relevant details for the payment transaction:

import axios from 'axios';

const endpoint = 'https://YOUR_NGROK_URL/charge';

const pay = async (amount, description, access_token, token_id) => {
  const data = {
    'amount': amount,
    'description': description,
    'access_token': access_token,
    'token_id': token_id // the token generated by Stripe
  };

  const headers = {
    'Content-Type': 'application/json',
  };

  let response = false;
  try {
    let response_data = await axios.post(endpoint, data, { headers });
    return true;
  } catch (e) {
    console.log('server error: ', e);
  }

  return response;
}

export default pay;

In the above code, we’re only sending four pieces of data to the server. But you can actually send more if you like. Note that you can actually fetch the same data returned by stripe.paymentRequestWithNativePay method call in the server by making a request to the Stripe API. This means you don’t actually need to submit things like the shipping address or the customer’s name in your request. So most likely, the additional data you submit here will be specific to your application.

Add the backend code

This part assumes that you’ve already set up your machine with either Laravel Homestead or Laravel Valet. This will give you the composer command which is used below to generate a new Lumen project:

composer create-project --prefer-dist laravel/lumen RNPayBackend

If you can’t run composer globally, be sure to move it to your local bin folder or add it to your PATH.

Next, navigate inside the generated RNPayBackend directory and add the database config:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=rnpay
DB_USERNAME=your_username
DB_PASSWORD=your_password

The above config assumes that you have already created a database using a database manager of your choice. So be sure to create one with the same name as the value given to DB_DATABASE.

Also, add your Stripe secret key to the .env file:

STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY

Next, create a new database migration file. These files allow you to write some code for updating the database structure:

php artisan make:migration create_users_table

Navigate inside the database/migrations directory and you will see the generated file. Add the following code to it:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('access_token'); // the user's access token
            $table->string('stripe_customer_id')->nullable();
            $table->timestamps(); // created_at and updated_at timestamp fields
        });
    }

    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Migrate the database using the new file. This creates a users table with the fields you specified above:

php artisan migrate

Next, access the database using a MySQL database manager and add a dummy data in the users table. Leave the stripe_customer_id as blank and copy the access_token to the App.js file.

Next, install the Stripe PHP library:

composer require stripe/stripe-php

While that’s doing its thing, update the bootstrap/app.php file and uncomment the following line. This enables us to use Facades. In simple terms, Facades are easy to remember class names which allow us to access underlying functionality such as logging or fetching data from the database:

$app->withFacades();

Next, add the route for processing payments to the routes/web.php file. This is the endpoint that we’re hitting in the app earlier. This uses a controller to process the request:

$router->post('/charge', 'PaymentController@createCharge');

Create the controller at app/Http/Controllers/PaymentController.php and add the following:

<?php

namespace App\Http\Controllers;
use DB; // for talking to the database
use Illuminate\Support\Facades\Log; // for logging
use Illuminate\Http\Request; // for getting request data

class PaymentController extends Controller
{

  public function __construct() {
    \Stripe\Stripe::setApiKey(getenv('STRIPE_SECRET_KEY'));
  }

  // next: add code for creating a charge
}

In the above code, we’ve added a __construct method. This sets the Stripe API key that we’re going to use. This gets executed everytime any of the methods in the PaymentController gets called.

Next, add the method for creating a charge. This gets executed every time a POST request is made to the /charge route. Here we pass the data which came from the app to Stripe’s API method for creating a charge. If the charge is successful, we return the success response to the app:

public function createCharge(Request $request) {

  // get the data that was passed from the app  
  $amount = (int) $request->input('amount') * 100; // amount should be in cents
  $description = $request->input('description');
  $access_token = $request->input('access_token');
  $token = $request->input('token_id');

  // get the Stripe customer ID based on the access token
  $user = DB::table('users')
      ->where('access_token', $access_token)
      ->select('id', 'stripe_customer_id')
      ->first();

  // construct the data required by Stripe for creating a charge
  $payment = [
    'amount' => $amount,
    'currency' => 'usd',
    'description' => $description,
    'customer' => $user->stripe_customer_id
  ];

  if (empty($user->stripe_customer_id)) {
    // next: add code for creating a Stripe customer
  }

  try {
    $charge = \Stripe\Charge::create($payment);
    return ['status' => 'ok']; // if the charge was successful
  } catch (\Exception $e) {
    Log::info("Cannot create charge for Stripe customer: " . $user->id);
  }

  return ['status' => 'not_ok']; // if the charge wasn't successful
}

If there’s no Stripe customer ID associated with the user, it means that a Stripe customer hasn’t been created for the user yet. So to associate a customer with the provided payment info, we need to make a separate request to the Stripe API to create a customer. This is a necessary step for associating a payment from a specific customer. Even though the Stripe API allows you to just pass the $token_id when creating a charge, it isn’t really recommended. Especially if you expect to receive payments from the same person in the future:

try {
  $customer = \Stripe\Customer::create([
    "source" => $token // the payment token received from the app
  ]);

  // update the user to include the Stripe customer ID
  DB::table('users')
    ->where('access_token', $access_token)
    ->update([
      'stripe_customer_id' => $customer->id
    ]);

  $payment['customer'] = $customer->id; // assign the ID of the newly created customer to the payment
} catch (\Exception $e) {
  Log::info("Cannot create Stripe customer for user: " . $user->id);
}

Lastly, expose the server to the internet using ngrok. If you use Laravel Valet, first you have to change the default top-level domain to be the same as the one we’re using:

valet domain test

Next, navigate to the root of RNPayBackend and execute valet park. This will register rnpaybackend.test on your local host which you can then expose it using ngrok:

ngrok http -host-header=rewrite rnpaybackend.test:80

If you used Laravel Homestead, you can log in to your Homestead machine via vagrant ssh and run share rnpay.test. This will use ngrok to expose the server.

Once that’s done, you can update the src/helpers/pay.js file in the app with the HTTPS URL from ngrok.

At this point, the app should be fully functional. Go ahead and run it:

react-native run-android

Conclusion

That’s it! In this tutorial, you learned how to use the Tipsi-Stripe library and the Lumen PHP framework to accept payments within a React Native app.

You can find the full source code on this GitHub repo.

Originally published on the Pusher Tutorial Hub

Creating offline-friendly React Native apps - Part 2: Real-world example

Wern Ancheta — Sat, 27 Jul 2019 13:32:51 +0000

Picking up from part one of this series, we will now apply the things we’ve learned into a practical scenario. In this tutorial, we will update an existing chat app so it becomes offline-friendly.

Prerequisites

Basic knowledge of React Native is required. We’ll also be using Redux and Redux Saga, so a bit of familiarity with those is helpful as well.

We will use some of the packages and techniques used in part one of this series. But since we will be updating an existing app anyway, I recommend that you initialize a new React Native project and copy the files from the starter-chat branch instead. Then you can install the packages with yarn install and set them up individually. All the packages for the starter chat can be linked using the react-native link command.

The chat app uses Chatkit, so you’ll also need Chatkit account. If you’re not familiar with Chatkit, be sure to read the quick start.

App overview

The app that we’re going to update is a chat app. It authenticates the user via a Node.js server. Once authenticated, the user will see a list of all the other users who have logged in with the app. From this screen, the user can select the person they want to chat with:

They can then begin chatting. The app also accepts image attachments for each message:

Here’s an overview of the things we’re going to implement to make the app more offline friendly:

Offline authentication - the app communicates to a server to authenticate the user every time they open the app. We’ll update it so when the user is offline, it will authenticate the user via a passcode.
Offline message composition - the app doesn’t allow the user to type a message when they’re offline. We’ll update it so they could compose their message and commit it even if they’re offline. And once they go online, the messages will be sent automatically.
Local storage for recent messages - the app doesn’t show any messages when the user is offline. We’ll update it so it locally stores the recent messages with the last person they chatted with.

You can find the source code used in this tutorial on its GitHub repo. The chat app we will update is on the starter-chat branch, while the final output for this tutorial is on the offline-friendly-chat branch.

Setting things up

Before we proceed, we need to install a few packages first:

yarn add react-native-offline redux-persist redux-saga

React Native Offline allows us to easily implement offline capabilities in the app. While Redux Persist allows us to persist the Redux store so its data can be accessed while the user is offline.

Redux Saga allows us to create a watcher for internet connectivity changes. This allows us to implement things like banners to notify the user when they go offline.

Note that if you’re following this tutorial some time in the future, there might be breaking changes in some of the packages. To ensure the app works, it’s recommended that you install the same package versions indicated in the package.json file.

Once the packages are installed, link them:

react-native link

Then add the necessary permissions to the android/app/src/main/AndroidManifest.xml file. The first two are for the React Native Image Picker and the last one is for React Native Offline:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Next, install the packages required by the server:

cd server
yarn install

Still inside the server directory, update the server.js file with your Chatkit instance locator ID and Chatkit secret. Omit the v1:us1: from the instance locator ID:

const instance_locator_id = "YOUR INSTANCE LOCATOR ID";
const chatkit_secret = "YOUR CHATKIT SECRET";

You can run the server once that’s done:

node server.js

Use ngrok to expose it to the internet. You can find your ngrok auth token on your dashboard:

./ngrok authtoken YOUR_NGROK_AUTH_TOKEN
./ngrok http 3000

Navigate back to the root of the React Native project and update the src/helpers/loginUser.js file with your Chatkit instance locator ID:

const instanceLocatorId = "YOUR INSTANCE LOCATOR ID";

Lastly, update the src/screens/LoginScreen.js file with your Ngrok URL:

const CHAT_SERVER = "https://YOUR_NGROK_URL/users";

At this point, you can now run the app:

react-native run-android

Updating the app

Open the Root.js file and import the following. These will allow you to persist the Redux store and listen for internet connectivity changes:

// Root.js
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { PersistGate } from "redux-persist/integration/react";

import createSagaMiddleware from "redux-saga";

import {
  withNetworkConnectivity,
  reducer as network,
  createNetworkMiddleware
} from "react-native-offline";

import ChatReducer from "./src/reducers/ChatReducer";

import { watcherSaga } from "./src/sagas";

const sagaMiddleware = createSagaMiddleware();
const networkMiddleware = createNetworkMiddleware();

Next, add the Redux Persist config. Here we’re blacklisting the network key (this comes from React Native Offline), as well as the chat key which comes from the Chat reducer. Blacklisting allows us to exclude specific data from being persisted locally. This means that it will still use the initial state returned by the reducer. This makes sense for the network key because we expect it to change values when the user goes offline or online. But for chat, we only need to exclude isNetworkBannerVisible. That’s why we’re using nested persist to specify which properties under the blacklisted key actually gets excluded:

const persistConfig = {
  key: "root",
  storage,
  blacklist: ["network", "chat"]
};

const chatPersistConfig = {
  key: "chat",
  storage: storage,
  blacklist: ["isNetworkBannerVisible"] // exclude chat.isNetworkBannerVisible
};

const rootReducer = combineReducers({
  chat: persistReducer(chatPersistConfig, ChatReducer),
  network
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

Next, create the persisted version of the store and run the watcher saga:

const store = createStore(
  persistedReducer,
  applyMiddleware(networkMiddleware, sagaMiddleware)
);
let persistor = persistStore(store);

sagaMiddleware.run(watcherSaga);

Next, wrap the RootStack component with withNetworkConnectivity. This makes the network key available in the store. After that, we can wrap the resulting component with React Navigation’s createAppContainer as usual:

const App = withNetworkConnectivity({
  withRedux: true
})(RootStack);

const AppContainer = createAppContainer(App);

Lastly, wrap the AppContainer with the PersistGate component. This allows us to use the persisted store and delay the rendering of the app’s UI until the persisted state is retrieved. The loading prop accepts the component which you want to display while it’s retrieving the data. But in this case, we’ve passed null because the retrieval happens almost instantly:

class Router extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppContainer />
        </PersistGate>
      </Provider>
    );
  }
}

Here’s the code for the watcher saga for listening for network status changes:

// sagas/index.js
import { networkEventsListenerSaga } from "react-native-offline";
import { fork, all } from "redux-saga/effects";

export function* watcherSaga() {
  yield all([
    fork(networkEventsListenerSaga, {
      timeout: 5000, // 5-second timeout for retrieving the network status
      checkConnectionInterval: 1000 // check network status every 1 second
    })
  ]);
}

Login screen

Now we’re ready to update the Login screen. This is where we’ll add a passcode so we can authenticate the user with it when they are offline. This means that we’re basically making an assumption that the last user who logged in is the one that’s logging in. We’ll also be adding the code for displaying a banner when the user is offline.

The first thing we need is to install the React Native Sensitive Info package. This will allow us to locally store the passcode securely:

yarn add react-native-sensitive-info
react-native link react-native-sensitive-info

Next, open the code for the Login screen and import the necessary package and component:

// src/screens/LoginScreen.js
import { connect } from "react-redux";

import SInfo from "react-native-sensitive-info";
import NetworkStatusBanner from "../components/NetworkStatusBanner";

state = {
  passcode: "" // add this to existing state
};

Next, update the render method to show the network status banner. isNetworkBannerVisible decides whether the banner is visible or not. Its value is only true if it meets a certain condition which we’ll take a look at later in the Chat reducer file:

// src/screens/LoginScreen.js
render() {
  const { isConnected, isNetworkBannerVisible } = this.props;
  return (
    <View style={styles.wrapper}>
      <NetworkStatusBanner
        isConnected={isConnected}
        isVisible={isNetworkBannerVisible}
      />
      <View style={styles.container}>
        <View style={styles.main}>
          <View style={styles.fieldContainer}>
            {
              isConnected &&
              <View>
                /* current username field code */
              </View>
            }

            <Text style={styles.label}>Enter your passcode</Text>
            <TextInput
              style={styles.textInput}
              onChangeText={passcode => this.setState({ passcode })}
              maxLength={6}
              secureTextEntry={true}
              value={this.state.passcode}
            />

            {!this.state.enteredChat && (
              /* current login button code */
            )}

            {this.state.enteredChat && (
              /* current loading text */
            )}
          </View>
        </View>
      </View>
    </View>
  );
}

Next, add the code for logging in the user when they’re offline. As you can see from the starter code, we’re leveraging try..catch statements a lot. This allows the app to gracefully handle errors that are brought about with the user being offline. So we can simply add the code for dealing with offline users at the very bottom of the enterChat method. Here, we check whether the passcode entered is the same as the passcode that was previously stored. If it’s the same then we navigate the user to the Users screen:

// src/screens/LoginScreen.js
enterChat = async () => {
  const { user, isConnected } = this.props;
  const { username, passcode } = this.state;

  // add these at the bottom
  if (!isConnected) {
    const stored_passcode = await SInfo.getItem('passcode', {});
    if (stored_passcode == passcode) {
      this.props.navigation.navigate("Users", {
        currentUser: user // very important (contains: id and username)
      });
    } else {
      Alert.alert("Incorrect Passcode", "Please try again.");
    }

    this.setState({
      passcode: "",
      enteredChat: false
    });  
  }
}

Note that the crucial part in the above code is the currentUser nav param. If the user is online, this is a live Chatkit user instance. This allows you to call methods for joining or leaving rooms and sending or receiving messages. But if the user is offline, and you try to call those methods, the app will return an error, which can’t be handled gracefully using try..catch. That’s why we’re using the current user object so the errors can be handled with try..catch.

Next, update mapStateToProps to return the props we need:

// src/screens/LoginScreen.js
const mapStateToProps = ({ network, chat }) => {
  const { isConnected } = network;
  const { user, isNetworkBannerVisible } = chat;
  return {
    isConnected,
    user,
    isNetworkBannerVisible
  };
};

export default connect(
  mapStateToProps,
  null
)(LoginScreen);

Network status banner

Here’s the code for the network status banner. This will display both the offline and online status, but as you’ve seen earlier, we’re only using it to display a banner when the user is offline:

// src/components/NetworkStatusBanner.js
import React from "react";
import { View, Text } from "react-native";

const NetworkStatusBanner = ({ isConnected, isVisible }) => {
  if (!isVisible) return null;

  const boxClass = isConnected ? "success" : "danger";
  const boxText = isConnected ? "online" : "offline";
  return (
    <View style={[styles.alertBox, styles[boxClass]]}>
      <Text style={styles.statusText}>you're {boxText}</Text>
    </View>
  );
};

const styles = {
  alertBox: {
    padding: 5
  },
  success: {
    backgroundColor: "#88c717"
  },
  danger: {
    backgroundColor: "#f96161"
  },
  statusText: {
    fontSize: 14,
    color: "#fff",
    alignSelf: "center"
  }
};

export default NetworkStatusBanner;

Chat reducer

The Chat reducer is where we specify how the store will be updated depending on the action and payload received. Since we’re already implementing all of the actions in the app from here, we might as well listen for when the network status changes. This is another part where React Native Offline comes in handy. It provides action types which we can listen to, so we know exactly when the network status changes. network.isConnected is the current network status, while action.payload is the new network status. Both are boolean values representing whether the user is online (true) or offline (false):

// src/reducers/ChatReducer.js
import { offlineActionTypes, reducer as network } from "react-native-offline";

const INITIAL_STATE = {
  isNetworkBannerVisible: false // add this
  /* previous state initialization */
}

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // add these
    case offlineActionTypes.CONNECTION_CHANGE:

    // only make the network banner visible when the network status changes to offline
      if (network.isConnected != action.payload && !action.payload) {
        return { ...state, isNetworkBannerVisible: true };
      } else {
        return { ...state, isNetworkBannerVisible: false };
      }  

    /* previous code */
  }
}

Users screen

The Users screen is where the list of all the users who have logged in with the app are displayed. We’ll update it so it also displays the network status banner. We’ll also add the code to re-initialize the Chatkit user instance every time the user goes back online.

Start by importing the following:

// src/screens/UsersScreen.js
import NetworkStatusBanner from "../components/NetworkStatusBanner";
import loginUser from '../helpers/loginUser';

Next, add the network status banner:

render() {
  const { isConnected, isNetworkBannerVisible } = this.props;
  return (
    <View style={styles.container}>
      <NetworkStatusBanner
        isConnected={isConnected}
        isVisible={isNetworkBannerVisible}
      />
      { this.renderUsers() }
    </View>
  );
}

When the component is updated, we check whether the isConnected props was updated from “offline” to “online”. If it did, we re-initialize the Chatkit user instance and re-subscribe the user to the presence room:

async componentDidUpdate (prevProps, prevState) {
  const { isConnected, navigation } = this.props;
  const currentUser = navigation.getParam('currentUser');

  if (isConnected && prevProps.isConnected != isConnected) {
    this.currentUser = await loginUser(currentUser.id);
    this.subscribeToPresenceRoom();
  }
}

Don’t forget to pass the props:

const mapStateToProps = ({ chat, network }) => {
  const { users, isNetworkBannerVisible } = chat;
  const { isConnected } = network;

  return {
    isConnected,
    isNetworkBannerVisible,
    users
  };
};

/* mapDispatchToProps code */

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UsersScreen);

Chat screen

Now we’re ready to update the Chat screen. As mentioned in the beginning of the tutorial, we’ll update it so it allows the user to type a message and send it while they’re offline. The messages sent will then be sent automatically when the user goes online. Aside from that, we’ll also locally persist the recent messages from the last person the user chatted with.

Start by importing the things we need:

// src/screens/ChatScreen.js
import NetworkStatusBanner from "../components/NetworkStatusBanner";
import loginUser from '../helpers/loginUser';

Next, update the code for initializing the chat room. Currently, we’re only using it to disconnect the user from Chatkit, get the rooms they can join and subscribe to it if it has the same name as the current room (otherwise, we create it). This is also where we empty the messages if the user is online because subscribing to a room will automatically load the 11 most recent messages sent in the room.

While the user is offline, we allow them to send messages. And when they go online, we need to send them automatically. The only problem is we have to reset the messages array if the user is online. This will also delete all the messages that haven’t actually been sent yet. So to solve this problem, we extract the messages that were sent while the user is offline so we can send them later:

initializeChatRoom = async (came_back_online) => { // add came_back_online param

  const { isConnected, room, messages, setMessages, navigation } = this.props;

  // add this
  if (!came_back_online) {
    this.currentUser = navigation.getParam("currentUser");
  }

  this.roomName = navigation.getParam("roomName");

  // add these
  if (isConnected) {
    // extract the messages sent by the current user while they're offline
    this.unsent_messages = messages.filter((msg) => {
      return msg.not_sent;
    });
    setMessages([]);
  }

  /* existing code */
  try {
    // ...
  } catch (err) {
    // ...
  }
}

Next, don’t forget to initialize the value for the unsent_messages:

constructor(props) {
  super(props);
  this.unsent_messages = [];
}

Next, update the render method so it displays the network status banner:

render() {
  const { isConnected, isNetworkBannerVisible, room, navigation, messages } = this.props;
  const roomName = navigation.getParam("roomName");

  return (
    <View style={styles.container}>
      <NetworkStatusBanner
        isConnected={isConnected}
        isVisible={isNetworkBannerVisible}
      />

      {(this.state.is_loading || !this.state.is_initialized) && (
        /* ActivityIndicator code */
      )}

      {this.state.is_initialized && roomName == room.name && (
        /* GiftedChat code */
      )}
    </View>
  );
}

Next, update the code for subscribing the current user to the chat room. Once the user has subscribed to the room, that’s the time where we want to send the unsent messages:

subscribeToRoom = async roomId => {
  const { setCurrentRoom, navigation } = this.props;
  const roomName = navigation.getParam("roomName");

  /* code for setting current room */

  /* code for subscribing to room */
  try {
    // ...
  } catch (e) {
   // ...
  }

  // add these
  try {
    this.unsent_messages.reverse(); // because messages are ordered from most to least recent
    for(msg of this.unsent_messages){
      await this.sendMessage(msg);
    }
    this.unsent_messages = [];
  } catch (e) {
    console.log("error sending unsent messages", e);
  }
};

Next, update the sendMessage method so it includes the attachment for messages that were sent while the user was offline. If the user is offline, we need to add the attachment property to the message because it doesn’t get sent immediately. This will make the attachment available to the message by the time it actually gets sent:

sendMessage = async (message) => {

  const { room, isConnected, putMessage } = this.props;

  /* start of code for sending message when user is online */

  if (this.attachment) {
    msg.attachment = this.getAttachment();
  }

  // add this right below the line above
  if (message.attachment) {
    msg.attachment = message.attachment;
  }

  /* end of code for sending message when user is online */

  // add these
  if (!isConnected) {
    message.not_sent = true;
    if (this.attachment) {
      message.attachment = this.getAttachment();
      message.image = this.attachment.uri;
    }

    putMessage(message);
    this.attachment = null;

    this.setState({
      is_sending: false
    });
  }
}

When the component is updated, we re-initialize the Chatkit user instance and the chat room. Note that we’re supplying true as an argument to initializeChatRoom to specify that the currentUser passed as a nav param shouldn’t be used as the value for this.currentUser (see initializeChatRoom method):

async componentDidUpdate (prevProps, prevState) {
  const { isConnected, user, navigation } = this.props;
  const currentUser = navigation.getParam('currentUser');

  if (isConnected && prevProps.isConnected != isConnected) {
    this.currentUser = await loginUser(currentUser.id);
    this.initializeChatRoom(true);
  } else if (!isConnected  && prevProps.isConnected != isConnected) {
    this.currentUser = user; // plain user object with id and username
  }
}

Lastly, don’t forget to update mapStateToProps so it returns all the props that we need:

const mapStateToProps = ({ chat, network }) => {
  const { isNetworkBannerVisible, user, room, messages } = chat;
  const { isConnected } = network;
  return {
    isConnected,
    isNetworkBannerVisible,
    user,
    room,
    messages
  };
};

At this point, the app should work even while the user is offline.

Conclusion

That’s it! In this tutorial, you learned how to apply the concepts and tips discussed in part one in a practical scenario. Specifically, you learned how to use the tools provided by React Native Offline and Redux Persist to make an existing chat app offline-friendly.

You can find the source code used in this tutorial on its GitHub repo.

Originally published on the Pusher tutorial hub.

Creating offline-friendly React Native apps - Part 1: General tips

Wern Ancheta — Tue, 23 Jul 2019 14:55:46 +0000

Most of the apps listed in the app store today require an internet connection in order to work properly. But the problem is we don’t really know if the user’s device is connected to the internet 24/7. That’s why we need to consider making our apps as offline-friendly as possible. This is to ensure the best possible experience for the user even if they’re not connected to the internet.

In this tutorial, we’re going to explore some of the techniques to make your React Native apps work offline. That’s not to say that internet connection should be considered optional in all apps. For example, when the user is authenticating for a sensitive action within the app. In this case, the user needs to be online in order to authenticate with the server. That way, you can protect their account from the wrong hands.

Specifically, we’re going to talk about the following:

General tips on what to avoid and what to do if the user is offline.
How to inform the user that they are offline.
How to cache resources from the server.
How to treat online connectivity as a second-class citizen.

You can view the source code used in this tutorial on its GitHub repo.

Prerequisites

Basic knowledge of React Native is required. We’ll also be using Redux and Redux Saga, so a bit of familiarity with those is helpful as well.

This tutorial assumes that you already have a working React Native development environment. If you’re using Expo, this tutorial also includes a few tips that are specific to Expo users. But for the most part, it assumes you’re developing React Native apps via the “native” way.

For your reference, the following versions are used:

Node 11.2.0
Yarn 1.7.0
React Native CLI 2.0.1
React Native 0.57.6

We will be using third-party React Native packages as well. Refer to the package.json file in the GitHub repo if you want to know the specific versions used.

What to avoid when the user is offline

Sometimes, it’s already annoying enough for the user to not have an internet connection. The user might be in the middle of something. They know they had a connection when they opened the app, but suddenly they don’t. They might be in a subway and the connection is choppy, or their prepaid mobile data ran out. We can never really know, that’s why it’s important for the app to be helpful on these occasions.

Here are a few things you need to avoid once when the user goes offline:

Pop-ups and overlays saying they don't have a connection.
Not showing anything at all. Or just showing a loading animation that spins indefinitely.
Only showing errors that they are offline.
Blocking the user from what they are doing. Or not allowing them to do anything at all.
Clearing out what they have already inputted.

What to do when the user is offline

Now that you know the things you need to avoid when the user is offline, it’s time to look at what you can do instead:

When the user goes offline, use a nice graphic to inform them that they went offline. Better yet, use an animation to entertain them if you know they have a connection but the problem is with your server. React Native comes with the NetInfo library to help with this.
Cache data coming from your server, especially the ones that they just accessed. This way they’ll still be able to see the most recent data when they go offline. If you’re using Redux, you can use the redux-persist library. This allows you to persist your Redux store using a storage engine of your choice (for example, AsyncStorage) and use the stored data when the user goes offline. The way it works is that if the network request succeeds, we serve the fresh data and persist it with redux-persist. And if a network request fails, we serve the cached copy (rehydrate) instead.
Cache resources from the server. For images, you can use the react-native-cached-image library.
Use a passcode as an alternative for authenticating the user if they’re offline. You can use the react-native-sensitive-info library to store passcodes and other sensitive data that needs to be available offline.
If the user is trying to navigate to a page that simply isn’t accessible without an internet connection, redirect them to the app’s homepage and inform them that they don’t have a connection. This is so users know which app they're in, and they can still navigate to other pages.

In the coming sections, we’ll look at how you can implement a few of the tips mentioned above.

Inform the user that they are offline

In most cases, simply informing when the user goes offline is very useful. This is especially true if the feature they’re trying to use really requires an internet connection for it to be useful. In this section, we’ll look at how you can implement this in your apps.

React Native comes with a library that determines the online status out of the box, it’s called NetInfo. This library allows you to determine various information about the device’s connection type. It tells you whether the device is connected via wifi or a data plan.

To use NetInfo, you first need to update the AndroidManifest.xml file to include the permission to access the network state:

// android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Next, at the top of your component class, import the NetInfo library:

import { NetInfo } from "react-native";

Inside your component class, initialize the state for storing the user’s online status. We’re setting it to false to assume that the device isn’t online by default. Later, we’ll update its value to true using NetInfo:

state = {
  isConnected: false
};

Next, we listen for the connectionChange event. This is triggered whenever there’s a change in the connectivity of the device. Examples of these changes include: turning wifi on or off, enabling airplane mode, switching to a different wifi hotspot, and connecting via a data plan:

componentDidMount() {
  NetInfo.addEventListener("connectionChange", this.handleConnectionChange);
}

When the connectionChange event is triggered, the following function is executed. From here, we log the response object so we know the data that we’re working with. After that, we determine if the device is actually connected or not. This returns a boolean value which tells you exactly that, so we can directly use that value to update the state:

handleConnectionChange = connectionInfo => {
  console.log("connection info: ", connectionInfo);
  NetInfo.isConnected.fetch().then(isConnected => {
    this.setState({ isConnected: isConnected });
  });
};

Here’s a sample response object contained in the connectionInfo when the device is connected via wifi:

{
  type: "wifi",
  effectiveType: "unknown"
}

And here’s what it contains if the device is offline:

{
  type: "none",
  effectiveType: "unknown"
}

Inside the render method, we simply use the value of the isConnected property in the state to show a different background color and text for the alert box:

render() {
  const boxClass = this.state.isConnected ? "success" : "danger";
  const boxText = this.state.isConnected ? "online" : "offline";

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={[styles.alertBox, styles[boxClass]]}>
        <Text style={styles.statusText}>you're {boxText}</Text>
      </View>
    </ScrollView>
  );
}

Lastly, don’t forget to remove the event listener once the component is unmounted. We don’t really want a listener to be hanging around when the user has already moved on to another screen. Especially one where determining the connectivity is no longer needed:

componentWillUnmount() {
  NetInfo.isConnected.removeEventListener(
    "connectionChange",
    this.handleConnectionChange
  );
}

NetInfo is great at determining network connectivity, but it doesn’t really determine whether that connection can actually access the internet or not. For example, in an airport, subway, restaurant or a coffee shop where a wi-fi hotspot is behind a paywall. In these cases, NetInfo will report that there’s a connection when in fact there isn’t because the user hasn’t gone through the authentication process, advertisements, or the paywall in order to get access to the internet.

To overcome the limitation mentioned above, you can use fetch to ping any server. If the request fails then you know you for sure that the device isn’t connected to the internet.

Alternatively, you can use the react-native-offline library to easily implement this functionality. First, install it with the command below:

yarn add react-native-offline

Under the hood, it also uses NetInfo so you also need to have this on your AndroidManifest.xml file:

// android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Once installed, all you have to do is import it and export your component like so:

import { withNetworkConnectivity } from "react-native-offline";
export default withNetworkConnectivity()(OnlineStatusLib);

This gives you access to the isConnected prop inside your component:

render() {
  const { isConnected } = this.props;
  const boxClass = isConnected ? "success" : "danger";
  const boxText = isConnected ? "online" : "offline";

  return (
    <View style={[styles.alertBox, styles[boxClass]]}>
      <Text style={styles.statusText}>you're {boxText}</Text>
    </View>
  );
}

By default, it already pings Google. So even if the user is connected to a network without an internet connection, it will still fail, so isConnected becomes false.

Cache resources from the server

Informing the user that they’re offline is just the first step in creating an offline-friendly app. The second step is caching resources from the server whenever there’s an internet connection. This enables the user to still be able to view some of the content that has been previously loaded while they are offline.

For most apps, the only resource it needs to cache are the images, so we’ll limit our scope to that.

To cache images in React Native, you can use the react-native-cached-image package. You can install it with the following command:

yarn add react-native-cached-image

Once installed, it gives you access to the following:

ImageCacheProvider
CachedImage
ImageCacheManager

Most of the time, you’ll only be working with ImageCacheProvider and CachedImage. ImageCacheProvider is the top-level component which exposes the caching functionality to the CachedImage component. This component replaces the Image component provided by React Native, it also exposes the same API as the Image component:

import {
  CachedImage,
  ImageCacheProvider,
  ImageCacheManager
} from "react-native-cached-image";

Here’s how to use it:

const { images } = this.props; // images is an array of objects containing the image data
var urls = images.map(img => {
  return img.url; // URL of the image (example: https://i.imgur.com/aaJYTRw.jpg)
});

return (
  <ImageCacheProvider
    urlsToPreload={urls}
  >
    <View>{this.renderImages(images)}</View>
  </ImageCacheProvider>
);

Here’s the renderImages function. Note that we’re using the CachedImage component instead of the Image component. In the example below, img.url still contains the original URL, but when the CachedImage component is used, it returns the cached version of the file instead:

renderImages = images => {
  return images.map(img => {
    const uri = img.url;
    return (
      <View style={styles.imageContainer} key={img.id}>
        <CachedImage source={{ uri: uri }} style={styles.image} />
      </View>
    );
  });
};

If you want to manage what’s in the cache, you can use the ImageCacheManager. This allows you to manually download a specific URL into the cache, clear the cache, and get a list of files stored in the cache. Here’s an example of how to get the list of cached files:

const ImageManager = ImageCacheManager({});

ImageManager.getCacheInfo().then(res => {
  console.log("files: ", res.files);
});

Here’s what a single file object looks like:

{  
   "lastModified":1543325588000,
   "size":196551,
   "type":"file",
   "path":"/data/user/0/com.rnoffline/cache/imagesCacheDir/i_imgur_com_bfc5362b31e0f21ee11ac48c03a3d7e4c231bd27/02f23888f180ea23470dbafd4f87da2b3e80e5d0.jpg",
   "filename":"02f23888f180ea23470dbafd4f87da2b3e80e5d0.jpg"
}

If you’re using Expo, the equivalent of the package we used above is react-native-expo-image-cache. You can install it with the following command:

yarn add react-native-expo-image-cache

Once installed, you can use it through the Image component that it provides. This component automatically caches the image which you supply to it, then it uses the cached copy to render the image:

import { Image, CacheManager } from "react-native-expo-image-cache";

const uri = "https://i.imgur.com/Ru1qOAB.jpg";
<Image {...{ uri }} style={styles.image} />

If you want to access the actual path to the cached image, you can use the following code:

CacheManager.get(uri)
    .getPath()
    .then(path => {
      console.log(path); // sample path: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540wernancheta%252FRNOfflineTips/expo-image-cache/edf3678403b4259059e28e4ff650eae40e9128a7.jpg
    });

Treat internet connection as a second-class citizen

The last step is to treat internet connection as a second-class citizen. For general purpose apps, being online should be considered optional. Examples include photo-sharing, project management, and note-taking apps. Users should still be able to use these kinds of apps for their intended purposes even when they’re offline. For example, in a photo-sharing app, users should still be able to select a photo to upload. And once they go online, the app will automatically upload the photo for them.

An exception to this is when your app deals with highly sensitive data, and you need to authenticate the user for most of the actions that they do within the app. If that’s the case, then being online should be a requirement. The same is also true for realtime apps like chat apps, video streaming apps, and multi-player games. The whole idea of those apps is being connected to the internet to perform their intended tasks.

To give you an example of how to implement this in React Native, we’ll be using the redux-persist library. We’ll add it to a pre-coded app so it locally persists data which was fetched from a server. We then display this persisted data when the user goes offline.

First, clone the project repo and switch to the starter branch:

git clone https://github.com/anchetaWern/RNOffline.git
cd RNOffline
git checkout starter
yarn install

Next, install redux-persist:

yarn add redux-persist

The app that you just cloned makes a request to the PokeAPI to get the data of a random Pokemon. Currently, it simply returns an error if the user is offline when they trigger a fetch. We want to update this so that it lets the user load the data of the last Pokemon that was loaded instead.

Open the src/screens/RehydrateScreen.js file and import the redux-persist components:

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { PersistGate } from "redux-persist/integration/react";

Here’s what each component does:

persistStore - for persisting the store.
persistReducer - for enhancing the reducer so it works with redux-persist. This allows you to specify options like the storage to use, state reconciler, and whitelist or blacklist specific data from being persisted.
storage - where redux-persist will store your Redux store. By default, this uses AsyncStorage.
PersistGate - delays UI rendering until the persisted data has been retrieved from local storage and loaded into the store.

To use redux-persist, call persistReducer and specify the options and the reducer that you want to use. The sample app that we’re working with already uses Redux, so all we have to do is supply the reducer that it already uses:

// src/screens/RehydrateScreen.js
const persistConfig = {
  key: "root", // name of the key for storing the data
  storage // storage to use. defaults to AsyncStorage
};

const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(persistedReducer, applyMiddleware(sagaMiddleware));
let persistor = persistStore(store);

Next, in your render method, you can supply your store like usual. But this time, you can optionally use the PersistGate component. This allows you to specify the component to display while redux-persist is retrieving the data from the local storage. In this case, we simply specified null because we don’t really have much data to retrieve so it loads almost instantly:

// src/screens/RehydrateScreen.js
render() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PokemonLoader />
      </PersistGate>
    </Provider>
  );
}

Next, update the PokemonLoader component to include an additional message and a button to allow the user to retrieve the last Pokemon that was loaded before they went offline:

// src/components/PokemonLoader.js
{error && (
  <View>
    <View style={styles.smallTextContainer}>
      <Text style={styles.errorText}>Something went wrong</Text>
      <Text>Would you like to view the last Pokemon instead?</Text>
    </View>
    <Button onPress={this.rehydrate} title="Yes" color="#841584" />
  </View>
)}

When the button is clicked, we execute a method which dispatches the action for restoring the data of the previous Pokemon:

rehydrate = () => {
  this.props.requestPersistedPokemon();
};

Update mapDispatchToProps to dispatch the action:

const mapDispatchToProps = dispatch => {
  return {
    // the rest of the action creators here...
    requestPersistedPokemon: () => dispatch({ type: "API_CALL_RESTORE" }) // add this
  };
};

Lastly, update the reducer to handle the new action type API_CALL_RESTORE. This removes the error from the state. This way, the last Pokemon that was loaded via API_CALL_SUCCESS is restored. The important thing to note here is that we’re not clearing out the pokemon data when API_CALL_FAILURE is called. This way, the last Pokemon is always persisted in local storage even if an error occurs:

// src/redux/index.js

// the rest of your action types here..
const API_CALL_RESTORE = "API_CALL_RESTORE";

export function reducer(state = initialState, action) {
  switch (action.type) {
    // the rest of the reducers here...

    case API_CALL_SUCCESS:
      return { ...state, fetching: false, pokemon: action.pokemon };
    case API_CALL_FAILURE:
      return { ...state, fetching: false, error: action.error };

    // add this  
    case API_CALL_RESTORE:
      return { ...state, fetching: false, error: null };
    default:
      return state;
  }
}

Conclusion

That’s it! In this tutorial, you learned some tips on how you can make React Native apps offline-friendly. Specifically, you learned how to inform the user if they go offline, caching images from the server, and persisting data locally so it can be accessed when the user goes offline.

Stay tuned for part two where you will learn how to apply the concepts we’ve learned in a real-world scenario.

You can find the source code used in this tutorial on its GitHub repo.

Originally published on the Pusher tutorial hub

Adding animations to your React Native app - Part 3: Gesture animations

Wern Ancheta — Mon, 15 Jul 2019 00:27:10 +0000

Welcome to the final part of a three-part series on adding animations to your React Native app. In this part, we’ll be taking a look at how you can respond to the user’s gestures and animate the components involved in the interaction.

Prerequisites

To follow this tutorial, you need to know the basics of React and React Native.

Going through the previous parts of this series will be helpful but not required. Though this tutorial assumes that you know how to implement basic animations in React Native. Things like scale, rotation, and sequence animations. We will be applying those same concepts when implementing gesture animations.

What you’ll be building

In this part of the series, we’ll be looking at how to implement different kinds of gestures and how to animate them.

Here’s what you’ll be building:

You can find the full source code for this tutorial on its GitHub repo.

Setting up the project

To follow along, you first need to clone the repo:

git clone https://github.com/anchetaWern/RNRealworldAnimations.git

After that, switch to the part2 branch and install all the dependencies:

cd RNRealworldAnimations
git checkout part2
npm install

Next, initialize the android and ios folders and then link the native modules:

react-native upgrade
react-native link

Once that’s done, you should be able to run the app on your device or emulator:

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

The part2 branch contains the final output of the second part of this series. That’s where we want to start with, as each part is simply building upon the previous part.

Drag and drop

The first gesture that we’re going to implement is drag-and-drop, and looks like this:

Removing the animated header

Before we start implementing this gesture, we first have to remove the animated header that we did on part two of the series. This is because that animation gets in the way when the user begins to drag the cards around.

To remove the animated header, open src/screens/Main.js and remove these lines:

import AnimatedHeader from "../components/AnimatedHeader";

<AnimatedHeader
  title={"Poke-Gallery"}
  nativeScrollY={nativeScrollY}
  onPress={this.shuffleData}
/>;

You can check the specific commit diff for the change above here. Note that there are other changes in there as well, but mind only the changes that have to do with removing the AnimatedHeader component for now. Once that’s done, you should be able to delete the src/components/AnimatedHeader.js file as well.

Next, update src/components/CardList.js and convert the Animated.ScrollView into a regular one. Since we’ll no longer be using the AnimatedHeader, there’s no point in keeping the code for animating it on scroll:

<ScrollView>
  <View style={[styles.scroll_container]}>
    <FlatList ... />
  </View>
</ScrollView>

You can check the specific commit diff here. Note that I’ve added a few props as well, but we’ll get to that later.

Implementing the gesture

The gesture that we’re trying to implement is called “panning”. It is when a user drags their thumb (or any finger) across the screen in order to move things around. In this case, we want the user to be able to drag the cards around so they could drop it inside a specific drop area.

Here’s a break down of what we’ll need to do in order to implement the drag and drop:

Update the Card component to use the React Native’s PanResponder module. This makes it draggable across the screen.
Create a DropArea component which will be used as a dropping point for the cards. The styles of this component will be updated based on whether a card is currently being dragged and whether it’s within the drop area.
Update the main screen to include the DropArea. Then create the functions to be passed as props to the CardList, Card, and DropArea components. This allows us to control them from the main screen.

Before we proceed, let’s take a moment to break down what we’re trying to accomplish:

When the user touches the card and drags it around, we want it to scale it down and lower its opacity.
While the user is holding down a card, we want to hide all the other cards to keep the focus on the card that they’re holding. The only components that need to show are the DropArea and the card.
When the user drags the card over to a target area of the DropArea, we want to change the border and text color of the DropArea to green. This indicates that the user in on-target and they can drop the card there.
If the user lets go of the card outside of the drop area, we bring it back its original position, hide the DropArea, and show all the cards that were hidden.

Now that that’s clear, the first step is to convert the Card component from a functional to a class-based component. We won’t really be using state in this component, so this change is only to organize the code better. While you’re at it, also remove the code for animating the card onPressIn and onPressOut. We don’t really want them to get in the way of the gesture that we’re trying to implement. Here’s what the new code structure will look like after the change. You can check the diff here:

// src/components/Card.js
// imports here
// next: import PanResponder

export default class Card extends Component<Props> {
  constructor() {}

  render() {
    // destructure the props here
    // the return code here
  }
}

Next, we need to import PanResponder module from react-native:

import {
  // ..previously imported moodules here..
  PanResponder
} from "react-native";

The PanResponder module is React Native’s way of responding to gestures such as panning, swiping, long press, and pinching.

Next, update the constructor and initialize the animated values that we’re going to use. In this case, we want a scale and opacity animation. We’re also using a new Animated.ValueXY, this is the animated value for controlling the card’s position on the screen:

// src/components/Card.js
constructor(props) {
  super(props);

  this.pan = new Animated.ValueXY(); // for animating the card's X and Y position
  this.scaleValue = new Animated.Value(0); // for scaling the card while the user drags it
  this.opacityValue = new Animated.Value(2); // for making the card translucent while the user drags it

  this.cardScale = this.scaleValue.interpolate({
    inputRange: [0, 0.5, 1], // animate to 0.5 while user is dragging, then to 1 or 0 once they let go
    outputRange: [1, 0.5, 1]
  });

  this.cardOpacity = this.opacityValue.interpolate({
    inputRange: [0, 1, 2], // default value is 2, so we'll animate backwards
    outputRange: [0, 0.5, 1]
  });
}

Next, inside componentWillMount, right below the prop destructuring, create a new PanResponder:

componentWillMount() {
  const {
    // existing props here..
  } = this.props;

  // add the following:
  this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,
    onPanResponderGrant: (e, gestureState) => {
      // next: add code for onPanResponderGrant
    },
    onPanResponderMove: (e, gesture) => {

    },
    onPanResponderRelease: (e, gesture) => {

    }
  });
}

Breaking down the code above:

onStartShouldSetPanResponder - used for specifying whether to allow the PanResponder to respond to touch feedback. Note that we’ve simply supplied true, but ideally, you’ll want to supply a function which contains a condition for checking whether you want to initiate the gesture or not. For example, if you have some sort of “lock” functionality that the user needs to unlock before they can move things around.
onMoveShouldSetPanResponder - for checking whether to respond to the dragging of the component where the PanResponder will be attached later on. Again, we’ve just specified true, but if you need to check whether a specific condition returns true, this is where you want to put it.

Oddly though, even if you supply false to all of the above or don’t supply it at all, it still works on the iOS simulator. But even if this is the case, it’s a good practice to still specify it because you never know how different devices behave in the real world.

onPanResponderGrant - the function you supply here is executed when the PanResponder starts to recognize the user’s action as a gesture. So when the user has started to drag the card even just a little bit, the function will be executed. This is where we want to animate the card so it becomes smaller and translucent.
onPanResponderMove - executed while the user drags their finger across the screen. This is where you want to execute the animation for changing the card’s position. This is also where you want to check whether the card is within the drop area or not so you can animate the styling of the DropArea component.
onPanResponderRelease - executed when the user finishes the gesture. This is when their finger lets go of the screen. Here, you also need to check whether the card is within the drop area or not so you can animate it accordingly.

In my opinion, those are the most common functions that you will want to supply. But there are others available.

Now, let’s add the code for each of the gesture lifecycle functions. For onPanResponderGrant, we’ll animate the scaleValue and opacityValue at the same time. Below it, we have a function called toggleDropArea which is used to update the state so it hides all the other cards and shows the DropArea component. We’ll be supplying this function later from the Main screen, then down to the CardList, and finally to each of the Card components. For now, don’t forget to destructure it from this.props:

// src/components/Card.js
onPanResponderGrant: (e, gestureState) => {
  Animated.parallel([
    Animated.timing(this.scaleValue, {
      toValue: 0.5, // scale it down to half its original size
      duration: 250,
      easing: Easing.linear,
      useNativeDriver: true
    }),
    Animated.timing(this.opacityValue, {
      toValue: 1,
      duration: 250,
      easing: Easing.linear,
      useNativeDriver: true
    })
  ]).start();

  toggleDropArea(true, item); // supplied from the src/screens/Main.js down to src/components/CardList and then here. Accepts the drop area's visibility and the item to exclude from being hidden
};
// next: add code for onPanResponderMove

Next is onPanResponderMove. Here, we do the same thing we did on part two of this series when we implemented the animated header. That is, to use Animated.event to map the card’s current position to this.pan. This allows us to animate the card’s position as the user drags it around. dx and dy are the accumulated distance in the X and Y position since the gesture started. We use those as the values for this.pan.x and this.pan.y:

onPanResponderMove: (e, gesture) => {
  Animated.event([null, { dx: this.pan.x, dy: this.pan.y }])(e, gesture);
  if (isDropArea(gesture)) {
    targetDropArea(true);
  } else {
    targetDropArea(false);
  }
},
// next: add code for onPanResponderRelease

Note that Animated.event returns a function, that’s why we’re supplying e (event), and gesture as arguments to the function it returns.

On onPanResponderRelease, we check whether the card is within the drop area by using the isDropArea function. Again, this function will be passed as props from the Main screen just like the toggleDropArea function. If the card is within the drop area, we set its opacity down to zero so it’s no longer visible. Then we call the removePokemon function (passed as props from the Main screen) to remove it from the state:

onPanResponderRelease: (e, gesture) => {
  toggleDropArea(false, item); // hide the drop area and show the hidden cards

  if (isDropArea(gesture)) {
    Animated.timing(this.opacityValue, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true
    }).start(() => {});

    removePokemon(item); // remove the pokemon from the state
  } else {
    // next: add code for animating the card back to its original position
  }
};

Next, animate the card to its original position. Here, we simply do the animation we declared on onPanResponderGrant in reverse. But the most important part here is animating this.pan. Since we’re working with a vector value, we specify an object containing the separate values for the x and y position. It’s a good thing, we can simply specify 0 as the value for both to bring them back to their original position. No need to calculate the card’s position or anything complex like that:

// src/components/Card.js
Animated.parallel([
  Animated.timing(this.scaleValue, {
    toValue: 1,
    duration: 250,
    easing: Easing.linear,
    useNativeDriver: true
  }),
  Animated.timing(this.opacityValue, {
    toValue: 2,
    duration: 250,
    easing: Easing.linear,
    useNativeDriver: true
  }),
  Animated.spring(this.pan, {
    toValue: { x: 0, y: 0 },
    friction: 5,
    useNativeDriver: true
  })
]).start();

Next, let’s take a look at the render method. Here, everything else is still the same except for the animated styles we supply and the Animated.View in place of the TouchableWithoutFeedback that we previously had. The most important part that allows the component to be moved is the transform styles which correspond to x and y values of this.pan, and the supplying of the PanResponder props ({...this.panResponder.panHandlers}):

// src/components/Card.js
render() {
  const {
    item,
    cardAction,
    viewAction,
    bookmarkAction,
    shareAction
  } = this.props;

  let [translateX, translateY] = [this.pan.x, this.pan.y];

  let transformStyle = {
    ...styles.card,
    opacity: item.isVisible ? this.cardOpacity : 0,
    transform: [{ translateX }, { translateY }, { scale: this.cardScale }]
  };

  return (
    <Animated.View style={transformStyle} {...this.panResponder.panHandlers}>
      ...
    </Animated.View>
  );
}

Moreover, we’re also expecting an isVisible property for each item. It will be used to hide or show the card. This property is what we update when the user starts or stops the gesture.

Next, we can now move on to creating the DropArea component. If you’ve seen the demo earlier, this is the little box that shows up in the top-right corner when the user starts the gesture. Here is the code:

// src/components/DropArea.js
import React, { Component } from "react";
import { View, Text, Dimensions } from "react-native";

const DropArea = ({ dropAreaIsVisible, setDropAreaLayout, isTargeted }) => {
  const right = dropAreaIsVisible ? 20 : -200;
  const color = isTargeted ? "#5fba7d" : "#333";
  return (
    <View
      style={[styles.dropArea, { right }, { borderColor: color }]}
      onLayout={setDropAreaLayout}
    >
      <Text style={[styles.dropAreaText, { color }]}>Drop here</Text>
    </View>
  );
};

const styles = {
  dropArea: {
    position: "absolute",
    top: 20,
    right: 20,
    width: 100,
    height: 100,
    backgroundColor: "#eaeaea",
    borderWidth: 3,
    borderStyle: "dashed", // note: doesn't work on android: https://github.com/facebook/react-native/issues/17251
    alignItems: "center",
    justifyContent: "center"
  },
  dropAreaText: {
    fontSize: 15
  }
};

export default DropArea;

If you inspect the code above, no animation will actually happen. All we’re doing is changing the styles based on the following boolean values coming from the props:

dropAreaIsVisible - whether the component is visible or not.
isTargeted - whether a card is within its area.

setDropAreaLayout is a function that allows us to update the Main screen’s state of the position of the drop area in the screen. We’ll be needing that information to determine whether a card is within the drop area or not.

Next, update the Main screen. First, add the isVisible property to each of the Pokemon:

    // src/screens/Main.js
    const animationConfig = {...}

    // add this:
    let updated_pokemon = pokemon.map(item => {
      item.isVisible = true;
      return item;
    });

Inside the component, since we’re no longer using the animated header, you now need to add a value for the headerTitle:

// src/screens/Main.js inside navigationOptions
headerTitle: "Poke-Gallery",

Initialize the state:

state = {
  pokemon: updated_pokemon, // change pokemon to updated_pokemon
  isDropAreaVisible: false
};

Inside the render method, we render the DropArea before the CardList so that it has lower z-index than any of the other cards. This way, the cards are always on top of the card list when the user drags it. Don’t forget to pass the props that we’re expecting from the DropArea component. We’ll declare those later:

// src/screens/Main.js
import DropArea from "../components/DropArea"; // add this somewhere below the react-native imports

return (
  <View style={styles.container}>
    <DropArea
      dropAreaIsVisible={this.state.isDropAreaVisible}
      setDropAreaLayout={this.setDropAreaLayout}
      isTargeted={this.state.isDropAreaTargeted}
    />
    ..previously rendered components here ..next: update CardList
  </View>
);

Update the CardList so it has the props that we’re expecting:

<CardList
  ...previous props here
  scrollEnabled={!this.state.isDropAreaVisible}
  toggleDropArea={this.toggleDropArea}
  dropAreaIsVisible={this.state.isDropAreaVisible}
  isDropArea={this.isDropArea}
  targetDropArea={this.targetDropArea}
  removePokemon={this.removePokemon}
/>

Next, we can now add the code for the functions that we’re passing. First is the toggleDropArea. As you’ve seen earlier, this function is called every time the user initiates and finishes the gesture. All it does is flip the isVisible property of each item based on the isVisible argument passed to it. When the user initiates the gesture, isVisible is true. This means that the DropArea is visible, but the rest of the cards are hidden. The item argument passed to this function is the object containing the details of the card being dragged. So we use it to find the index of the item to be excluded from the hiding. We then update the state with the new data:

// src/screens/Main.js
toggleDropArea = (isVisible, item) => {
  if (item) {
    let pokemon_data = [...this.state.pokemon];
    let new_pokemon_data = pokemon_data.map(item => {
      item.isVisible = !isVisible;
      return item;
    });
    let index = new_pokemon_data.findIndex(itm => itm.name == item.name);

    if (isVisible) {
      new_pokemon_data[index].isVisible = true;
    }

    this.setState({
      isDropAreaVisible: isVisible,
      pokemon: new_pokemon_data
    });
  }
};

setDropAreaLayout's job is to update the dropAreaLayout to be used by the isDropArea function:

// src/screens/Main.js
setDropAreaLayout = event => {
  this.setState({
    dropAreaLayout: event.nativeEvent.layout
  });
};

isDropArea is where the logic for changing the styles of the drop area is. It’s also used to determine whether the card will be brought back to its original position or dropped in the drop area. Note that the condition below isn’t 100% fool-proof. gesture.moveX and gesture.moveY aren’t actually the position of the card in the screen’s context. Instead, these are the latest screen coordinates of the recently-moved touch. Which means that the position is based on where the user touched. So if the user held on to the lower portion of the card then they have to raise the card much higher than the drop area in order to target it. The same is true with holding on to the left side of the card. For that, they’ll have to move the card further right of the drop area in order to target it. So the safest place to touch is in the middle, right, or top:

// src/screens/Main.js
isDropArea = gesture => {
  let dropbox = this.state.dropAreaLayout;
  return (
    gesture.moveY > dropbox.y + DROPAREA_MARGIN &&
    gesture.moveY < dropbox.y + dropbox.height + DROPAREA_MARGIN &&
    gesture.moveX > dropbox.x + DROPAREA_MARGIN &&
    gesture.moveX < dropbox.x + dropbox.width + DROPAREA_MARGIN
  );
};

The function above compares the position of the touch to the position of the drop area. We’re adding a DROPAREA_MARGIN to account for the top and right margin added to the DropArea component.

targetDropArea updates the state so that the text and border color of the drop area is changed:

// src/screens/Main.js
targetDropArea = isTargeted => {
  this.setState({
    isDropAreaTargeted: isTargeted
  });
};

removePokemon removes the dropped item from the state. This also uses LayoutAnimation to animate the rest of the cards with a spring animation after a card has been dropped:

// src/screens/Main.js
removePokemon = item => {
  let pokemon_data = [...this.state.pokemon];
  let index = pokemon_data.findIndex(itm => itm.name == item.name);
  pokemon_data.splice(index, 1);

  LayoutAnimation.configureNext(animationConfig);

  this.setState({
    pokemon: pokemon_data
  });
};

Next, update the CardList component to accept all the props that need to be passed to the Card component. We also need to optionally enable the ScrollView’s scrolling (scrollEnabled prop) because it gets in the way when the user begins to drag a card. Lastly, the FlatList also enables scrolling by default, so we disable that as well, and just rely on the ScrollView for the scroll:

// src/components/CardList.js
const CardList = ({
  // previous props here..
  scrollEnabled,
  toggleDropArea,
  isDropArea,
  targetDropArea,
  removePokemon
}) => {
  return (
    <ScrollView scrollEnabled={scrollEnabled}>
      <View style={[styles.scroll_container]}>
        <FlatList
          scrollEnabled={false}
          ...previous props here
          renderItem={({ item }) => {
            <Card
              ...previous props here
              toggleDropArea={toggleDropArea}
              isDropArea={isDropArea}
              targetDropArea={targetDropArea}
              removePokemon={removePokemon}
            />
          }}
        />
      </View>
    </ScrollView>
  );
});

Also update the Card component to accept the props passed to it by the CardList component:

// src/components/Card.js
componentWillMount() {
    const {
      /* previously accepted props here */
      toggleDropArea,
      isDropArea,
      targetDropArea,
      removePokemon
    } = this.props;
}

Next, update the layout settings file to export the DROPAREA_MARGIN:

// src/settings/layout.js
const DROPAREA_MARGIN = 20;
export { DROPAREA_MARGIN };

Lastly, update the Main screen so it uses the DROPAREA_MARGIN:

// src/screens/Main.js
import { DROPAREA_MARGIN } from "../settings/layout";

Once that’s done, you should achieve a similar output to the demo from earlier.

Solving the FlatList drag-and-drop issue on Android

As you might already know, there are implementation differences between Android and iOS. And if you’ve worked with both platforms before, then you also know that React Native for Android is behind iOS. This means there are more Android-specific issues and gotchas that you might encounter when working with React Native.

This section is specifically for dealing with Android related issue when it comes to the FlatList component. The problem with it is that changing the opacity and z-index of the Card components while the user is dragging a card doesn’t achieve the same effect as in iOS. On Android, each row has some sort of a wrapper which wraps each of the Card components. This wrapper cannot be influenced by declaring a z-index for the Card component. And even though the Card components are currently hidden while the user is dragging, the card can’t actually be dragged outside its row because it becomes hidden as soon as you do so.

After days of looking for a solution, I gave up and decided to stick with a custom list instead.

Open, src/components/CardList.js and convert it into a class-based component:

export default class CardList extends Component<Props> {
  render() {
    const { data, scrollEnabled } = this.props;

    return (
      <ScrollView scrollEnabled={scrollEnabled}>
        <View style={[styles.scroll_container]}>{this.renderPairs(data)}</View>
      </ScrollView>
    );
  }

  // next: add renderPairs method
}

The renderPairs function returns each individual row, and it uses the renderCards function to render the cards:

renderPairs = data => {
  let pairs = getPairsArray(data);

  return pairs.map((pair, index) => {
    return (
      <View style={styles.pair} key={index}>
        {this.renderCards(pair)}
      </View>
    );
  });
};

// next: add renderCards function

Next, add the renderCards method. This is responsible for rendering the individual Card components:

renderCards = pair => {
  const {
    cardAction,
    viewAction,
    bookmarkAction,
    shareAction,
    toggleDropArea,
    isDropArea,
    targetDropArea,
    removePokemon
  } = this.props;

  return pair.map(item => {
    return (
      <Card
        key={item.name}
        item={item}
        cardAction={cardAction}
        viewAction={viewAction}
        bookmarkAction={bookmarkAction}
        shareAction={shareAction}
        toggleDropArea={toggleDropArea}
        isDropArea={isDropArea}
        targetDropArea={targetDropArea}
        removePokemon={removePokemon}
      />
    );
  });
};

Outside the class, right before the styles declaration, create a function called getPairsArray. This function will accept an array of items and restructures it so that each row will have one pair of item:

// src/components/CardList.js
const getPairsArray = items => {
  var pairs_r = [];
  var pairs = [];
  var count = 0;
  items.forEach(item => {
    count += 1;
    pairs.push(item);
    if (count == 2) {
      pairs_r.push(pairs);
      count = 0;
      pairs = [];
    }
  });
  return pairs_r;
};

const styles = { ... } // next: update styles

Don’t forget to add the styles for each pair:

const styles = {
  /* previously added styles here */
  pair: {
    flexDirection: "row"
  }
};

Once that’s done, you should now be able to drag and drop the cards in the drop area.

If you’re having problems getting it to work, you can check the specific commit here.

Swipe

The next gesture that we’re going to implement is swipe, and it looks like this:

This part builds up from the drag-and-drop gesture. So the list of Pokemon you see above are the one’s that were dropped. Swiping the item to the right removes it entirely.

Let’s see what needs to be done in order to implement this:

Create a Swiper component where the swiping gesture will be added. These are the items that you see in the above demo.
Create a Trash screen. This is where the Swiper component will be used to display the items that were dropped in the drop area.
Update the Main screen to add a button for navigating to the Trash screen. The pokemon state (the array containing the list of Pokemon) also needs to be updated so the dropped Pokemon will be removed and copied into another state (removed_pokemon) which contains an array of Pokemon that were dropped. This is then used as the data source for the Trash screen.

Create a Swiper component

Let’s proceed with creating the Swiper component. First, import all the things that we’ll need:

// src/components/Swiper.js
import React, { Component } from "react";
import {
  View,
  Image,
  Text,
  Dimensions,
  Animated,
  PanResponder
} from "react-native";

const width = Dimensions.get("window").width; // for calculating the distance swiped

Next, create the component. When the user swipes an item to the right, it removes that item from the removed_pokemon state so we need to accept the item to be removed. We also need to pass the dismissAction which will remove the item from the state:

const Swiper = ({ item, dismissAction }) => {
  // next: add animated values
};

Next, we initialize the animated values that we will be using. We want the items to be moved to the left or to the right (translateX), and make it translucent (opacityValue) as they move it:

let translateX = new Animated.Value(0);
let opacityValue = new Animated.Value(0);

let cardOpacity = opacityValue.interpolate({
  inputRange: [0, 1],
  outputRange: [1, 0.5]
});

// next: add PanResponder code

Next, create the PanResponder:

let panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onMoveShouldSetPanResponder: () => true,
  onPanResponderMove: (e, gesture) => {
    // next: add code for onPanResponderMove
  },
  onPanResponderRelease: (e, { vx, dx }) => {}
});

When the user begins the gesture, we map the value of dx to the animated value translateX. We did the same thing with the Card component earlier. The only difference is that this time, we’re only translating the X position. Below that, we also animate the opacityValue. We’ve used a really low duration value so the component will immediately turn translucent as soon as the gesture is started:

onPanResponderMove: (e, gesture) => {
  Animated.event([null, { dx: translateX }])(e, gesture);
  Animated.timing(opacityValue, {
    toValue: 1,
    duration: 50,
    useNativeDriver: true
  }).start();
};
// next: add code for onPanResponderRelease

When the user ends the gesture, we determine whether to bring the component back to its original position or animate the remaining distance all the way to the right. Luckily, the way we implement it is pretty straightforward. We compare the absolute value of dx (the accumulated distance of the gesture in the X axis) to half of the screen’s total width. So if the user managed to drag the component to greater than half of the screen then it means that they want to remove the item. We’re also checking if dx is not a negative number. We only consider the gesture as valid if the user is swiping to the right. This works because dx will have a negative value if the user swipes to the left.

As for the animated value, we simply use the screen’s width as the final value. If dx is greater than 0 then it means they’re swiping to the right so we have a positive width value. Otherwise, we use the negative width:

onPanResponderRelease: (e, { vx, dx }) => {
  if (Math.abs(dx) >= 0.5 * width && Math.sign(dx) != -1) {
    dismissAction(item);
    Animated.timing(translateX, {
      toValue: dx > 0 ? width : -width,
      duration: 200,
      useNativeDriver: true
    }).start();
  } else {
    // next: add code for bringing back the component to its original position
  }
};

If the condition failed, we spring back the component to its original position and bring back its original opacity:

Animated.parallel([
  Animated.spring(translateX, {
    toValue: 0,
    bounciness: 20,
    useNativeDriver: true
  }),
  Animated.timing(opacityValue, {
    toValue: 0,
    duration: 5,
    useNativeDriver: true
  })
]).start();

Next, we render the actual component:

// src/components/Swiper.js
return (
  <Animated.View
    style={{
      transform: [{ translateX }],
      opacity: cardOpacity,
      ...styles.bar
    }}
    {...panResponder.panHandlers}
  >
    <Image source={item.pic} style={styles.thumbnail} resizeMode="contain" />
    <Text style={styles.name}>{item.name}</Text>
  </Animated.View>
);

Here are the styles:

const styles = {
  bar: {
    height: 50,
    flexDirection: "row",
    borderWidth: 1,
    borderColor: "#ccc",
    alignItems: "center",
    marginTop: 2,
    marginBottom: 2,
    paddingLeft: 5
  },
  thumbnail: {
    width: 35,
    height: 35
  }
};

export default Swiper;

Create the Trash screen

The Trash screen is where the Swiper component will be displayed. All the items that were dropped in the drop area will be displayed on this page:

// src/screens/Trash.js
import React, { Component } from "react";
import { View, FlatList, LayoutAnimation } from "react-native";
import Swiper from "../components/Swiper";

type Props = {};
export default class Trash extends Component<Props> {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: "Trash",
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0,
        backgroundColor: "#B4A608"
      },
      headerTitleStyle: {
        color: "#FFF"
      }
    };
  };

  state = {
    removed_pokemon: [] // array containing the items that were dropped from the Main screen
  };

  // next: add componentDidMount
}

When the component is mounted, we call fillRemovedPokemon. This will simply copy the contents of the removed_pokemon that was passed as a navigation param from the Main screen over to the removed_pokemon state of this screen. That way, this screen has its own state that we could manipulate:

componentDidMount() {
  this.fillRemovedPokemon(this.props.navigation.state.params.removed_pokemon);
}

Here’s the fillRemovedPokemon method:

fillRemovedPokemon = removed_pokemon => {
  this.setState({
    removed_pokemon
  });
};

Next, we render the actual list:

render() {
  return (
    <View style={styles.container}>
      {this.state.removed_pokemon && (
        <FlatList
          data={this.state.removed_pokemon}
          renderItem={({ item }) => (
            <Swiper item={item} dismissAction={this.dismissAction} />
          )}
          keyExtractor={item => item.id.toString()}
        />
      )}
    </View>
  );
}

The dismissAction is the one responsible for removing the items that the user wants to remove. Here, we’re using LayoutAnimation to easily update the UI once an item has been removed. In this case, we’re using it to automatically fill the empty space left by the removed item:

// src/components/Swiper.js
dismissAction = item => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  let removed_pokemon = [...this.state.removed_pokemon];
  let index = removed_pokemon.findIndex(itm => itm.name == item.name);

  removed_pokemon.splice(index, 1);

  this.setState({
    removed_pokemon
  });
};

Here are the styles:

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
};

Update the Main screen

Next, update the src/screens/Main.js file. First, include the IconButton component. We’ll be using it to display a button inside the header:

import IconButton from "../components/IconButton";

Update the navigationOptions to include headerRight. This allows us to render a component on the right side of the header. The navigateToTrash method is passed as a navigation param as you’ll see later:

static navigationOptions = ({ navigation }) => {
  const { params } = navigation.state; // add this
  return {
    headerTitle: "Poke-Gallery",
    // add this:
    headerRight: (
      <IconButton
        icon="trash"
        onPress={() => {
          params.navigateToTrash();
        }}
      />
    ),
   // previous header config here...
  };
};

Next, update the state initialization code to include a default value for removed_pokemon:

state = {
  pokemon: updated_pokemon,
  removed_pokemon: [], // add this
  isDropAreaVisible: false
};

After that, we set the navigateToTrash function as a navigation param:

constructor(props) {
  /* previously added constructor code here */

  this.props.navigation.setParams({
    navigateToTrash: this.navigateToTrash
  });
}

Here’s the navigateToTrash method. We can’t really use this screen’s state from inside the navigationOptions, that’s why we’re setting this function as a navigation param:

navigateToTrash = () => {
  this.props.navigation.navigate("Trash", {
    removed_pokemon: this.state.removed_pokemon
  });
};

Next, update the removePokemon method to include manipulation of removed_pokemon:

removePokemon = item => {
  let pokemon_data = [...this.state.pokemon];
  let removed_pokemon_data = [...this.state.removed_pokemon]; // add this
  let index = pokemon_data.findIndex(itm => itm.name == item.name);
  let removed_pokemon = pokemon_data.splice(index, 1); // add 'let removed_pokemon' to this line
  removed_pokemon_data.push(removed_pokemon[0]); // add this
  LayoutAnimation.configureNext(animationConfig);

  this.setState({
    pokemon: pokemon_data,
    removed_pokemon: removed_pokemon_data // add this
  });
};

Lastly, update the Root.js file to include the Trash screen as one of the screens of the app:

import TrashScreen from "./src/screens/Trash";

const transitionConfig = () => {
  // previous transition config here...
};

const MainStack = createStackNavigator(
  {
    // previous screens here..
    Trash: {
      screen: TrashScreen
    }
  }
  // previous config
);

Once that’s done, you should be able to test the swiping gesture.

Pinch

The final gesture that we’re going to implement is pinch gesture, and it looks like this:

In the above demo, the user uses a pinch gesture to zoom the image in and out. In my opinion, this gesture is one of the most complex ones that you can implement. So instead of implementing it with the PanResponder, we’ll use the React Native Gesture Handler library to make it easier.

Before we proceed, let’s take a look at the work involved in implementing this:

Install and link React Native Gesture Handler to the project.
Create a PinchableImage component. This is where we will use the gesture handler library to implement a pinch-to-zoom gesture.
Update the BigCard component to replace the original image with the PinchableImage component.

Installing react-native-gesture-handler

You can install the gesture handler with the following command:

npm install --save react-native-gesture-handler

At the time of writing this tutorial, react-native link doesn’t really link the native modules to the project. So we’ll have to use Cocoapods instead. This also means that you’ll have to do the manual install for Android if you’re planning to test on both iOS and Android.

If you only need to test on Android, you should be able to get away with using react-native link to link the native module. We’ll get to the Android installation shortly, first let’s get into iOS.

iOS configuration

cd into the ios directory and initialize a new Podfile:

cd ios
pod init

Next, replace its contents with the following. Here we’re adding React Native modules as pods, then below it (pod 'RNGestureHandler') is where we include the actual module for the gesture handler:

target 'RNRealworldAnimations' do

  rn_path = '../node_modules/react-native'
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

After that, install all the pods:

pod install

Once that’s done, you can now run your project:

cd ..
react-native run-ios

Android configuration

To configure it on Android, open the android/settings.gradle file and add the following right before the include ':app':

include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

Next, open android/app/build.gradle and include react-native-gesture-handler right after react-native-vector-icons:

dependencies {
  compile project(':react-native-vector-icons')
  compile project(':react-native-gesture-handler')
  // ...other dependencies here
}

Next, open android/app/src/main/java/com/rnrealworldanimations/MainApplication.java and import the corresponding gesture handler library:

// other previously imported libraries here
import com.facebook.soloader.SoLoader; // previously imported library
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; // add this

Then use it inside getPackages:

protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new VectorIconsPackage(),
      new RNGestureHandlerPackage() // add this
  );
}

Lastly, open android/app/src/main/java/com/rnrealworldanimations/MainActivity.java and import the gesture handler libraries:

package com.rnrealworldanimations;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate; // add this
import com.facebook.react.ReactRootView; // add this
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; // add this

Inside the class, use ReactActivityDelegate to enable the gesture handler on the root view:

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "RNRealworldAnimations";
    }

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

Once that’s done, execute react-native run-android from your terminal to rebuild and run the project.

Creating the PinchableImage component

Create a src/components/PinchableImage.js file and add the following. React Native Gesture Handler is only responsible for handling the gesture, you still have to write the code for the animations to be applied when those gestures are performed by the user. That’s why we still need to include the Animated module:

import React, { Component } from "react";
import { Animated, View, Dimensions } from "react-native";
import { PinchGestureHandler, State } from "react-native-gesture-handler";

const { width, height } = Dimensions.get("window"); // used for dealing with image dimensions

export default class PinchableImage extends Component {
  // next: add constructor
}

Most of the time, all you will need to extract from the gesture handler module is the gesture you want to handle, and the State. In this case, we want to use the PinchGestureHandler. But you can also use handlers like FlingGestureHandler to implement the swiping gesture that we did earlier, or the PanGestureHandler to implement a drag-and-drop. Best of all, you can combine these gesture handlers together to create more complex interactions.

Next, in the constructor, we initialize the animated values that we will be using:

baseScale - the default scale value of the image. Here, we’ve set it to 1 so that if it becomes larger than 1 then the user is making the image larger. If it’s less than 1 then the user is making it smaller.
pinchScale - the scale value for the pinch gesture.
scale - the actual scale value to be used for the transform scale.
lastScale - the scale value to be used for updating the baseScale.
imageScale - the current scale value of the image.

Here’s the code:

// src/components/PinchableImage.js
constructor(props) {
  super(props);
  this.baseScale = new Animated.Value(1);
  this.pinchScale = new Animated.Value(1);
  this.scale = Animated.multiply(this.baseScale, this.pinchScale);
  this.lastScale = 1;
  this.imageScale = 0;
}

Throughout the lifecycle of the whole gesture, the _onPinchHandlerStateChange method will be executed. Previously, we’ve used onPanResponderGrant, onPanResponderMove and onPanResponderRelease. But when using the gesture handler, it’s consolidated into a single method. Though this time, there’s the handler state which is used to respond to different states of the gesture. Here’s how it maps to the PanResponder methods:

onPanResponderGrant - State.BEGAN
onPanResponderMove - State.ACTIVE
onPanResponderRelease - State.END

Additionally, there’s also State.UNDETERMINED, State.CANCELLED , and State.FAILED.

Since we don’t really need to perform anything when the gesture is started or ended, we wrap everything in State.ACTIVE condition. Inside it, we calculate the newImageScale. We do that by first determining whether the user’s fingers have traveled away from each other or near each other. If event.nativeEvent.scale is negative, then it means the user is trying to zoom it out. Otherwise (larger than 0) the user is zooming it in. We then use it to determine whether to add or subtract the currentScale from the imageScale. Here’s the code:

// src/components/PinchableImage.js
_onPinchHandlerStateChange = event => {
  if (event.nativeEvent.oldState === State.ACTIVE) {
    let currentScale = event.nativeEvent.scale; // the distance travelled by the user's two fingers

    this.lastScale *= event.nativeEvent.scale; // the value we will animated the baseScale to
    this.pinchScale.setValue(1); // everytime the handler is triggered, it's considered as 1 scale value

    // the image's new scale value
    let newImageScale =
      currentScale > 0
        ? this.imageScale + currentScale
        : this.imageScale - currentScale;

    // next: add code for checking if scale is within range
  }
};

Next, we determine if the newImageScale is within range. If it is, then we use a spring animation to scale the image:

if (this.isScaleWithinRange(newImageScale)) {
  Animated.spring(this.baseScale, {
    toValue: this.lastScale,
    bounciness: 20,
    useNativeDriver: true
  }).start();
  this.imageScale = newImageScale; // don't forget to update the imageScale
} else {
  // next: add code for animating the component if it's not within range
}

If it’s not within range, then we scale the image back to its original size:

this.lastScale = 1;
this.imageScale = 0;
Animated.spring(this.baseScale, {
  toValue: 1,
  bounciness: 20,
  useNativeDriver: true
}).start();

The isScaleWithinRange function is used to determine whether the scale is still within a specific limit. In this case, we don’t want the image to become smaller than half its size (0.5), and we also don’t want it to become five times (5) larger than its original size:

// src/components/PinchableImage.js
isScaleWithinRange = newImageScale => {
  if (newImageScale >= 0.5 && newImageScale <= 5) {
    return true;
  }
  return false;
};

In order for the component to respond to pinch gesture, we wrap everything inside the PinchGestureHandler component. This handler only requires you to pass the onHandlerStateChange prop which gets executed throughout the lifecycle of the gesture. Inside it are the components you want to animate as the gesture is being performed by the user. Here’s the render method:

render() {
  return (
    <PinchGestureHandler
      onHandlerStateChange={this._onPinchHandlerStateChange}
    >
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Animated.Image
            resizeMode={"contain"}
            source={this.props.image}
            style={[
              styles.pinchableImage,
              {
                transform: [{ scale: this.scale }]
              }
            ]}
          />
        </View>
      </View>
    </PinchGestureHandler>
  );
}

You can also combine multiple gestures by wrapping the components inside multiple gesture handlers.

Next, add the styles:

const styles = {
  container: {
    flex: 1
  },
  imageContainer: {
    width: width,
    overflow: "visible",
    alignItems: "center"
  },
  pinchableImage: {
    width: 250,
    height: height / 2 - 100
  }
};

Update the BigCard component

Next, we update the BigCard component to use the PinchableImage in place of the Animated.Image that we currently have:

// src/components/BigCard.js
import PinchableImage from "./PinchableImage";

Inside the component, we update the final output range of titleMoveY to be equal to half of the screen’s size:

import { /*previously imported modules*/ Dimensions } from "react-native";
const { height } = Dimensions.get("window");

export default class BigCard extends Component<Props> {
  const titleMoveY = this.titleTranslateYValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, height / 2]
  });
}

All the other animated values (titleScale stays the same). Note that we’ve also removed the animated value for the image opacity. This means that image will no longer be animated when the user views the Details screen. The only animation it’s going to perform is when the user uses the pinch gesture.

Next, replace Animated.Image with PinchableImage:

return (
  <View style={styles.container}>
    <View style={styles.imageContainer}>
      <View style={styles.mainContainer}>
        <PinchableImage image={image} />
        ...
      </View>
    </View>
  </View>
);

Once that’s done, you should be able to use a pinch gesture on the image to make it larger or smaller.

Conclusion

That’s it! In this tutorial, you’ve learned how to implement drag-and-drop, swiping, and pinch gestures. You’ve also learned how implementing gesture animations can be quite code-heavy. Good thing there are libraries like the React Native Gesture Handler which makes it easy to respond to user gestures.

The full source code for this tutorial is available on this GitHub repo. Be sure to switch to the part3 branch if you want the final output for this part of the series.

Originally published on the Pusher blog

Adding animations to your React Native app - Part 2: Transition animations

Wern Ancheta — Sat, 13 Jul 2019 07:36:01 +0000

Welcome to part two of a three-part series on adding animations to your React Native app. In this part, you’re going to learn how to add transition animations. Specifically, we’re going to:

Animate the header when the user scrolls on a list.
Customize the page transition animation that’s set by React Navigation.
Use LayoutAnimation to animate the components that are affected by a state change.

Prerequisites

To follow this tutorial, you need to know the basics of React and React Native.

Going through part one of this series is helpful but not required. Though this tutorial assumes that you know how to implement basic animations on React Native. You should already know how to implement scale, rotation, and sequence animations. We will be applying those same concepts when implementing transition animations.

We’ll also be using version two of React Navigation. Knowledge of the Stack Navigator is helpful but not required.

What you’ll be building

Here’s what you’ll be building:

You can find the full source code for this tutorial on its GitHub repo. We will be making changes to the final source code from the first part. If at any time you feel confused as to what specific changes you need to make, be sure to check the commit history of the branch containing the final source code for this part of the series (part2).

Setting up the project

To follow along, you first need to clone the repo:

git clone https://github.com/anchetaWern/RNRealworldAnimations.git

After that, switch to the part1 branch and install the dependencies:

cd RNRealworldAnimations
git checkout part1
npm install

Next, setup the android and ios folders:

react-native upgrade

Link the native dependencies. In this case, it’s only the React Native Vector Icons:

react-native link

Once that’s done, you should be able to run the app on your device or emulator:

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

The part1 branch contains the final output of the first part of this series. We will add new animations on top of the ones we’ve already implemented on the first part. The final source code for this part is available at the part2 branch.

Header scroll animation

First, let’s look at how we can implement header animations while the user is scrolling through a list:

To implement the animation, we need to make the following changes:

Update the App.js file to add an animated value that will be interpolated to animate the header. This animated value will correlate directly to the current scroll position. Thus allowing us to perform different kinds of animations depending on the current scroll position.
Create an AnimatedHeader component which implements the animations.

Refactor the code

Before we proceed, let’s first refactor the code. In the App.js file, move the getRandomInt function to a separate file (src/lib/random.js):

// src/lib/random.js
const getRandomInt = (max, min) => {
  return Math.floor(Math.random() * (max - min) + min);
};

export { getRandomInt };

Then import it into the App.js file:

import { getRandomInt } from "./src/lib/random";

Add the animated value

Now we can start with the implementation of the animated header.

Create a src/settings/layout.js file. This is where we keep the layout settings for the animated header:

HEADER_MAX_HEIGHT - the maximum height of the animated header. This will be the header’s default height when the user still hasn’t scrolled through the list.
HEADER_MIN_HEIGHT - the minimum height of the header. This will slightly differ based on the platform the app is currently running on because the height from the top of the screen down to the actual real estate where the app is rendered will be different between the two platforms.
HEADER_SCROLL_DISTANCE - the height that the scroll needs to be scrolled in order for the HEADER_MIN_HEIGHT to be applied.

// src/settings/layout.js
import { Platform } from "react-native";
const HEADER_MAX_HEIGHT = 250;
const HEADER_MIN_HEIGHT = Platform.OS === "ios" ? 40 : 53;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

export { HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT, HEADER_SCROLL_DISTANCE };

Next, open the App.js file and import the modules that we need:

import { View, ScrollView, Platform, Animated } from "react-native";
import { HEADER_MAX_HEIGHT } from "./src/settings/layout";

In the constructor, initialize the animated value that we will be using. By default, this should have a value of 0 because we haven’t really scrolled yet when the page loads. But iOS is different because of the content inset. We have to use the negative equivalent of the maximum height of the animated header (-HEADER_MAX_HEIGHT) as the initial value. If we just specified 0, the output will look like this:

Here’s the code:

// App.js
constructor(props) {
  super(props);
  this.pokemon_stats = [];

  // add this:
  this.nativeScrollY = new Animated.Value(
    Platform.OS === "ios" ? -HEADER_MAX_HEIGHT : 0
  );
}
// next: add code for render method

Next, inside the render method, we need to bring back the scroll value to 0. We can do that by using the Animated.add method. This allows us to add a new value to an existing animated value, in this case, it’s this.nativeScrollY. The second argument is the value you want to add.

Earlier, we’ve set the default animated value for iOS to the negative equivalent of the header’s maximum height (-HEADER_MAX_HEIGHT). So we need to add the equivalent positive value to bring it back to 0. I know it’s a bit hard to wrap your head around the idea, so consider it as a little hack to deal with the contentInset for the scrollbars in iOS. If you don’t apply it, you’ll get an issue similar to the demo earlier. Here’s the code:

// App.js
render() {
  let nativeScrollY = Animated.add(
    this.nativeScrollY,
    Platform.OS === "ios" ? HEADER_MAX_HEIGHT : 0
  );

  // next: add code for rendering the CardList
}

Next, pass an onScroll prop to the CardList component. The value for this prop will be passed directly to the onScroll prop of the ScrollView component in the src/components/CardList.js file later on. What this does is bind the animated value to the ScrollView's current scroll position. We do that by using Animated.event and passing in the mapping to the native event. In this case, the nativeEvent.contentOffset.y is mapped to this.nativeScrollY:

// App.js
{this.nativeScrollY && (
  <CardList
    ...previously added props here...
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.nativeScrollY } } }],
      {
        useNativeDriver: true
      }
    )}
  />
)}

Next, open the src/components/CardList.js file and import the modules that we’ll need:

import { View, FlatList, Animated, Platform } from "react-native";
import { HEADER_MAX_HEIGHT } from "../settings/layout";

Extract the the onScroll prop that we passed earlier:

// src/components/CardList.js
const CardList = ({
  // ..previously extracted props
  onScroll // add this
}) => {
  // next: update render code
};

Next, replace ScrollView with Animated.ScrollView and supply the onScroll prop. We also need to supply a few other props:

scrollEventThrottle - this controls how often the scroll event will be fired while scrolling. Information regarding the scroll is sent over the bridge so this needs to be kept as low as possible so the app’s performance will not be impacted. The lower value means that it will be sent less often.
contentInset and contentOffset - the offset applied for the animated header. These settings only apply to iOS. This allows us to specify the height the header is going to be. That way, the header won’t overlap the list below it. If these two aren’t applied, here’s how it will look like:

See how it jumped to its final height the moment it was scrolled?

Here’s the code:

// src/components/CardList.js
return (
  <Animated.ScrollView
    style={styles.scroll}
    scrollEventThrottle={1}
    onScroll={onScroll}
    contentInset={{
      top: HEADER_MAX_HEIGHT
    }}
    contentOffset={{
      y: -HEADER_MAX_HEIGHT
    }}
  >
    ..previously added scrollview contents
  </Animated.ScrollView>
);

Lastly, add the styles. The important thing to remember here is that a flex property should be applied to the animated ScrollView, and the paddingTop applied to Android. This is how we deal with positioning the CardList right below the header so they don’t overlap on Android. For iOS, it’s already been taken care with the content inset so we simply set the paddingTop to 0:

// src/components/CardList.js
const styles = {
  scroll: {
    flex: 1
  },
  scroll_container: {
    alignItems: "center",
    paddingTop: Platform.OS == "android" ? HEADER_MAX_HEIGHT : 0
  }
};

Animate the header

Now we’re ready to add the code for animating the header. First import the modules that we need:

// src/components/AnimatedHeader.js
import React from "react";
import { View, Text, Animated, Platform } from "react-native";
import { HEADER_MAX_HEIGHT, HEADER_SCROLL_DISTANCE } from "../settings/layout";

Here’s the component:

const AnimatedHeader = ({ title, nativeScrollY }) => {
  if (nativeScrollY) {
    // next: add the animation code
  }
};

At this point, we can now animate based on the current value of nativeScrollY. This is the current scroll position that we will pass later on from the App.js file. As you have seen in the demo earlier, we’re actually animating multiple components at the same time:

Header - animate the Y position.
Background image - animate the Y position and the opacity.
Title - animate the scale and the Y position.

From the breakdown above, you can see that we need to animate all the components involved. There’s no such thing as inheritance when it comes to animation. Animating the header’s container won’t actually animate its children the same way. So you have to apply the individual animations that you want to use for each component.

Here’s the code for animating the header’s Y position. From the code below, you can see that we’re relying on the HEADER_SCROLL_DISTANCE for the input and output ranges. This value is the maximum height the scrollbar needs to be scrolled in order for the header to animate to its final position. So we set it as the final value for the inputRange, while the final value for the outputRange will just be its inverse. Why? Because we’re animating the Y position, applying a negative value means the component will be moved to the top:

// src/components/AnimatedHeader.js
const headerTranslate = nativeScrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE],
  outputRange: [0, -HEADER_SCROLL_DISTANCE],
  extrapolate: "clamp" // so it wont go over the output range
});

Here’s the code for animating the background image:

// src/components/AnimatedHeader.js
// for animating the opacity
const BGImageOpacity = nativeScrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [1, 0.3, 0],
  extrapolate: "clamp"
});

// for animating the Y position
const BGImageTranslate = nativeScrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE],
  outputRange: [0, 100],
  extrapolate: "clamp"
});

Here’s the code for animating the title:

// for animating the scale
const titleScale = nativeScrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [1, 0.8, 0.7],
  extrapolate: "clamp"
});

// for animating the Y position
const titleTranslateY = nativeScrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [25, 35, 15],
  extrapolate: "clamp"
});

And here are the animated styles:

const headerStyles = { transform: [{ translateY: headerTranslate }] };

const headerBarStyles = {
  transform: [{ scale: titleScale }, { translateY: titleTranslateY }]
};

const BGImageStyles = {
  opacity: BGImageOpacity,
  transform: [{ translateY: BGImageTranslate }]
};

Next, apply the animated styles to each of the components we want to target:

return (
  <View style={styles.header_container}>
    <Animated.View pointerEvents="none" style={[styles.header, headerStyles]}>
      <Animated.Image
        style={[styles.header_bg, BGImageStyles]}
        resizeMode={"cover"}
        source={require("../img/team-instinct.jpg")}
      />
    </Animated.View>

    <Animated.View style={[styles.header_bar, headerBarStyles]}>
      <Text style={styles.header_text}>{title}</Text>
    </Animated.View>
  </View>
);
// next: add code for rendering default component if nativeScrollY isn't present

Next, we need to render a default component while nativeScrollY isn’t available:

if (nativeScrollY) {
  // ...previously added code here
}

// add this:
return (
  <View style={styles.header}>
    <View>
      <Text style={styles.header_text}>{title}</Text>
    </View>
  </View>
);

Next, add the styles:

const styles = {
  header_container: {
    ...Platform.select({
      ios: {
        zIndex: 1 // only applied to iOS, for some reason the cards is laid on top of the header when scrolling
      }
    })
  },
  header: {
    position: "absolute",
    top: 0, // so it's at the very top of its container
    left: 0, // for 100% width
    right: 0, // for 100% width
    backgroundColor: "#B4A608",
    overflow: "hidden", // for containing the background image because this container is absolutely positioned
    height: HEADER_MAX_HEIGHT, // needed for absolutely positioned elements
    zIndex: 1 // so the header will be laid on top of the list
  },
  header_bar: {
    backgroundColor: "transparent",
    height: 32,
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1
  },
  header_bg: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    width: null, // important so we can apply resizeMode=cover
    height: HEADER_MAX_HEIGHT
  },
  header_text: {
    color: "#FFF",
    fontSize: 25,
    fontWeight: "bold"
  }
};

export default AnimatedHeader;

Lastly, update App.js file to use the AnimatedHeader component instead of the Header component. Don’t forget to pass the nativeScrollY prop:

// App.js
import AnimatedHeader from "./src/components/AnimatedHeader";
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <AnimatedHeader title={"Poke-Gallery"} nativeScrollY={nativeScrollY} />
        ..previously added code here
      </View>
    );
  }
}

Once that’s done, you should be able to scroll the list and the header will be animated according to its current position.

Page transition animations

The next animation we’re going to implement is page transition animation, and it looks like this:

In case you didn’t notice, we’re performing a bit of a bouncing animation and an opacity animation as we navigate to the next page. We’re also doing the same as we navigate back to the previous page, but it becomes subtle because of we’re also animating the opacity back to zero.

For this animation, we’re going to use the React Navigation library. This library is like the de-facto standard for implementing navigation in React applications. So we’re going to take advantage of it instead of implementing our own navigation. This library already comes with default animations, but we’re going to customize it instead.

To implement custom page transition animations, we need to take care of the following first:

Install the dependencies.
Set up the main screen of the app.
Create a new “Share” screen. This is where we’ll be navigating to so we can apply some animations.
Set up the navigator for navigating between the Main and Share screen.
Create a custom transition that will be applied when navigating between the two screens.

We will be moving around some code in this section. If at any time you feel unsure on what needs to be changed, you can check out the commits on the GitHub repo. I tried to be descriptive with the commit messages as much as possible, so you should be able to find the exact changes.

Install the dependencies

We will be needing the React Navigation library to implement navigation within the app. You can install it with the following command. It should already be installed if you’ve switched to the part1 branch and installed the dependencies:

npm install --save react-navigation

Set up the main screen

First, create a screens folder inside the src directory. This is where we’ll be putting all the screens used in the app.

Next, create a Main.js file and Share.js file inside the screens folder you just created.

Open the App.js file and copy all its contents over to the Main.js file. This will now serve as the default screen of the app.

In the Main.js file, update the paths to the files that we’re importing. Simply do a multi-search and replace on your text editor, seach for ./src/ and replace it with ../ and that should do the job for you. You don’t even have to mind the code below once you’ve done that:

// src/screens/Main.js
import pokemon from "../data/pokemon";
import pokemon_stats from "../data/pokemon-stats";

import AnimatedHeader from "../components/AnimatedHeader";
import CardList from "../components/CardList";
import AnimatedModal from "../components/AnimatedModal";

Next, rename the component from `App` to `Main`:

// src/screens/Main.js
export default class Main extends Component<Props> {
  // next: add navigation options
}

Next, add the navigation options to be used by React Navigation:

static navigationOptions = ({ navigation }) => {
  return {
    headerTitle: "", // empty because we're using the label inside the AnimatedHeader
    headerStyle: {
      elevation: 0, // only applied to Android to remove the shadow in the header
      shadowOpacity: 0, // for removing the shadow in the header
      backgroundColor: "#B4A608"
    },
    headerTitleStyle: {
      color: "#FFF"
    }
  };
};

As for the App.js file, remove all the code from it for now.

Create a Share Screen

Next, let’s create the Share screen. I’ll just breeze through the code explanation for this screen because we’re only creating it so we could navigate to another screen. We won’t really be adding any animation code to this screen.

Here’s the code:

// src/screens/Share.js
import React, { Component } from "react";
import { View } from "react-native";

import IconLabel from "../components/IconLabel";

type Props = {};
export default class Share extends Component<Props> {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: "Share",
      headerStyle: {
        backgroundColor: "#B4A608"
      },
      headerTitleStyle: {
        color: "#FFF"
      }
    };
  };

  render() {
    return (
      <View style={styles.container}>
        <IconLabel
          icon="facebook-f"
          label="Share to Facebook"
          bgColor="#4267b2"
        />

        <IconLabel
          icon="google-plus"
          label="Share to Google+"
          bgColor="#db4437"
        />

        <IconLabel icon="twitter" label="Share to Twitter" bgColor="#1B95E0" />

        <IconLabel
          icon="linkedin"
          label="Share to LinkedIn"
          bgColor="#0077B5"
        />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    padding: 20
  }
};

In the code above, we’re using an IconLabel component to render a button with an icon and label on it.

Here’s the code for the IconLabel component:

// src/components/IconLabel.js
import React from "react";
import { Text, TouchableOpacity } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

const IconLabel = ({ icon, label, bgColor }) => {
  let backgroundColor = { backgroundColor: bgColor };
  return (
    <TouchableOpacity
      onPress={this.share}
      style={[styles.shareButton, backgroundColor]}
    >
      <Icon name={icon} style={styles.icon} size={30} color="#fff" />
      <Text style={styles.label}>{label}</Text>
    </TouchableOpacity>
  );
};

const styles = {
  shareButton: {
    padding: 10,
    marginBottom: 10,
    flexDirection: "row",
    justifyContent: "space-between"
  },
  icon: {
    flex: 2
  },
  label: {
    flex: 8,
    marginTop: 5,
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold"
  }
};

export default IconLabel;

Once that’s done, you can now update the Main.js file so it navigates to the Share screen:

// src/screens/Main.js
shareAction = (pokemon, image) => {
  this.props.navigation.navigate("Share"); // add this inside the existing shareAction function
};

Set up the navigator

Now we’re ready to set up the navigator. There are two parts to this. First, we update the App.js file to render the Root component. This component is where the navigator will be declared:

// App.js
import React, { Component } from "react";
import { View, YellowBox } from "react-native";

import Root from "./Root";

YellowBox.ignoreWarnings([
  "Warning: isMounted(...) is deprecated",
  "Module RCTImageLoader"
]);

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Root />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
};

Note that I have ignored the isMounted(...) is deprecated and Module RCTImageLoader warning. Those issues only seem to come up when React Navigation is installed. I haven’t found any solution for this so let’s ignore the warning for now.

Next, let’s proceed with the Root.js file. Start by importing the modules and screens that we will be working with:

// Root.js
import React from "react";
import { Animated, Easing } from "react-native";
import { createStackNavigator } from "react-navigation";

import MainScreen from "./src/screens/Main";
import ShareScreen from "./src/screens/Share";

Next, create a Stack Navigator for the two screens. The transitionConfig is an option that we can pass to the Stack Navigator. This is where we will be declaring the animation that we want to perform when navigating between the two screens:

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainScreen
    },
    Share: {
      screen: ShareScreen
    }
  },
  {
    initialRouteName: "Main", // set the default page
    transitionConfig // the animation
  }
);

The transitionConfig is an object which contains the animation configuration. If you look closely, you’ll notice that it’s using the same options as the ones you use for the Animated API. The only difference is the timing property. This is the type of animation to use. We’ve previously used Animated.timing and Animated.spring, you can also use those.

Don’t forget to supply additional options for each type of animation if you want to customize it. For example, Animated.spring can have a property called friction:

// Root.js
const transitionConfig = () => {
  return {
    transitionSpec: {
      duration: 400, // how long the transition will take
      easing: Easing.bounce, // easing function to use (https://facebook.github.io/react-native/docs/easing.html)
      timing: Animated.timing, // the type of animation to use (timing, spring, decay)
      useNativeDriver: true // delegate all the animation related work to the native layer
    },
    screenInterpolator: sceneProps => {
      // next: add code for customizing the transition animation
    }
  };
};

Below the general animation setting is the screenInterpolator function. This is where you will specify the actual animations that you’d like to perform while the app navigates from one screen to the next.

Start by extracting all the data we need from the sceneProps:

layout - contains information about the screen layout. Things like the height and width of the screen. In this case, we’re only using it to determine the initial width (initWidth) of the current screen.
position - the position of the current screen. This is the animated value that we can interpolate in order to perform animations.
scene - contains information about the screen we’re navigating to. In this case, we’ll only be using it to get the index of the next screen. Remember, we’re using a Stack Navigator, so screens are just stacked on top of each other. This means the next screen will have a higher index than the current screen. Unless we’re navigating backward.

// Root.js
const { layout, position, scene } = sceneProps;
const thisSceneIndex = scene.index; // the index of the current screen
const width = layout.initWidth; // the width of the current screen

At this point, we can now perform the animations. By default, the Stack Navigator uses transforms to translate the X position of the screen. If you’re navigating to a new screen, the new screen slides from right to left until it replaces the current screen. When navigating backward, the reverse is performed (the current screen slides left to right until it disappears from view. This reveals the entirety of the previous screen when it ends). The code below does the same thing, but we’re also animating the opacity. Aside from that, the transition will have a bit of bounce to it, since we applied Easing.bounce as the easing function. This will gradually fade into the next screen when moving forward, and fade the current screen out when going back:

// Root.js
const translateX = position.interpolate({
  inputRange: [thisSceneIndex - 1, thisSceneIndex],
  outputRange: [width, 0],
  extrapolate: "clamp" // clamp so it doesn't go beyond the outputRange. Without this, you'll see a few black portions in the screen while navigating
});

const opacity = position.interpolate({
  inputRange: [thisSceneIndex - 1, thisSceneIndex - 0.5, thisSceneIndex],
  outputRange: [0, 0.2, 1],
  extrapolate: "clamp"
});
return { opacity, transform: [{ translateX }] }; // return the animated styles to be applied to the current view upon navigation

From the code above, you can see that we’re actually using the same Animated API that we’ve previously used. This means that you can actually apply the rotation, scale, spring, and all the other animations we’ve previously implemented. Your imagination is the limit! Don’t go overboard though, transition animations should be fast and simple to avoid annoying the user.

Note that we don’t have to specify how the position will be interpolated when going back to a previous page. React Navigation also takes care of this.

Lastly, don’t forget to export the RootStack:

export default RootStack;

Adjust the header title

With the addition of the header added by React Navigation, we have to adjust the header title accordingly. Open the src/components/AnimatedHeader.js file and replace the following line:

const titleTranslateY = nativeScrollY.interpolate({
  /*previously added inputRange and extrapolate value here*/
  outputRange: [25, 35, 15] // existing outputRange
});

With this line:

const titleTranslateY = nativeScrollY.interpolate({
  outputRange: [0, -10, -8] // only replace existing outputRange with this line, other lines inside this are still intact
});

Because there is now a header above the animated header, we no longer have to add a Y position. We can even add a negative Y position and it won’t go over the status bar.

Solving the header issue

At this point, you should now be able to try the transition out in your device or emulator. But if you try the animated modal that we’ve implemented on the first part, you’ll see this:

The issue above is that the parent of the AnimatedModal component has a lower z-index value than the header. That’s fine because we want the header to be on top of everything else. That is, except for modal windows. This is one of the benefits of using React Native’s Modal component because it is laid on top of everything else. But we opted out of it because we wanted full control of the animations.

To solve the issue, we’ll create a new screen which shows the same contents as the AnimatedModal. And then we’ll tell React Navigation to treat the new screen as a modal, not a screen.

The first step is to copy the contents of the src/components/AnimatedModal.js file into a new file called src/screens/Details.js. The following are the changes that need to be made:

Remove all the code that animates the Animated Modal. The animations will now be implemented using React Navigation so we no longer have to implement it on our own.
Update the code so it no longer uses the Header component. The new Details page will be headerless.
Props should be coming from the navigation instead of supplied directly to the component.
Add a button for closing the modal. This will simply navigate the user backward, but it will use the same animation as a modal. The screen can also be flicked downwards just like a modal does.

Once those changes are made, the code should now look like this:

// src/screens/Details.js
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";

import BigCard from "../components/BigCard";

type Props = {};
export default class Details extends Component<Props> {
  render() {
    const { navigation } = this.props;
    const title = navigation.getParam("title");
    const image = navigation.getParam("image");
    const data = navigation.getParam("data");

    return (
      <View style={styles.container}>
        <View style={styles.modalContent}>
          <TouchableOpacity
            style={styles.closeButton}
            onPress={() => {
              navigation.goBack();
            }}
          >
            <Text style={styles.closeText}>Close</Text>
          </TouchableOpacity>
          <BigCard title={title} image={image} data={data} />
        </View>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  modalContent: {
    flex: 1,
    alignItems: "stretch",
    paddingTop: 30
  },
  closeButton: {
    alignSelf: "flex-end"
  },
  closeText: {
    color: "#333",
    paddingRight: 10
  }
};

You also need to update src/components/BigCard.js so it only initiates the animation on componentDidMount instead of componentDidUpdate. This is because it no longer resides inside the AnimatedModal component which is simply hidden from view. To do that, simply replace componentDidUpdate with componentDidMount. All the code inside of it is still intact.

Next, update the src/screens/Main.js file so it no longer uses the AnimatedModal component when the View button is clicked. It should navigate to the Details screen instead:

viewAction = (pokemon, image) => {
  this.props.navigation.navigate("Details", {
    title: pokemon,
    image: image,
    data: this.getPokemonStats()
  });
};
// next: add function declaration for getPokemonStats()

At this point, you can delete the src/components/AnimatedModal.js file as well.

Here’s the code for the getPokemonStats function:

// src/screens/Main.js
// add right after viewAction
getPokemonStats = () => {
  let pokemon_stats_data = [];
  pokemon_stats.forEach(item => {
    pokemon_stats_data.push({
      label: item,
      value: getRandomInt(25, 150)
    });
  });

  return pokemon_stats_data;
};

Next, import the DetailsScreen from the Root.js file:

import DetailsScreen from "./src/screens/Details";

Still on the Root.js file, we need to tell React Navigation that the Details screen should be treated as a modal. The following are the steps for doing so.

Create a new Stack Navigator. This contains the screens of the app. These are the same as what we have earlier, so all you have to do is copy the existing RootStack and paste the new one on top of the existing one then rename it to MainStack. Once that’s done, your code should look like this:

// Root.js
const MainStack = createStackNavigator(
  {
    Main: {
      screen: MainScreen
    },
    Share: {
      screen: ShareScreen
    }
  },
  {
    initialRouteName: "Main",
    transitionConfig
  }
);

const RootStack = createStackNavigator({...}); //next: add config options in place of "..."

The RootStack will now have the MainStack and the DetailsScreen as its screens. We’re also supplying an object specifying that the mode should be modal, and if it is, then there will be no header displayed. This setup works because we’ve wrapped our screens (Main and Details) inside a Stack Navigator. Thus, only the screens which are used as is will be considered as a modal:

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack // MainStack was previously MainScreen
    },
    Details: {
      // existing ShareScreen is remove and replaced with this one
      screen: DetailsScreen
    }
  },
  // replace initialRouteName and transitionConfig with below code:
  {
    mode: "modal",
    headerMode: "none" // don't display a header if modal
  }
);

The last step is to clean up the remaining AnimatedModal code on src/screens/Main.js. Make sure to remove this specific code from that file:

<AnimatedModal
  title={"View Pokemon"}
  visible={this.state.isModalVisible}
  onClose={() => {
    this.setState({
      isModalVisible: false
    });
  }}
>
  <BigCard
    title={this.state.pokemon}
    image={this.state.image}
    data={this.state.stats}
  />
</AnimatedModal>

Once you’ve made the necessary changes, it will now look like this:

LayoutAnimation

The last animation that we’re going to implement is LayoutAnimation, and it looks like this:

React Native’s LayoutAnimation is only useful for simple animations. These animations are automatically applied to the components whose state was recently updated.

In the demo above, we’re shuffling the array of Pokemon data when the button in the header is clicked. The state is then updated with the newly ordered data. This results in the spring animation that you see above.

LayoutAnimation can be implemented in three steps:

Import the LayoutAnimation module.
Specify the animation you want to perform when the state is updated.
Call LayoutAnimation.configureNext right before the state is updated.

Before we proceed, note that LayoutAnimation isn’t enabled on Android by default. This is because it’s still considered as an experimental feature in Android. For iOS, it should work by default.

Start by opening the src/screens/Main.js file and import the following:

import { /* existing modules here */ Platform, UIManager } from "react-native";

Then check if the platform is Android then enable LayoutAnimation:

if (Platform.OS === "android") {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

Now that that’s taken care of, let’s get into it.

First, import the LayoutAnimation module:

// src/screens/Main.js
import { /* existing modules here */ LayoutAnimation } from "react-native";

Next, specify the type of animation. This requires the type and property to be supplied:

type - the type of animation you want to perform. Currently, these includes the following preset values: easeIn, easeInEaseOut, easeOut, linear, spring.
property - the property you want to animate. Currently, only scaleXY and opacity are available. scaleXY animates the width and height of the component, while opacity animates the opacity.
springDamping - how much resistance you want to apply to the spring. This should be a value that’s less than or equal to one. The lesser the number, the more spring will be applied to the component.

// src/screens/Main.js
const springAnimationProperties = {
  type: LayoutAnimation.Types.spring,
  property: LayoutAnimation.Properties.scaleXY,
  springDamping: 0.3
};

Next, construct the actual animation config. Specify the animations to be performed when a new component is rendered (create), when an existing component is updated (update), and when a component is deleted (delete). In this case, we’re specifying the same animation for all three. But you can also omit update and delete since we’ll only be using create as you’ll see later:

const animationConfig = {
  duration: 500, // how long the animation will take
  create: springAnimationProperties,
  update: springAnimationProperties,
  delete: springAnimationProperties
};

Next, add an onPress prop to AnimatedHeader. The function you pass to it will be executed when the user clicks on the header button which we’ll be adding shortly:

<AnimatedHeader
  title={"Poke-Gallery"}
  nativeScrollY={nativeScrollY}
  onPress={this.shuffleData}
/>

After that, update the AnimatedHeader so it wraps the header text with TouchableOpacity. We then pass the onPress prop to it so it gets executed when the a user clicks on it. Don’t forget to destructure TouchableOpacity out of react-native first, as well as destructure onPress from the props passed to AnimatedHeader before doing this:

// src/components/AnimatedHeader.js
<Animated.View style={[styles.header_bar, headerBarStyles]}>
  <TouchableOpacity onPress={onPress}>
    <Text style={styles.header_text}>{title}</Text>
  </TouchableOpacity>
</Animated.View>

Going back to the Main screen, below is the shuffleData function. This is where the final piece of LayoutAnimation happens. Right before you update the state with the shuffled data, call LayoutAnimation.configureNext() and supply the animationConfig from earlier:

// src/screens/Main.js
shuffleData = () => {
  LayoutAnimation.configureNext(animationConfig); // configure next LayoutAnimation
  let newArray = shuffleArray(this.state.pokemon); // randomly order the items in the array
  this.setState({
    pokemon: newArray
  });
};

Don’t forget to set the default pokemon array in the state:

export default class Main extends Component<Props> {
  state = {
    pokemon: pokemon
  };
}

And then set it as the data source for the CardList component:

// this is inside the render method of src/screens/Main.js
<CardList
  data={this.state.pokemon}
  ...previously added props
/>

The shuffleArray function is declared in the src/lib/random.js file:

const shuffleArray = arr => {
  return arr
    .map(a => [Math.random(), a])
    .sort((a, b) => a[0] - b[0])
    .map(a => a[1]);
};
export { /* existing exports here */ shuffleArray };

Don’t forget to import it on the src/screens/Main.js file:

import { /* existing imports here */ shuffleArray } from "../lib/random";

Once that’s done, the spring animation is performed when you click on the header text.

Conclusion

That’s it! In this tutorial, you’ve learned how to add transition animations to your React Native app. As you have seen, the React Navigation library made it easy for us to implement custom page transition animations. You’ve also seen that when it comes to animations, there are a few changes for each platform that we need to deal with before we can implement the same animations.

The full source code for this tutorial is available on this GitHub repo. Be sure to switch to the part2 branch if you only want the final output for this part of the series.

Originally published on the Pusher blog

Adding animations to your React Native app - Part 1: Basic Animations

Wern Ancheta — Tue, 09 Jul 2019 03:45:32 +0000

Animations are an important part of the user experience, especially for mobile apps. Animations provide users with a clear feedback when they’re interacting with the UI elements in the app. Animations bring the app to life through the use of movement.

Whenever the app needs to perform a long operation, animations can be used to entertain the user. At the same time, it can also be used to inform the user of the operation’s status. Most importantly, animations can be used to teach the user how to interact with the app. This is through the use of meaningful transitions when hiding or showing UI elements.

In this series, we’ll be taking a look at how we can implement animations in a React Native app. In each part, you will learn the following:

How to implement basic animations such as scale, spring, and transform.
How to implement transition animations when users navigate from one page to another.
How to implement gesture animations when users interact with UI elements.

Prerequisites

In order to follow this tutorial, you must have basic knowledge of React and React Native. This tutorial assumes that you have a working knowledge of the following concepts:

State
Refs and Props
Component lifecycle methods
Class-based and functional components

Aside from that, you should also be familiar with some ES6 features. Things like object destructuring and spread operator.

I also assume that your computer is set up for React Native development. If you’re using Expo, you can also follow along as this tutorial doesn’t require the use of any native modules. But I’ll let you handle the modifications required to get the app running.

What you’ll be building

Throughout the whole series, we’re going to build just a single app. We will be adding the animations mentioned above as we go along.

On the first part of the series, here’s what the final output is going to look like:

The app is going to be a Pokemon gallery app where users can view the details of a Pokemon. The app will have minimal functionality to keep the focus on animation.

Setting up the project

In order for us to get to the animation part as soon as possible, I’ve already set up a React Native project which has all the screens and components that the app requires. You can clone it using the command below:

git clone https://github.com/anchetaWern/RNRealworldAnimations.git

The repo defaults to the master branch which contains the final output for the whole series. Switch to the starter branch so you can follow along with this part of the series:

cd RNRealworldAnimations
git checkout starter

After switching, install all the required packages:

npm install

Next, execute the following in order to add the android and ios directories:

react-native upgrade

The project uses React Native Vector Icons, and it needs to be linked to the native project, so execute the following as well:

react-native link

Once it’s done installing, you should be able to run the app on your emulator or device:

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

Scale animation

The first type of animation we’re going to implement is a scale animation and it looks like this:

What we want to do is to scale up the size of the card as the user is pressing the card. We then scale it back down once they release it. The component that we will be working on is the Card component (src/components/Card.js).

Animations in React Native can be implemented through the following steps:

Import the animation modules.
Declare an animated value.
Specify how the animated value will change over time.
Set the animated style and render an animated version of the component.
Start the animation.

The first step is to import the animation modules. React Native already provides modules that allow us to add animations to our apps, go ahead and import them:

// src/components/Card.js
import {
  // previously imported modules
  Animated, // provides methods for animating components
  Easing // for implementing easing functions
} from "react-native";

Next, declare an animated value. In a functional component like the Card component, this can be done right before you return the component to be rendered:

const Card = ({
  // props destructuring
}) => {
  let scaleValue = new Animated.Value(0); // declare an animated value

In the above code, we’re initializing an animated value to zero. Most of the time, this is what you’ll want to do. This is because every component always starts out as static, they only move once the user interacts with it or it becomes visible in the foreground. The updating of this animated value is what allows us to move components as you’ll see later on. It has the same idea as the state though animated values are specifically used for animations.

The next step is to specify how the animated value will change over time. All animated values come with an interpolate method which allows us to update its value once the animation is started. This method accepts an object containing an inputRange and outputRange properties. Each one has an array value which maps to one another:

const cardScale = scaleValue.interpolate({
  inputRange: [0, 0.5, 1],
  outputRange: [1, 1.1, 1.2]
});

When I said “maps to one another”, I mean this:

0 → 1
0.5 → 1.1
1 → 1.2

We’ve already initialized the animated value to 0. This is one of the values we’ve specified in the inputRange, and the corresponding outputRange value for that is 1. The outputRange in this case refers to the scale factor of the component. 1 means it’s the same as its original size because any integer that you multiply by 1 will always be equal to itself.

Next, is 0.5 is to 1.1. This means that when the animation gets halfway through its peak, we want to scale the component so it’s 10% bigger than its original size. And by the time the animation reaches its peak, we want it to be 20% bigger. Note that we only need to specify a sample for the input and output ranges. The animation library will automatically figure out anything in between the numbers you specified. This ensures that the animation is as smooth as possible.

The next step to implement the animation is to set the animated style and render an animated version of the component. All you have to do is to replace <View style={styles.card}> with <Animated.View style={transformStyle}>. So you’re essentially wrapping the entire contents of the Card component with Animated.View. Here’s what that looks like in code:

let transformStyle = { ...styles.card, transform: [{ scale: cardScale }] };

return (
  <TouchableWithoutFeedback>
    <Animated.View style={transformStyle}>
      <Image source={item.pic} style={styles.thumbnail} />
      <Text style={styles.name}>{item.name}</Text>
      <View style={styles.icons}>
        <IconButton
          icon="search"
          onPress={() => {
            viewAction(item.name, item.full_pic);
          }}
          data={item}
        />
        <IconButton icon="bookmark" onPress={bookmarkAction} data={item} />
        <IconButton icon="share" onPress={shareAction} data={item} />
      </View>
    </Animated.View>
  </TouchableWithoutFeedback>
);

On the first line of the code above, we’re creating a new style object composed of the card’s default style (styles.card) and the transform styles. If you’re familiar with CSS animations, this should make sense to you. But if not, the code above is using a CSS scale transform declaration to scale the size of the card based on the current value of the animated value.

When you render an animated component, you should use the animated version. React Native comes with three primitive components: View, Text, Image and ScrollView. To use the animated versions of these, all you have to do is prefix them with Animated, so View becomes Animated.View and so on.

The last step to implement the animation is to actually start it. In the starter code, the Card component is using the onPress event handler. And yes, we can actually start the animation from there:

<TouchableWithoutFeedback
  onPress={() => {
    scaleValue.setValue(0);
    Animated.timing(scaleValue, {
      toValue: 1,
      duration: 250,
      easing: Easing.linear,
      useNativeDriver: true
    }).start();

    cardAction();
  }}
/>

The only problem is that the code above doesn’t really take into consideration when the user is holding down the component. If you try to run it, the component will simply go back to its original size even while the user is still holding it down.

Thankfully, the TouchableWithoutFeedback component already comes with an onPressIn and onPressOut event handlers. This allows us to capture when the user is holding down the button or when they already released it:

<TouchableWithoutFeedback
  onPressIn={() => {
    scaleValue.setValue(0);
    Animated.timing(scaleValue, {
      toValue: 1,
      duration: 250,
      easing: Easing.linear,
      useNativeDriver: true
    }).start();

    cardAction();
  }}
  onPressOut={() => {
    Animated.timing(scaleValue, {
      toValue: 0,
      duration: 100,
      easing: Easing.linear,
      useNativeDriver: true
    }).start();
  }}
>

Breaking down the code above, first, we go through the body of the onPressIn method. First, we set the animated value to 0. This effectively resets the animation everytime the user initiates it:

scaleValue.setValue(0);

Next, we start the animation by using the timing animation. This allows us to update the animated value over a specific period of time. This method accepts two arguments: an animated value, and an object containing the settings to use for the animation.

In the code below, we’re telling it to update the animated value to 1 over the course of 250 milliseconds and it will use the linear easing function:

Animated.timing(scaleValue, {
  toValue: 1, // update the animated value to
  duration: 250, // how long the animation will take in milliseconds
  easing: Easing.linear, // easing function to use (https://facebook.github.io/react-native/docs/easing.html)
  useNativeDriver: true // delegate all the animation related work to the native layer
}).start(); // start the animation

When the user releases the component, all we have to do is bring back the animated value to its initial value over a specific period of time. This effectively reverses the animation by scaling back the size of the component:

onPressOut={() => {
  Animated.timing(scaleValue, {
    toValue: 0, // reset the animated value to 0
    duration: 100, // animate over 100ms
    easing: Easing.linear,
    useNativeDriver: true
  }).start();
}}

Note that when you’re working with animations that are triggered by user controls, you want to use React Native components that don’t already have built-in animation behavior. In the case of a button, React Native also has Button, TouchableOpacity and TouchableNativeFeedback components. These are all pretty much the same, but they all have built-in animation behavior when a user interacts with them. That’s why we used TouchableWithoutFeedback to have full control over the animation without the need to override built-in behavior.

Rotate animation

The next type of animation is a rotate animation and it looks like this:

Here we want to rotate or spin the buttons whenever the user presses on it. It has the same mechanics as the scale animation of the Card component earlier, the only difference is that we’re rotating the component instead of scaling it.

This time, we’ll be working with the IconButton component (src/components/IconButton.js). IconButton is a class-based component, and the best place to declare an animated value is inside the constructor:

constructor(props) {
  super(props);
  this.rotateValue = new Animated.Value(0); // declare animated value
}

Inside the render method, we specify how the animated value will change. Since we’re doing a rotate animation, the outputRange is different. This time, we’re using a string value which specifies the degrees the animated value will rotate:

render() {
  const { icon, onPress, data } = this.props;

  let rotation = this.rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"] // degree of rotation
  });
  // next: add transformStyle  
}

Next, declare the styles for rotating the component:

let transformStyle = { transform: [{ rotate: rotation }] };

Render the component:

<TouchableWithoutFeedback
  onPressIn={() => {
    Animated.timing(this.rotateValue, {
      toValue: 1,
      duration: 700,
      easing: Easing.linear
    }).start();
    onPress(data);
  }}
  onPressOut={() => {
    Animated.timing(this.rotateValue, {
      toValue: 0,
      duration: 350,
      easing: Easing.linear
    }).start();
  }}
>
  <Animated.View style={transformStyle}>
    <Icon name={icon} style={styles.icon} size={icon_size} color={icon_color} />
  </Animated.View>
</TouchableWithoutFeedback>

As you can see from the code above, the code for starting and stopping the animation is pretty much the same as the scaling animation. We animate towards the desired value when the user interacts on it, then we reverse it when the user releases.

Another thing to notice is that we’re not animating the component itself, but its child (Animated.View). Note that the component that’s being animated doesn’t always need to be a child of the component being interacted upon (TouchableWithoutFeedback). It can be anywhere else in the render tree. As long as the component you want to animate is currently being rendered (it doesn’t have to be visible), you can animate it.

Spring animation

The next type of animation is a spring animation and it looks like this:

This time, we’ll be working with the AnimatedModal component (src/components/AnimatedModal.js). Currently, it’s not “Animated” yet so let’s go ahead and do that.

Unlike the two previous components we’ve worked with so far, this one relies on the state. If you open the App.js file, the modal is opened when isModalVisible is set to true:

viewAction = (pokemon, image) => {
  // ...
  this.setState({
    // ...
    isModalVisible: true
  });
};

Then inside the render method of AnimatedModal, by default, we set its bottom value to be equal to the negative value of the screen’s height. This effectively hides the component from view. When isModalVisible is set to true the bottom value is updated to 0. This returns the component back to its original position:

import {
  /* previously imported modules here */
  Animated, // add this
  Easing // add this
} from "react-native";
const { height, width } = Dimensions.get("window");

type Props = {};
export default class AnimatedModal extends Component<Props> {
  render() {
    const { title, image, children, onClose } = this.props;
    let bottomStyle = this.props.visible ? { bottom: 0 } : { bottom: -height }; // show or hide the component from view
  }
}

This works, but there’s really no animation taking place when the component is hidden or shown from view. Let’s go ahead and fix this:

constructor(props) {
  super(props);
  this.yTranslate = new Animated.Value(0); // declare animated value for controlling the vertical position of the modal
}

Inside the render method, specify how the bottom value will change once the animation is started. In this case, we want the animated value (yTranslate) to be 0 at the beginning of the animation. And it will become a specific height once it finishes:

render() {
  const { title, image, children, onClose } = this.props;

  let negativeHeight = -height + 20;
  let modalMoveY = this.yTranslate.interpolate({
    inputRange: [0, 1],
    outputRange: [0, negativeHeight]
  });

  let translateStyle = { transform: [{ translateY: modalMoveY }] }; // translateY is the transform for moving objects vertically
  // next: render the component
}

Breaking down the code above, first, we need to determine the final bottom value once the animation finishes. Here, we’re getting the negative equivalent of the screen’s height and adding 20:

let negativeHeight = -height + 20;

But why? If you scroll down to the styles declaration of the component, you’ll find that the bottom value is set to the negative equivalent of the screen’s height:

const styles = {
  container: {
    position: "absolute",
    height: height,
    width: width,
    bottom: -height, // look here
    backgroundColor: "#fff"
  }
  // ... other styles
};

So translating the Y position (vertical position) of the component to -height means that it will cancel out the bottom value declared in the styles. Remember that when two negative values are subtracted, they cancel each other out because the subtrahend (number on the rightmost portion of the equation) is converted to a positive number and the operation becomes addition:

translateY = -1 - -1;
translateY = -1 + 1;
translateY = 0;

This effectively brings the component back to its original position. The 20 that we’re adding is the height of the uppermost portion of the screen (where the battery, time, and signal is indicated). We don’t really want the modal to replace those.

Next, apply the translateStyle to the component:

return (
  <Animated.View style={[styles.container, translateStyle]}>
    <Header title={title}>
      <TouchableOpacity onPress={onClose}>
        <Text style={styles.closeText}>Close</Text>
      </TouchableOpacity>
    </Header>
    <View style={styles.modalContent}>{children}</View>
  </Animated.View>
);

On the modal’s header, we have a TouchableOpacity which allows us to close the modal. This executes the onClose method passed as a prop from the App.js file:

<AnimatedModal
  title={"View Pokemon"}
  visible={this.state.isModalVisible}
  onClose={() => {
    this.setState({
      isModalVisible: false
    });
  }}
>
  ...
</AnimatedModal>

Having done all the necessary setup, how do we actually start the animation? We know that the animation should be started when the value of isModalVisible is updated. But how do we know when the state is actually updated? Well, we can use the componentDidUpdate lifecycle method to listen for when the component is updated. This function is called every time the state is updated because we’re using a prop which relies on the state’s value (visible).

Here’s the code:

componentDidUpdate(prevProps, prevState) {
  if (this.props.visible) {
    // animate the showing of the modal
    this.yTranslate.setValue(0); // reset the animated value
    Animated.spring(this.yTranslate, {
      toValue: 1,
      friction: 6
    }).start();
  } else {
    // animate the hiding of the modal
    Animated.timing(this.yTranslate, {
      toValue: 0,
      duration: 200,
      easing: Easing.linear
    }).start();
  }
}

There’s nothing really new with the code above, aside from the fact that we’re starting the animation from a lifecycle method instead of from an event handler. Another is that we’re using a spring animation. This is similar to the timing animation, though it differs in the options that you pass to it.

The spring animation only requires you to pass toValue for the options, but here we’re passing the friction as well. This allows us to specify how much friction we apply in the spring. The higher friction means less spring or bounciness. The value we specified is close to the default value which is 7. This adds just a little bit of spring to the upward motion as the modal becomes visible:

Animated.spring(this.yTranslate, {
  toValue: 1,
  friction: 6 // how much friction to apply to the spring
}).start();

You might be wondering why we created our own modal component instead of React Native’s Modal component. That’s because it already comes with animation capabilities. But the downside is that it’s hard to customize the animation because the default behavior gets in the way.

Width animation

The next type of animation is width animation and it looks like this:

In the above demo, we’re animating the width of the bar which represents the individual stats of the Pokemon.

This time, open the src/components/AnimatedBar.js file. If you run the app right now, the bars should just be static. What we’ll do is animate it from a width of 0 to its proper width.

Start by declaring the animated value:

constructor(props) {
  super(props);
  this.width = new Animated.Value(0);
}

Then in the render method, we set the component’s width to be equal to the animated value:

render() {
  let barWidth = {
    width: this.width
  };
  return <Animated.View style={[styles.bar, barWidth]} />;
}

Yeah, that’s right. In the code above, we don’t actually need to specify how the animated value will change over time. Using the interpolate method is optional if all we need to animate is the component’s width, height, margin, or padding. You can still use it if you want to have fine control over how the animated value will change. But since the width is a very linear property, we don’t really need to do that. Plus the animation looks better if the width changes in uniform fashion over time.

Next, create a function which will start the animation. So that the width for each bar doesn’t get animated at the same time, we’re adding a delay that is based on the current index. The first stat (HP) will have an index of 0 so there’s no delay. The second one will have a 150-millisecond delay, the third one will be twice as that and so on. This allows us to achieve the cascading effect that you saw on the demo earlier:

animateBar = () => {
  const { value, index } = this.props;
  this.width.setValue(0); // initialize the animated value
  Animated.timing(this.width, {
    toValue: value,
    delay: index * 150 // how long to wait before actually starting the animation
  }).start();
};

We start the animation when the component is mounted and when its props are updated:

componentDidMount() {
  this.animateBar();
}

componentDidUpdate() {
  this.animateBar();
}

You might be asking why we need to start the animation on both componentDidMount and componentDidUpdate. Well, the answer is that the component is only mounted once when the app is started. This is because its parent (AnimatedModal) is always rendered. It’s just hidden from view because of the negative bottom value. On the first time the AnimatedModal is opened, the componentDidMount function in the AnimatedBar is executed. But for the succeeding views, only the componentDidUpdate function is executed.

Also, note that we’re updating the value of the stats every time the modal is opened. This allows us to still animate the width even if the user viewed a specific Pokemon twice in a row:

// pre-written code on the App.js file
viewAction = (pokemon, image) => {
  this.pokemon_stats = [];
  pokemon_stats.forEach(item => {
    this.pokemon_stats.push({
      label: item,
      value: getRandomInt(25, 150)
    });
  });
};

Next, right below the mainContainer on the BigCard component, make sure that the renderDataRows function is being called. This function renders the DataRow component which in turn renders the AnimatedBar:

// src/components/BigCard.js
render() {
  /* previously written animation code here */

 return (
  <View style={styles.container}>
    <View style={styles.mainContainer}>
      ...current contents here
    </View>
  </View>
  {data && (
    <View style={styles.dataContainer}>{this.renderDataRows(data)}</View>
  )}
}

The last step is to make sure the AnimatedBar is rendered inside the DataRow component. The code for that is already pre-written, so all you have to do is make sure <AnimatedBar> is rendered somewhere inside the src/components/DataRow.js file.

Sequence animation

The last type of animation that we’re going to look at is the sequence animation and it looks like this:

There’s a lot happening in the demo above, so let’s break it down. A sequence animation is basically a collection of different animations that are executed one after the other. In the demo above, we’re performing the following animations in sequence:

Opacity animation - changes the Pokemon’s big image from an opacity of zero to one.
Translate animation - changes the position of the title. Starting from the top up to its proper position below the big Pokemon image.
Scale animation - scales the size of the Pokemon’s name.

You already know how to implement the last two animations so I’m not going to explain the code for implementing those in detail. Also, note that this last animation is a bit over the top and you don’t really want to be doing this in a real-world app.

With that out of the way, let’s begin. Open the src/components/BigCard.js file and declare the three animated values that we will be working with:

import {
  /* previously imported modules */ Animated,
  Easing
} from "react-native";

export default class BigCard extends Component<Props> {
  // add the code below
  constructor(props) {
    super(props);
    this.imageOpacityValue = new Animated.Value(0);
    this.titleTranslateYValue = new Animated.Value(0);
    this.titleScaleValue = new Animated.Value(0);
  }
}

Inside the render method, we specify how those three values will change. Interpolating the opacity is pretty much the same as how you would interpolate the scale or the vertical position of a component. The only difference is the style. In the code below, we’re setting the opacity to that interpolated value. This is very similar to how we animated the width for the Pokemon status bars earlier:

render() {
  const { image, title, data } = this.props;
  // interpolate the images opacity
  const imageOpacity = this.imageOpacityValue.interpolate({
    inputRange: [0, 0.25, 0.5, 0.75, 1],
    outputRange: [0, 0.25, 0.5, 0.75, 1]
  });
  // construct the image style
  const imageOpacityStyle = {
    opacity: imageOpacity
  };
  // interpolate the vertical position of the title
  const titleMoveY = this.titleTranslateYValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 280]
  });
  // interpolate the scale of the title
  const titleScale = this.titleScaleValue.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0.25, 0.5, 1]
  });
  // construct the styles for the title
  const titleTransformStyle = {
    transform: [{ translateY: titleMoveY }, { scale: titleScale }]
  };

  // next: render the component
}

Next, we render the component and assign the interpolated styles:

return (
  <View style={styles.container}>
    <View style={styles.mainContainer}>
      <Animated.Image
        source={image}
        style={[styles.image, imageOpacityStyle]}
        resizeMode={"contain"}
      />
      <Animated.View style={[styles.titleContainer, titleTransformStyle]}>
        <Text style={styles.title}>{title}</Text>
      </Animated.View>
    </View>
    ...previous code here
  </View>
);

Note that the titleContainer has a top value of -100. This is the starting position of the title. If you have noticed in the demo earlier, this results in the title being directly below the current local time:

const styles = {
  // .. other styles
  titleContainer: {
    position: "absolute",
    top: -100
  }
  // .. other styles
};

We start the animation when the component is updated. If you open the App.js file, you’ll see that the BigCard component relies on the current value of the state for three of its props. This allows us to use componentDidUpdate to listen for changes in the state:

<BigCard
  title={this.state.pokemon}
  image={this.state.image}
  data={this.state.stats}
/>

Going back to the BigCard component, here’s the code for componentDidUpdate:

componentDidUpdate() {
  // reset the animated values
  this.imageOpacityValue.setValue(0);
  this.titleTranslateYValue.setValue(0);
  this.titleScaleValue.setValue(0);

  // start the sequence
  Animated.sequence([
    Animated.timing(this.imageOpacityValue, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear
    }),
    Animated.timing(this.titleTranslateYValue, {
      toValue: 1,
      duration: 300,
      easing: Easing.linear
    }),
    Animated.timing(this.titleScaleValue, {
      toValue: 1,
      duration: 300,
      easing: Easing.linear
    })
  ]).start();
}

Breaking down the code above, first, we reset the individual animated values, then we start the sequence animation. The sequence method accepts an array of animations. In this case, we’re only using timing animations, but you can actually mix in spring and decay. Another difference is that we only start the sequence animation itself, not the individual animations inside it.

Of course, you can use the same method that we did earlier with the width animations wherein we added a delay setting. The sequence method doesn’t really allow you to specify the delay between each animation. If you want that, then there’s the stagger method.

Conclusion

That’s it! In the first part of this series, you’ve learned how to implement basic animations using React Native’s Animated API. As you have seen, implementing animations in React Native is very code-heavy. This is because it doesn’t come with components that allow you to easily implement even the most basic types of animations. But that’s the price we have to pay for having finer control over how the animations will proceed.

We haven’t actually covered all the animation functions that the Animated library provides. Specifically, we haven’t covered:

Animated.decay
Animated.parallel
Animated.stagger

Be sure to check out the docs if you want to learn about those.

You can check the final source code for this part of the series on its own branch (part1).

Stay tuned for the next part where we will look at how to implement page transition animations.

Originally published on the Pusher blog

Making accessible React Native apps

Wern Ancheta — Fri, 28 Jun 2019 03:53:02 +0000

In this tutorial, you’re going to learn how to make React Native apps more accessible. Specifically, we’re going to cover the following:

What is accessibility?
Designing apps with accessibility in mind
Accessibility in React Native apps
Accessibility testing tools

Of course, we cannot hope to cover everything about accessibility. It’s a pretty big subject and it’s a continuous journey. There’s always something that you can improve in order to make the experience just a little bit more pleasant for a certain user. Instead, what we hope to achieve in this tutorial, is to take that first step into making more accessible apps.

You can view the code used in this tutorial on its GitHub repo. The starter branch contains the not so accessible version of the app, while the a11y branch contains the more accessible version.

Prerequisites

To follow this tutorial, you need to know the basics of creating a React Native app.
The React Native development environment should also be set up on your machine.

We will be using React Native version 0.56 in this tutorial. We’ll also be using Yarn to install packages.

What is accessibility?

Before we proceed, it’s important that we all agree on what accessibility is, in the context of a mobile app. Accessibility or a11y, means making your apps usable to both normal users and users with disabilities. Any person can have one or more form of disability. That usually includes but not limited to the following:

Visual impairments - examples include low vision, color-blindness, and total blindness.
Physical or motor disabilities - cerebral palsy, bone and joint deformities.
Mental disorders - autism spectrum disorders such as Asperger’s syndrome, and autistic disorder.
Hearing impairment - deafness and partial hearing loss.
Reading disabilities - Dyslexia.

Accessibility means designing your apps in such a way that it takes all of these disabilities into consideration in order to make the user experience pleasant for everyone.

What you’ll be building

We won’t actually be building anything from scratch. Instead, we’re going to make a pre-built app more accessible. Here’s what the starter app looks like:

This won’t be how the final output will look like because we’ll also be taking design into consideration (though, only a little because I’m not really a designer).

If you want to follow along, clone the repo, switch to the starter branch and install the dependencies:

git clone https://github.com/anchetaWern/RNa11y.git
cd RNa11y
git checkout starter
yarn install
react-native upgrade
react-native link
react-native run-android
react-native run-ios

Designing apps with accessibility in mind

In this section, we’ll redesign the app so that it becomes more accessible. We will be using the dos and don'ts on designing for accessibility from the GOV.UK website as a guide. Specifically, we’re going to adopt the following dos from their guide:

Use simple colors
Make buttons descriptive
Build simple and consistent layouts
Follow a linear, logical layout
Write descriptive links and heading
Use good contrasts and a readable font size
Use a combination of color, shapes, and text
Make large clickable actions

Right off the bat, you can see that the starter app violates some of these rules. The app is already following a few, but we can still improve on it.

Use simple colors

The starter app violates this rule because it’s using a dark color for its background. It’s not really easy on the eyes, so we need to update the app and card background:

// file: App.js
const styles = {
  container: {
    flex: 10,
    backgroundColor: "#FFF" // update this
  }
};

// src/components/Card.js
const styles = StyleSheet.create({
  card: {
    width: 120,
    height: 140,
    backgroundColor: "#3e3e3e" // update this
  }
});

Also, update the Header component to match. This is because the items in the status bar aren’t really very readable when using a dark background:

// src/components/Header.js
const styles = StyleSheet.create({
  header: {
    paddingTop: 10,
    backgroundColor: "#ccc" // update this
  },
  header_text: {
    fontWeight: "bold",
    color: "#333" // update this
  }
});

Once that’s done, the content should now be more readable.

Make large clickable actions

Next, we need to make the buttons larger. This change is specifically useful for people with physical and motor disabilities, as they’re often the ones who have difficulty in pressing small buttons.

If you inspect the app right now, you’ll see that there’s not much space we can work with. So even if we make the buttons larger, it will still be difficult to target a specific one because there won’t be ample whitespace between them. Though we still have some free space between each card so we’ll make use of that instead.

In your Card component, include the Dimensions module so that we can get the device’s width. We’ll use it to determine how much width each card can use. In this case, we have two cards in each row so we’ll just divide it by two and add a padding. We’re also making the height bigger because we’re anticipating the buttons to become bigger:

// src/components/Card.js

import { View, Text, Image, StyleSheet, Dimensions } from "react-native"; // add Dimensions

const { width } = Dimensions.get("window");

const cardPadding = 20;
const styles = StyleSheet.create({
  card: {
    width: width / 2 - cardPadding, // update this
    height: 150 // update this
  }
});

Next, we can now proceed with updating the size and padding of the button:

// src/components/IconButton.js:

const icon_color = "#586069";
const icon_size = 25; // update this

const styles = StyleSheet.create({
  icon: {
    // update these:
    paddingLeft: 10,
    paddingRight: 10
  }
});

At this point, each button should be huge and visible enough to click on.

Make buttons descriptive

Unfortunately, this isn’t really something that can be implemented all the time because of design constraints. If you check the app now, you’ll see that there’s not really enough space to accommodate labels for each button.

There is a solution, but we will end up giving up the current layout (two cards per row) for a one card per row layout. So the only feasible solution is to have a walkthrough for new users. This way, you can teach what each button is used for. I won’t really be covering how to do that, but there’s a good component which allows you to implement it easily.

Use good contrasts and a readable font size

In my opinion, the app already has pretty good contrast. But to be on the safe side, we’ll tweak it some more.

First, we have to differentiate between each individual card and the app’s background. We can do that by applying a darker background color:

// src/components/Card.js
const cardPadding = 20;
const styles = StyleSheet.create({
  card: {
    width: width / 2 - cardPadding,
    height: 150,
    backgroundColor: "#e0e0e0" // update this
  }
});

Next, we need to differentiate between the card’s body and its contents:

// src/components/Card.js
const styles = StyleSheet.create({
  name: {
    fontSize: 16,
    color: "#3a3f46" // update this
  }
});

// src/components/IconButton.js

const icon_color = "#3a3f46"; // update this
const icon_size = 25;

Lastly, we need to make the text larger. While there’s no general agreement as to what font size should we be using to optimize accessibility, a few people seem to swear by 16px so we’re also going with that:

const styles = StyleSheet.create({
  name: {
    fontSize: 16 // update this
  }
});

We’ve skipped the following because we’re already following them:

Write descriptive links and heading
Follow a linear, logical layout
Use a combination of color, shapes, and text
Build simple and consistent layouts

Once that’s done, the app’s design should be pretty accessible.

Accessibility in React Native apps

The previous section discussed mainly the visual component of accessibility. In this section, we’ll look at how to make the app more accessible for people who use screen readers.

For those unfamiliar, a screen reader reads to users what they’re currently touching on the screen. This technology is mainly used by blind or visually impaired people. If a screen reader is enabled, the user has to double tap in order to activate the intended action.

In order for a screen reader to be useful, we need to properly label all the relevant components that a user will most likely interact upon. In React Native, this can be done by adding accessibility props. Here’s an example of how we can add these props:

// src/components/Header.js
const Header = ({ title }) => {
  return (
    <View
      style={styles.header}
      accessible={true}
      accessibilityLabel={"Main app header"}
      accessibilityRole={"header"}
    >
      <Text style={styles.header_text}>{title}</Text>
    </View>
  );
};

Let’s go through each of the accessibility props we’ve added to the Header component:

accessible - accepts a boolean value that’s used to mark whether a specific component is an accessible element or not. This means that the screen reader will read whatever label you put on it. Be careful with using this though, as it makes all of its children inaccessible. In the Header component above, this makes the Text component inside the View inaccessible. So the screen reader won’t actually read the title indicated in the header. It will only read the accessibilityLabel you’ve passed to the View instead. It’s a good practice to only set the accessible prop to true if you know that the component doesn’t have any child that’s supposed to be treated as an accessible element.
accessibilityLabel - the text you want the screen reader to read when the user touches over it. A good practice when using this prop is to be as descriptive as possible. Remember that the user will only rely on what’s being read by the screen reader. They actually have no idea of the context a specific component is in, so it’s always useful to repeat it in your labels. For example, each of the buttons in each card should still mention the name of the Pokemon.
accessibilityRole - the general role of the component in this app. Examples include: button, link, image, text, and in this case header. Note that header doesn’t only indicate the app’s main header. It can also indicate a section header or a list header.

The next component we’ll update is the IconButton because it’s important that the user knows that those buttons we’ve added are actually buttons:

// src/components/IconButton.js
const IconButton = ({ icon, onPress, data, label }) => {
  return (
    <TouchableOpacity
      accessible={true}
      accessibilityLabel={label}
      accessibilityTraits={"button"}
      accessibilityComponentType={"button"}
      onPress={() => {
        onPress(data.name);
      }}
    >
      <Icon
        name={icon}
        style={styles.icon}
        size={icon_size}
        color={icon_color}
      />
    </TouchableOpacity>
  );
};

From the code above, you can see that we’re accepting a new label prop which we then use as the value for the accessibilityLabel. We’ve also set the component to be accessible which means that when the user’s finger goes over it, the screen reader will read out the accessibilityLabel.

But what about accessibilityTraits and accessibilityComponentType? Well, they are the old way of setting the accessibilityRole. accessibilityTraits is only for iOS and accessibilityComponentType is only for Android. As mentioned in the docs, these props will be deprecated soon. We’re only using it because TouchableOpacity doesn’t seem to be accepting accessibilityRole. The trait (button) wouldn’t show up as I was testing with the accessibility inspector. We’ll go over this tool in the next section.

Lastly, we update the Card component so it passes the correct labels to each of the IconButton. We’re also making the Pokemon Image and Text accessible:

// src/components/Card.js
const Card = ({ item, viewAction, bookmarkAction, shareAction }) => {
  return (
    <View style={styles.card}>
      <Image
        source={item.pic}
        style={styles.thumbnail}
        accessible={true}
        accessibilityRole={"image"}
        accessibilityLabel={`${item.name} image`}
      />
      <Text style={styles.name} accessibilityRole={"text"}>
        {item.name}
      </Text>
      <View style={styles.icons}>
        <IconButton
          icon="search"
          onPress={viewAction}
          data={item}
          label={`View Pokemon ${item.name}`}
        />
        <IconButton
          icon="bookmark"
          onPress={bookmarkAction}
          data={item}
          label={`Bookmark Pokemon ${item.name}`}
        />
        <IconButton
          icon="share"
          onPress={shareAction}
          data={item}
          label={`Share Pokemon ${item.name}`}
        />
      </View>
    </View>
  );
};

In case you’re wondering why we didn’t add the accessible and accessibilityLabel prop in the Pokemon label, it’s because the Text component is accessible by default. This also means that the screen reader automatically reads the text inside of this component.

Accessibility testing tools

In this section, we’ll take a look at four tools you can use to test the accessibility of your React Native app.

Testing accessibility while developing the app
In iOS, you can use the Accessibility Inspector tool in Xcode. Because it’s in Xcode, you have to run the app from Xcode. You can do that by opening the RNa11y.xcodeproj or RNa11y.xcworkspace file inside your project’s ios directory. Then run the app using the big play button located on the upper left side of the screen.

Once the app is running, you can open the Accessibility Inspector tool by going to Xcode → Open Developer Tool → Accessibility Inspector.

From there, you can select the running iOS simulator instance:

Once you’ve selected the simulator, click on the target icon right beside the drop-down. This activates the inspection mode. You can then hover over the components which we updated earlier and verify whether the inspector is reading the labels correctly:

For Android testing, you can use the Accessibility Scanner app. Unlike the Accessibility Inspector in iOS, you have to install it on your emulator or device in order to use it. Once installed, go to Settings → Accessibility → Accessibility Scanner and enable it.

Once it’s enabled, switch to the app that we’re working on and click the floating blue button. This will scan the app for any accessibility issues. Once it’s done scanning, you can click on any of the indicated areas to view the suggestion:

The easiest way to solve this issue is by making the card’s background color lighter. You can also try increasing the contrast of the image as suggested.

Interestingly, if you remove the accessibility props from the image and scan again, you’ll see that it will no longer complain about the contrast:

// src/components/Card.js
const Card = ({ item, viewAction, bookmarkAction, shareAction }) => {
  return (
    <View style={styles.card}>
      <Image source={item.pic} style={styles.thumbnail} />
      ...
    </View>
  );
};

This can mean that the scanner only gets picky when you’ve marked a component as accessible. To test this assumption, try removing the accessibility props from the IconButton:

// src/components/IconButton.js
const IconButton = ({ icon, onPress, data, label }) => {
  return (
    <TouchableOpacity
      onPress={() => {
        onPress(data.name);
      }}
    >
      ...
    </TouchableOpacity>
  );
};

If you run the scanner again, you’ll see that it actually picks up on the issue:

Manual accessibility testing

As with anything, it’s always important to test things manually so you know the actual experience your users are getting. After all, accessibility is all about improving the user experience that your users get when using the app.

Testing in iOS

To test things manually in iOS, open Xcode and run the app on your iOS device. You can also do this from the simulator but that kinda beats the purpose of manual testing. You won’t really have an accurate “feel” of the experience if you’re just testing from a screen.

Once the app is running on your device, go to Settings → Accessibility → VoiceOver. From there, you can select the Speech menu to change the voice (I personally prefer Siri Female). You can also adjust the speaking rate. Adjust a little bit more from the mid-point should be fast enough for most people.

Once you’re done adjusting the settings, enable the VoiceOver setting then switch to the app. From there, you can tap on each of the accessibility areas that we’ve set to verify if it’s being read correctly.

Testing in Android

To test in Android, run the app on your Android device. Once the app is running, go to Settings → Language and set it to your preferred language.

Next, go to Accessibility → Text-to-speech options and make sure the Default language status is fully supported. If not, you have to go to the language settings again and select a supported language.

The equivalent of VoiceOver in Android is TalkBack, you can enable it by going to Accessibility → TalkBack then enable the setting*.* Once enabled, switch to the app and verify if the labels are read correctly as you tap.

Conclusion

That’s it! In this tutorial, you’ve learned how to make React Native apps more accessible to a person with disabilities. I hope that you’ll use the knowledge you’ve gained in order to make accessibility a part of your development workflow. Because all of your users deserve an equal or similar ease of use.

You can view the code used in this tutorial on its GitHub repo.

Originally published on the Pusher tutorial hub.

Create a carpooling app with React Native - Part 2: Creating the frontend

Wern Ancheta — Wed, 19 Jun 2019 03:54:54 +0000

Create a carpooling app with React Native - Part 2: Creating the app

This is the second part of a two-part series on creating a carpooling app with React Native. This is the part where we will be creating the actual app. I’ll be showing you how to set up the app so you can run it on an Android emulator (Genymotion) or an iOS device.

Prerequisites

This tutorial has the same prerequisites as the first part. The following needs to be set up on your machine:

React Native development environment
Docker and Docker Compose
Git

Additionally, you should have already a running server instance which is exposed to the internet via ngrok. Be sure to check out the first part if you haven’t set up any of these yet.

To effectively follow this tutorial, you should have a good grasp of the following React concepts:

props
refs
state
component lifecycle

As for building the app with React Native, knowing how to do the following will be helpful:

How to use primitive React Native components such as the View or Text.
How to add styles to the components.
How to create your own components.

What we’ll be building

The complete details on what we’ll be building are available in the first part of the series. As a refresher, we’ll be building a carpooling app. This allows the user to share the vehicle they’re currently riding in so someone else can hop in the same vehicle. The app is responsible for:

Matching the users so that only the users who are going the same route can share a ride with each other.
After two users are matched, the app provides realtime tracking on where each other currently are.

For the rest of the tutorial, I’ll be referring to the user who is sharing the ride as the “rider”. While the user who is searching for a ride as the “hiker”.

Installing the dependencies

Start by generating a new React Native project:

react-native init Ridesharer

This will create a Ridesharer directory. This will serve as the root directory that we’ll be using for the rest of the tutorial.

The app relies on the following libraries to implement specific features:

axios - for making requests to the server. Although React Native already comes with fetch, axios gives us a simpler API to work with.
pusher-js - the official Pusher JavaScript library. This allows us connect to a Pusher app and send realtime data.
react-native-geocoding - for converting latitude and longitude pairs to the actual name of the place.
react-native-google-places-autocomplete - for searching the user’s destination.
react-native-maps - for showing a map inside the app. This is also used for showing markers on where the users are and their destinations.
react-native-maps-directions - for showing the route from the user’s origin to their destination.
react-native-vector-icons - for using icons inside the app.
react-navigation - for easily implementing navigation between screens.

To ensure that we’re both using the same package versions, open the package.json file and update the dependencies with the following:

"dependencies": {
  "axios": "0.18.0",
  "prop-types": "15.6.1",
  "pusher-js": "4.2.2",
  "react": "16.3.1",
  "react-native": "0.55.4",
  "react-native-geocoding": "0.3.0",
  "react-native-google-places-autocomplete": "1.3.6",
  "react-native-maps": "0.20.1",
  "react-native-maps-directions": "1.6.0",
  "react-native-vector-icons": "4.6.0",
  "react-navigation": "2.0.1"
},

Once that’s done, save the file and execute npm install.

Setting up the dependencies

Now that you’ve installed all the dependencies, there’s one more thing you have to do before you can start coding the app. Additional setup is required for the following dependencies:

Instructions on how to set up the dependencies are available on the GitHub repos for each library. Here are the links to the setup instructions to the specific version we’re using:

Note that if you’re reading this sometime in the future, you’ll probably have to install the latest package versions and follow their latest installation instructions.

Building the app

Now we’re ready to build the app. Navigate inside the Ridesharer directory as that’s going to be our working directory.

Note that anytime you feel confused on where to add a specific code, you can always visit the GitHub repo and view the file.

Index

Open the index.js file and make sure you’re registering the same name that you used when you generated the project. In this case, it should be Ridesharer:

// Ridesharer/index.js
import { AppRegistry } from 'react-native';
import App from './App';

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

Root component

Create a Root.js file. This will serve as the Root component of the app. This is where we set up the navigation so we include the two pages of the app: Home and Map. We will be creating these pages later:

// Ridesharer/Root.js
import React from 'react';
import { StackNavigator } from 'react-navigation';

import HomePage from './app/screens/Home';
import MapPage from './app/screens/Map';

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomePage
    },
    Map: {
      screen: MapPage
    }
  },
  { 
    initialRouteName: 'Home', // set the home page as the default page 
  }
);

export default RootStack;

In the above code, we’re using the StackNavigator, one of the navigators that comes with the React Navigation library. This allows us to push and pop pages to and from a stack. Navigating to a page means pushing it in front of the stack, going back means popping the page that’s currently in front of the stack.

App component

Open the App.js file and render the App component:

// Ridesharer/App.js
import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

import Root from './Root';

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Root />
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

Tapper component

The Tapper component is simply a button created for convenience. We can’t really apply a custom style to the built-in React Native Button component so we’re creating this one. This component wraps the Button component in a View in which the styles are applied:

// Ridesharer/app/components/Tapper/Tapper.js
import React from 'react';
import { View, Button } from 'react-native';

import styles from './styles';

const Tapper = (props) => {
  return (
    <View style={styles.button_container}>
      <Button
        onPress={props.onPress}
        title={props.title}
        color={props.color}
      />
    </View>
  );
}

export default Tapper;

Here’s the style declaration:

// Ridesharer/app/components/Tapper/styles.js
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  button_container: {
    margin: 10
  },
});

Lastly, we export it using an index.js file so that we can simply refer to the component as Tapper without including the Tapper.js file in the import statement later on:

// Ridesharer/app/components/Tapper/index.js
import Tapper from './Tapper';

export default Tapper;

If you don’t want to create a separate component, you can always use the TouchableOpacity and TouchableHighlight components. Those two allow you to add a custom style.

Home page

The Home page is the default page the user sees when they open the app.

Start by including all the React Native packages that we need:

// Ridesharer/app/screens/Home.js
import React, { Component } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  TextInput, 
  Alert, 
  ActivityIndicator, 
  PermissionsAndroid, 
  KeyboardAvoidingView 
} from 'react-native';

Among the packages above, only these three warrants an explanation:

PermissionsAndroid - for asking permissions to use the device’s Geolocation feature on Android.
KeyboardAvoidingView - for automatically adjusting the View when the on-screen keyboard pops out. This allows the user to see what they’re inputting while the keyboard is open. Most of the time, especially on devices with small screen, the input is hidden when the keyboard is open.

Next, include the third-party packages we installed earlier:

import axios from 'axios';
import Icon from 'react-native-vector-icons/FontAwesome';
import Tapper from '../components/Tapper';

Add your ngrok URL (this was created in the first part of the series):

const base_url = 'YOUR NGROK URL';

Declare the function that will ask for the Geolocation permission and then call it:

async function requestGeolocationPermission() {
  try{
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        'title': 'Ridesharer Geolocation Permission',
        'message': 'Ridesharer needs access to your current location so you can share or search for a ride'
      }
    );

    if(granted === PermissionsAndroid.RESULTS.GRANTED){
      console.log("You can use the geolocation")
    }else{
      console.log("Geolocation permission denied")
    }
  }catch(err){
    console.warn(err)
  }
}

requestGeolocationPermission();

Hide the header. The Home page doesn’t need it:

export default class Home extends Component {
  static navigationOptions = {
    header: null,
  };
}

Set the default state for the loader (for controlling the visibility of the ActivityIndicator) and username:

state = {
  is_loading: false,
  username: ''
}

Render the Home page. In this page we have:

An input that asks for the user’s name
A button for sharing a ride
A button for hitching a ride

Note that we’re using the KeyboardAvoidingView as a wrapper. This way, everything inside it will adjust accordingly when the on-screen keyboard becomes visible:

render() {

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
      <View style={styles.jumbo_container}>
        <Icon name="question-circle" size={35} color="#464646" />
        <Text style={styles.jumbo_text}>What do you want to do?</Text>
      </View>

      <View>
        <TextInput
          placeholder="Enter your username"
          style={styles.text_field}
          onChangeText={(username) => this.setState({username})}
          value={this.state.username}
          clearButtonMode={"always"}
          returnKeyType={"done"}
        />
        <ActivityIndicator size="small" color="#007ff5" style={{marginTop: 10}} animating={this.state.is_loading} />
      </View>

      <View style={styles.close_container}>
        <Tapper
          title="Share a Ride"
          color="#007ff5"
          onPress={() => {
            this.enterUser('share');
          }}
        />

        <Tapper 
          title="Hitch a Ride" 
          color="#00bcf5" 
          onPress={() => {
            this.enterUser('hike');
          }} 
        />
      </View>

    </KeyboardAvoidingView>
  );
}

When either of the buttons is pressed, the function below gets executed. All it does is create the user if they don’t already exist:

enterUser = (action) => {
  if(this.state.username){ // user should enter a username before they can enter

    this.setState({
      is_loading: true
    });

    // make a POST request to the server for creating the user
    axios.post(`${base_url}/save-user.php`, {
      username: this.state.username // the username entered in the text field
    })
    .then((response) => {

      if(response.data == 'ok'){
        // hide the ActivityIndicator
        this.setState({
          is_loading: false
        });

        // navigate to the Map page, submitting the user's action (ride or hike) and their username as a navigation param (so it becomes available on the Map page)
        this.props.navigation.navigate('Map', {
          action: action,
          username: this.state.username
        });
      }

    });

  }else{
    Alert.alert(
      'Username required',
      'Please enter a username'
    );
  }
}

Add the styles for the Home page:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around'
  },
  jumbo_container: {
    padding: 50,
    alignItems: 'center'
  },
  jumbo_text: {
    marginTop: 20,
    textAlign: 'center',
    fontSize: 25,
    fontWeight: 'bold'
  },
  text_field: {
    width: 200,
    height: 50,
    padding: 10,
    backgroundColor: '#FFF', 
    borderColor: 'gray', 
    borderWidth: 1
  }
});

Map page

The Map page contains the main meat of the app. This allows the user to share or search for a ride. The tracking of location is implemented via Google Maps, Pusher Channels, and React Native’s Geolocation feature.

Start by including all the React Native packages that we need:

// Ridesharer/app/screens/Map.js
import React, { Component } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  Alert, 
  Dimensions, 
  ActivityIndicator
} from 'react-native';

Next, include the packages that we installed earlier:

import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import MapView, { Marker, Callout } from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import Icon from 'react-native-vector-icons/FontAwesome';
import Pusher from 'pusher-js/react-native'; 
import Geocoder from 'react-native-geocoding';
import axios from 'axios';

Include the location library. We will be creating this later, but for now, know that these functions are used to center the map correctly (regionFrom()) and getting the difference of two coordinates in meters (getLatLonDiffInMeters()):

import { regionFrom, getLatLonDiffInMeters } from '../lib/location';
import Tapper from '../components/Tapper';

Initialize your API keys and ngrok base URL:

const google_api_key = 'YOUR GOOGLE PROJECT API KEY';
const base_url = 'YOUR NGROK BASE URL';
const pusher_app_key = 'YOUR PUSHER APP KEY';
const pusher_app_cluster = 'YOUR PUSHER APP CLUSTER';

Geocoder.init(google_api_key); // initialize the geocoder

Next, also declare the timeouts for searching and sharing a ride. We will be using these values later to reset the app’s UI if it couldn’t match two users within these timeouts:

const search_timeout = 1000 * 60 * 10; // 10 minutes
const share_timeout = 1000 * 60 * 5; // 5 minutes

Setup a default region that the map will display:

const default_region = {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
};

Get the device width. We will be using this later to set the width of the auto-complete text field for searching places:

var device_width = Dimensions.get('window').width;

Next, create the Map component and set the navigationOptions. Unlike the Home page earlier, we need to set a few options for the navigation. This includes the header title and the styles applied to it. Putting these navigation options will automatically add a back button to the header to allow the user to go back to the Home page:

export default class Map extends Component {

  static navigationOptions = ({navigation}) => ({
    headerTitle: 'Map',
    headerStyle: {
      backgroundColor: '#007ff5'
    },
    headerTitleStyle: {
      color: '#FFF'
    }
  });

  // next: add the code for initializing the state
}

Next, initialize the state:

state = {
  start_location: null, // the coordinates (latitude and longitude values) of the user's origin
  end_location: null, // the coordinates of the user's destination
  region: default_region, // the region displayed in the map
  from: '', // the name of the place where the user is from (origin)
  to: '', // the name of the place where the user is going (destination)
  rider_location: null, // the coordinates of the rider's current location
  hiker_location: null, // the coordinates of the hiker's origin
  is_loading: false, // for controlling the visibility of the ActivityIndicator
  has_journey: false // whether the rider has accepted a hiker's request or a hiker's request has been accepted by a rider 
}

// next: add the constructor

Next, add the constructor:

constructor(props) {
  super(props);
  this.from_region = null;
  this.watchId = null; // unique ID for the geolocation watcher. Storing it in a variable allows us to stop it at a later time (for example: when the user is done using the app)
  this.pusher = null; // variable for storing the Pusher instance
  this.user_channel = null; // the Pusher channel for the current user
  this.journey_id = null; // the hiker's route ID
  this.riders_channel = []; // if current user is a hiker, the value of this will be the riders channel
  this.users_channel = null; // the current user's channel
  this.hiker = null // for storing the hiker's origin coordinates; primarily used for getting the distance between the rider and the hiker
}

Once the component is mounted, you want to get the username that was passed from the Home page earlier. This username is used later on as the unique key for identifying each user that connects to Pusher Channels:

componentDidMount() {
  const { navigation } = this.props;
  const username = navigation.getParam('username');

  this.pusher = new Pusher(pusher_app_key, {
    authEndpoint: `${base_url}/pusher-auth.php`,
    cluster: pusher_app_cluster,
    encrypted: true
  });  

  // next: add the code for subscribing to the current user's own channel
}

Next, add the code for subscribing to the current user's own channel. This allows the user to send and receive data in realtime through this channel. In the hiker’s case, they use it to make a request to the matching rider. In the rider’s case, they use it to receive requests coming from hikers as well as sending an acceptance and their current location to the hiker:

this.users_channel = this.pusher.subscribe(`private-user-${username}`); // note that the private-* is required when using private channels

When a rider receives a request, the code below is executed. This alerts the rider that someone wants to ride with them. They can either accept or decline it:

this.users_channel.bind('client-rider-request', (hiker) => {

  Alert.alert(
    `${hiker.username} wants to ride with you`,
    `Pickup: ${hiker.origin} \nDrop off: ${hiker.dest}`,
    [
      {
        text: "Decline",
        onPress: () => {
          // do nothing
        },
        style: "cancel"
      },
      {
        text: "Accept", 
        onPress: () => {
          this.acceptRide(hiker);
        }
      },
    ],
    { cancelable: false } // no cancel button
  );

});

// next: add code for getting the user's origin

Note that in the code above, we’re not really handling declines. This is to keep the focus on the key feature of the app.

Next, get the user’s current location via the Geolocation API. At this point, we can already use the API without problems (unless the user didn’t approve the permission). We’ll just focus our attention on the “happy path” to keep things simple so we’ll assume that the user approved the permission request:

navigator.geolocation.getCurrentPosition(
  (position) => {
    // get the region (this return the latitude and longitude delta values to be used by React Native Maps)
    var region = regionFrom(
      position.coords.latitude, 
      position.coords.longitude, 
      position.coords.accuracy
    );

    // convert the coordinates to the descriptive name of the place
    Geocoder.from({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude
    })
    .then((response) => {
      // the response object is the same as what's returned in the HTTP API: https://developers.google.com/maps/documentation/geocoding/intro

      this.from_region = region; // for storing the region in case the user presses the "reset" button

      // update the state to indicate the user's origin on the map (using a marker)
      this.setState({
        start_location: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        },
        region: region, // the region displayed on the map
        from: response.results[0].formatted_address // the descriptive name of the place
      });

    });

  }
);

Next, add the acceptRide() function. This function is executed when the rider accepts a hiker’s ride request:

acceptRide = (hiker) => {

  const username = this.props.navigation.getParam('username');

  let rider_data = {
    username: username,
    origin: this.state.from, // descriptive name of the rider's origin
    dest: this.state.to, // descriptive name of the rider's destination
    coords: this.state.start_location // the rider's origin coordinates
  };

  this.users_channel.trigger('client-rider-accepted', rider_data); // inform hiker that the rider accepted their request; send along the rider's info

  // make a request to delete the route so other hikers can no longer search for it (remember the 1:1 ratio for a rider to hiker?)
  axios.post(`${base_url}/delete-route.php`, {
    username: username
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((err) => {
    console.log('error excluding rider: ', err);
  });

  this.hiker = hiker; // store the hiker's info

  // update the state to stop the loading animation and show the hiker's location
  this.setState({
    is_loading: false,
    has_journey: true,
    hiker_location: hiker.origin_coords
  });

}

Next, add the function for rendering the UI:

render() {
  const { navigation } = this.props;
  // get the navigation params passed from the Home page earlier
  const action = navigation.getParam('action'); // action is either "ride" or "hike"
  const username = navigation.getParam('username');

  let action_button_label = (action == 'share') ? 'Share Ride' : 'Search Ride';

  // next: add code for rendering the UI
}

The map UI contains the following:

MapView component for rendering the map. Inside it are the following:
- Marker component for showing the origin and destination of the user, as well as for showing the location of the rider (if the user is a hiker), or the hiker (if the user is a rider).
- MapViewDirections component for showing the route from the origin to the destination of the current user.
GooglePlacesAutocomplete component for rendering an auto-complete text field for searching and selecting a destination.
ActivityIndicator for showing a loading animation while the rider waits for someone to request a ride, or when the hiker waits for the app to find a matching rider.
Tapper component for sharing a ride or searching a ride.
Tapper component for resetting the selection (auto-complete text field and marker).

return (
  <View style={styles.container}>

    <MapView
      style={styles.map}
      region={this.state.region}
      zoomEnabled={true}
      zoomControlEnabled={true}
    >
      {
        this.state.start_location &&
        <Marker coordinate={this.state.start_location}>
          <Callout>
            <Text>You are here</Text>
          </Callout>
        </Marker>
      }

      {
        this.state.end_location &&
        <Marker
          pinColor="#4196ea"
          coordinate={this.state.end_location}
          draggable={true}
          onDragEnd={this.tweakDestination}
        />
      }

      {
        this.state.rider_location &&
        <Marker 
          pinColor="#25a25a"
          coordinate={this.state.rider_location}
        >
          <Callout>
            <Text>Rider is here</Text>
          </Callout>
        </Marker>
      }

      {
        this.state.hiker_location &&
        <Marker 
          pinColor="#25a25a"
          coordinate={this.state.hiker_location}
        >
          <Callout>
            <Text>Hiker is here</Text>
          </Callout>
        </Marker>
      }

      {
        this.state.start_location && this.state.end_location &&
        <MapViewDirections
          origin={{
            'latitude': this.state.start_location.latitude,
            'longitude': this.state.start_location.longitude
          }}
          destination={{
            'latitude': this.state.end_location.latitude,
            'longitude': this.state.end_location.longitude
          }}
          strokeWidth={5}
          strokeColor={"#2d8cea"}
          apikey={google_api_key}
        />
      }

    </MapView>

    <View style={styles.search_field_container}>

      <GooglePlacesAutocomplete
        ref="endlocation"
        placeholder='Where do you want to go?'
        minLength={5} 
        returnKeyType={'search'} 
        listViewDisplayed='auto' 
        fetchDetails={true}            
        onPress={this.selectDestination}

        query={{
          key: google_api_key,
          language: 'en', 
        }}

        styles={{
          textInputContainer: {
            width: '100%',
            backgroundColor: '#FFF'
          },
          listView: {
            backgroundColor: '#FFF'
          }
        }}
        debounce={200} 
      />
    </View>

    <ActivityIndicator size="small" color="#007ff5" style={{marginBottom: 10}} animating={this.state.is_loading} />

    {
      !this.state.is_loading && !this.state.has_journey &&
      <View style={styles.input_container}>

        <Tapper 
          title={action_button_label}
          color={"#007ff5"}
          onPress={() => {
            this.onPressActionButton();
          }} />

        <Tapper
          title={"Reset"}
          color={"#555"}
          onPress={this.resetSelection} 
        />

      </View>
    }

  </View>
);

The code above should be pretty self-explanatory. If you’re unsure what a specific prop does, how the component works, or what children is it expecting, you can always check the Github repo of the package we’re using.

Next, let’s move on to the functions used in the UI. The resetSelection() is executed when the reset button is pressed by the user. This empties the auto-complete text field for searching for places, it also updates the state so the UI reverts back to its previous state before the destination was selected. This effectively removes the marker showing the user’s destination, as well as the route going to it:

resetSelection = () => {
  this.refs.endlocation.setAddressText('');
  this.setState({
    end_location: null,
    region: this.from_region,
    to: ''
  });
}

The tweakDestination() function is executed when the user drops the destination marker somewhere else:

tweakDestination = () => {
  // get the name of the place
  Geocoder.from({
    latitude: evt.nativeEvent.coordinate.latitude,
    longitude: evt.nativeEvent.coordinate.longitude
  })
  .then((response) => {
    this.setState({
      to: response.results[0].formatted_address
    });
  });

  this.setState({
    end_location: evt.nativeEvent.coordinate
  });
}

The selectDestination() function is executed when the user selects their destination. This function will update the state so it shows the user’s destination in the map:

selectDestination = (data, details = null) => {

  const latDelta = Number(details.geometry.viewport.northeast.lat) - Number(details.geometry.viewport.southwest.lat)
  const lngDelta = Number(details.geometry.viewport.northeast.lng) - Number(details.geometry.viewport.southwest.lng)

  let region = {
    latitude: details.geometry.location.lat,
    longitude: details.geometry.location.lng,
    latitudeDelta: latDelta,
    longitudeDelta: lngDelta
  };

  this.setState({
    end_location: {
      latitude: details.geometry.location.lat,
      longitude: details.geometry.location.lng,
    },
    region: region,
    to: this.refs.endlocation.getAddressText() // get the full address of the user's destination
  });

}

When the user presses the Share a Ride or Search a Ride button, the onPressActionButton() function is executed. This executes either the shareRide() function or the hikeRide() function depending on the action selected from the Home page earlier:

onPressActionButton = () => {

  const action = this.props.navigation.getParam('action');
  const username = this.props.navigation.getParam('username');

  this.setState({
    is_loading: true
  });

  if(action == 'share'){
    this.shareRide(username);
  }else if(action == 'hike'){
    this.hikeRide(username);      
  }

}

The shareRide() function is executed when a rider shares their ride after selecting a destination. This makes a request to the server to save the route. The response contains the unique ID assigned to the rider’s route. This ID is assigned as the value of this.journey_id. This will be used later to:

Make a request to the server to update the route record stored in the Elasticsearch index.
Know when to start doing something with the current location data. This is because the current position begins to be watched right after the user presses on the Share a Ride button as you’ll see on the code block after this:

shareRide = (username) => {

  axios.post(`${base_url}/save-route.php`, {
    username: username,
    from: this.state.from, 
    to: this.state.to, 
    start_location: this.state.start_location,
    end_location: this.state.end_location
  })
  .then((response) => {
    this.journey_id = response.data.id;
    Alert.alert(
      'Ride was shared!',
      'Wait until someone makes a request.'
    );
  })
  .catch((error) => {
    console.log('error occurred while saving route: ', error);
  });

  // next: add code for watching the rider's current location

}

Next, start watching the user’s current location. Note that we won’t actually do anything with the location data unless the rider has already shared their ride and that they have already approved a hiker to ride with them. Once both conditions are met, we make a request to the server to update the previously saved route with the rider’s current location. This way, when a hiker searches for a ride, the results will be biased based on the rider’s current location and not their origin:

this.watchId = navigator.geolocation.watchPosition(
  (position) => {

    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    let accuracy = position.coords.accuracy;

    if(this.journey_id && this.hiker){ // needs to have a destination and a hiker
      // update the route with the rider's current location
      axios.post(`${base_url}/update-route.php`, {
        id: this.journey_id,
        lat: latitude,
        lon: longitude
      })
      .then((response) => {
        console.log(response);
      });

      // next: add code for sending rider's current location to the hiker

    }

  },
  (error) => {
    console.log('error occured while watching position: ', error);
  },
  { 
    enableHighAccuracy: true, // get more accurate location
    timeout: 20000, // timeout after 20 seconds of not being able to get location
    maximumAge: 2000, // location has to be atleast 2 seconds old for it to be relevant
    distanceFilter: 10 // allow up to 10-meter difference from the previous location before executing the callback function again
  }
);

// last: add code for resetting the UI after 5 minutes of sharing a ride

Next, we send a client-rider-location event to the rider’s own channel. Later, we’ll have the hiker subscribe to the rider’s channel (the one they matched with) so that they’ll receive the location updates:

let location_data = {
  username: username,
  lat: latitude,
  lon: longitude,
  accy: accuracy 
};

this.users_channel.trigger('client-rider-locationchange', location_data); // note: client-* is required when sending client events through Pusher

// update the state so that the rider’s current location is displayed on the map and indicated with a marker
this.setState({
  region: regionFrom(latitude, longitude, accuracy),
  start_location: {
    latitude: latitude,
    longitude: longitude
  }
});

// next: add code for updating the app based on how near the rider and hiker are from each other

Next, we need to get the difference (in meters) between the rider’s coordinates and the hiker’s origin:

let diff_in_meters = getLatLonDiffInMeters(latitude, longitude, this.hiker.origin_coords.latitude, this.hiker.origin_coords.longitude);

if(diff_in_meters <= 20){
  this.resetUI();
}else if(diff_in_meters <= 50){
  Alert.alert(
    'Hiker is near',
    'Hiker is around 50 meters from your current location'
  );
}

Next, add the code for resetting the UI after five minutes without anyone requesting to share a ride with the rider:

setTimeout(() => {
  this.resetUI();
}, share_timeout);

Here’s the code for resetting the UI:

resetUI = () => {

  this.from_region = null;
  this.watchId = null; 
  this.pusher = null; 
  this.user_channel = null; 
  this.journey_id = null;
  this.riders_channel = []; 
  this.users_channel = null; 
  this.hiker = null;

  this.setState({
    start_location: null,
    end_location: null,
    region: default_region,
    from: '',
    to: '',
    rider_location: null, 
    hiker_location: null,
    is_loading: false,
    has_journey: false
  });

  this.props.navigation.goBack(); // go back to the Home page

  Alert.alert('Awesome!', 'Thanks for using the app!');

}

Now let’s move on to the hiker’s side of things. When the hiker presses the Search a Ride button, the hikeRide() function is executed. This function is executed every five seconds until it finds a rider which matches the hiker’s route. If a rider cannot be found within ten minutes, the function stops. Once the server returns a suitable rider, it responds with the rider’s information (username, origin, destination, coordinates). This is then used to subscribe to the rider’s channel so the hiker can request for a ride and receive location updates. Note that this is done automatically, so the hiker doesn’t have control over who they share a ride with:

hikeRide = (username) => {

  var interval = setInterval(() => {
    // make a request to the server to get riders that matches the hiker's route
    axios.post(`${base_url}/search-routes.php`, {
      origin: this.state.start_location,
      dest: this.state.end_location
    })
    .then((response) => {

      if(response.data){

        clearInterval(interval); // assumes the rider will accept the request

        let rider = response.data; // the rider's info

        // subscribe to the rider's channel so the hiker can make a request and receive updates from the rider
        this.riders_channel = this.pusher.subscribe(`private-user-${rider.username}`);

        this.riders_channel.bind('pusher:subscription_succeeded', () => {
          // when subscription succeeds, make a request to the rider to share the ride with them
          this.riders_channel.trigger('client-rider-request', {
            username: username, // username of the hiker
            origin: this.state.from, // descriptive name of the hiker's origin
            dest: this.state.to, // descriptive name of the hiker's destination
            origin_coords: this.state.start_location // coordinates of the hiker's origin
          });
        });

        // next: add code for listening for when the rider accepts their request
      }      
    })
    .catch((error) => {
      console.log('error occurred while searching routes: ', error);
    });

  }, 5000);

  setTimeout(() => {
    clearInterval(interval);
    this.resetUI();
  }, ten_minutes);

}

Once the rider accepts the ride request, the function below is executed:

this.riders_channel.bind('client-rider-accepted', (rider_data) => {
  Alert.alert(
    `${rider_data.username} accepted your request`,
    `You will now receive updates of their current location`
  );

  // update the map to show the rider's origin
  this.setState({
    is_loading: false,
    has_journey: true,
    rider_location: rider_data.coords
  });

  // next: add code for subscribing to the rider's location change
});

As you’ve seen earlier, when the rider’s location changes, it triggers an event called client-rider-location-change. Any user who is subscribed to the rider’s channel and is listening for that event will get the location data in realtime:

this.riders_channel.bind('client-rider-locationchange', (data) => {
  // update the map with the rider's current location
  this.setState({
    region: regionFrom(data.lat, data.lon, data.accy),
    rider_location: {
      latitude: data.lat,
      longitude: data.lon
    }
  });

  let hikers_origin = this.state.start_location;
  let diff_in_meters = getLatLonDiffInMeters(data.lat, data.lon, hikers_origin.latitude, hikers_origin.longitude);

  if(diff_in_meters <= 20){
    this.resetUI();
  }else if(diff_in_meters <= 50){
    Alert.alert(
      'Rider is near',
      'Rider is around 50 meters from your location'
    );
  }
});

Add the styles for the Map page:

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  search_field_container: {
    height: 150, 
    width: device_width, 
    position: 'absolute', 
    top: 10
  },
  input_container: {
    alignSelf: 'center',
    backgroundColor: '#FFF',
    opacity: 0.80,
    marginBottom: 25
  }
});

Location library

Here’s the code for getting the latitude and longitude delta values. As you have seen from the code earlier, this function is mainly used to get the region displayed on the map:

// Ridesharer/app/lib/location.js
export function regionFrom(lat, lon, accuracy) {
  const oneDegreeOfLongitudeInMeters = 111.32 * 1000;
  const circumference = (40075 / 360) * 1000;

  const latDelta = accuracy * (1 / (Math.cos(lat) * circumference));
  const lonDelta = (accuracy / oneDegreeOfLongitudeInMeters);

  return {
    latitude: lat,
    longitude: lon,
    latitudeDelta: Math.max(0, latDelta),
    longitudeDelta: Math.max(0, lonDelta)
  };
}

And here’s the function for getting the difference (in meters) between two coordinates. This is mainly used for notifying the users when they’re already near each other, and to reset the app UI when they’re already very near each other:

export function getLatLonDiffInMeters(lat1, lon1, lat2, lon2) {
  var R = 6371; // radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // distance in km
  return d * 1000;
}

The deg2rad() function used above converts the degrees value to radians:

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

Running the app

Before you can run the app on Android, you need to make sure you have the following Android SDK packages installed, you can find these under SDK Tools on the SDK manager:

Google Play services
Android Support Repository
Google Repository

If you’re going to test the app on Genymotion, you need to install Google Play services first. Since the app is using Google Maps, you need Google Play services for the feature to work. If you have version 2.10 or above, they provide an easy way to install it. Just click on Open GAPPS on a running emulator instance and go through the installation wizard. After that, restart the device and you should be good to go:

To run the app on Android, execute the following command. This will run the app either on an opened emulator instance (for example: Genymotion) or an Android device (if you have connected one):

react-native run-android

If you’re having problems with getting the app to run on Android, be sure to check my article on Debugging common React Native issues on Android.

For iOS, you just have to make sure you have the latest version of Xcode installed. Note that if you want to run the app on a device, you can only do it via Xcode by opening the .xcworkspace file.

To run the app on an iOS device, select your device on Xcode and click the big play button.

To run the app in the iOS simulator, you can also do it via Xcode using the method above. But if you want to run it from the terminal, you can execute the following command from the root directory of your project:

react-native run-ios

If you want to run the app on a specific simulator, you first have to list which devices are available:

xcrun simctl list devicetypes

This will return the list of devices:

You can then copy the device name (for example: iPhone 5s) and specify it as a value for the --simulator option:

react-native run-ios --simulator="iPhone 5s"

If you’re having problems with running the app on an iOS simulator or device, be sure to check my article on Debugging common React Native issues on iOS.

Conclusion

That’s it! In this series, you’ve learned how to create a carpooling app with React Native. Along the way, you also learned the following:

How to use axios to make requests to the server.
How to use React Native’s Geolocation feature.
How to add Google Play Services to Genymotion.
How to use Genymotion’s GPS emulation tool.
How to use Pusher Channels.
How to use Google’s Geocoding API.

You can find all the codes used in this series on this GitHub repo.

Originally published on the Pusher tutorial hub.