---
title: 'How to configure ESLint and Prettier in an Expo project'
date: '2023-07-25'
slug: 'configure-eslint-prettier-expo-project'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/configure-eslint-prettier-expo-project/'
---

> Make sure to see the official Expo documentation on using [ESLint](https://docs.expo.dev/guides/using-eslint/) in your React Native project.

When writing JavaScript, I spend a good amount of time fixing basic mistakes. Different project files sometimes end up following different syntax and formatting conventions.

Using ESLint rescues me from those mistakes. It is a linter for the JavaScript programming language that helps keep the code syntax consistent and match conventions and warns against the possible source of problems. It is written in Node.js.

Also, I like to use some specific set of Prettier rules in my projects. ESLint configures well with it.

## Create a new project

To create a new React Native project, I use `create-expo-app`:

```shell
npx create-expo-app projectName

# Navigate inside the project folder
cd projectName
```

## Install ESLint and Prettier dev dependencies

After creating a new project, the next step is to install ESLint and Prettier as dev dependencies.

The Expo team has been awesome to provide a package called [eslint-config-universe](https://github.com/expo/expo/tree/master/packages/eslint-config-universe) that comes with basic and shared ESLint configuration for Node.js, React Native and web projects. This is useful because I don't have to set up and define the ESLint configuration from scratch.

Run the following command in the terminal:

```shell
yarn add --dev eslint-config-universe eslint prettier
```

These packages are installed as `devDependencies` since they are only required during the development of the project.

## Configure ESLint

Start by creating a new file called `.eslintrc.js` at the root of the project. This file is responsible to contain all the configuration and linting rules.

Here is the minimal configuration I use:

```js
module.exports = {
  extends: ['universe', 'universe/native'],
  rules: {
    'import/order': 0,
    'react-native/no-inline-styles': 0,
    'import/namespace': 0,
    'no-duplicate-imports': 'error'
  }
};
```

Sometimes I extend this configuration or tweak with rules but for most of the projects I start with this configuration.

In the above snippet, the `extends` is used to apply the pre-defined set of rules from `universe` and `universe/native`.

The `universe` contains basic config JavaScript projects. The `universe/native` contains the config for React Native and Expo projects, with support for React and JSX.

## Configure Prettier

Prettier is a code formatter that ensures that all the code files follow a consistent styling. If you are into Web development, chances are you are already using it.

Create a new file called `.prettierrc` and inside it add the following (_minimal_) configuration:

```json
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}
```

## Ignore files

I also created two new files to ignore trivial or other configurable files and folders from both linting and formatting. Both `.eslintignore` and `.prettierignore` have the following snippet:

```shell
node_modules/**
package.json
yarn.lock
ios/**
android/**
assets/**
.vscode
.expo-shared
.prettirrc
.eslintrc.js
```

## Conclusion

There are about a dozen ways one can configure ESLint rules. However, in this post, I wanted to share this minimal configuration for my future self.


How to configure ESLint and Prettier in an Expo project

---
title: 'Implementing Infinite Scroll with React Query and FlatList in React Native'
date: '2022-01-30'
slug: 'infinite-scroll-with-react-query-and-flatlist-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://jscrambler.com/blog/implementing-infinite-scroll-with-react-query-and-flatlist-in-react-native'
---

> Originally published at [Jscrambler.com](https://jscrambler.com/blog/implementing-infinite-scroll-with-react-query-and-flatlist-in-react-native)

Infinite Scrolling is a way to implement pagination in mobile devices. It is common among mobile interfaces due to the limited amount of space. If you use social media applications like Instagram or Twitter, this implementation is commonly used across those apps.

In this tutorial, let's learn how to implement an infinite scroll using the FlatList component in React Native. To fetch data, we will use a real REST API service provided by [RAWG](https://rawg.io/apidocs). It is one of the largest video game databases, and they have a free tier when it comes to using their API for personal or hobby projects. React Query library will help us make the process of fetching data a lot smoother.

## Prerequisites

To follow this tutorial, please make sure you have the following tools and utilities installed on your local development environment and have access to the services mentioned below:

- [Node.js](https://nodejs.org/en/) version `12.x.x` or above installed
- Have access to one package manager such as npm or yarn or npx
- [RAWG API key](https://rawg.io/apidocs)

You can also check the [complete source code for this example is at this GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/main/infinite-scroll-with-react-query).

## Creating a new React Native app

To create a new React Native app, let's generate a project using [create-react-native-app](https://github.com/expo/create-react-native-app) command-line tool. This tool helps create universal React Native apps, supports React Native Web, and you can use native modules. It is currently being maintained by the awesome Expo team.

Open up a terminal window and execute the following command:

```shell
npx create-react-native-app

# when prompted following questions
What is your app named? infinite-scroll-with-react-query
How would you like to start › Default new app

# navigate inside the project directory after it has been created
cd infinite-scroll-with-react-query
```

Then, let's install all the dependencies that will be used to create the demo app. In the same terminal window:

```shell
yarn add native-base react-query && expo install react-native-safe-area-context react-native-svg
```

This command should download all the required dependencies. To run the app in its vanilla state, you can execute either of the following commands (depending on the mobile OS you're using). These commands will build the app.

```shell
# for iOS
yarn ios

# for android
yarn android
```

## Creating a Home Screen

Let's create a new directory called `/src`. This directory will contain all the code related to the demo app. Inside it, create a sub-directory called `/screens` that will contain the component file, `HomeScreen.js`.

In this file, let's add some JSX code to display the title of the app screen.

```js
import React from 'react';
import { Box, Text, Divider } from 'native-base';

export const HomeScreen = () => {
  return (
    <Box flex={1} safeAreaTop backgroundColor="white">
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
    </Box>
  );
};
```

The `Box` component from NativeBase is a generic component. It comes with many props, a few of them are to apply SafeAreaView of the device. The prop `safeAreaTop` applies padding from the top of the device's screen. One advantage of using the NativeBase library is its built-in components provide props like handling safe area views.

Most NativeBase components also use utility props for most commonly used styled properties such as `justifyContent`, `backgroundColor`, etc., and shorthands for these utility props such as `px` for padding horizontal.

## Setting up providers

Both NativeBase and React Query libraries require their corresponding providers to set up at the root of the app. Open the `App.js` file and add the following:

```js
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NativeBaseProvider } from 'native-base';
import { QueryClient, QueryClientProvider } from 'react-query';

import { HomeScreen } from './src/screens/HomeScreen';

const queryClient = new QueryClient();

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <NativeBaseProvider>
        <QueryClientProvider client={queryClient}>
          <HomeScreen />
        </QueryClientProvider>
      </NativeBaseProvider>
    </>
  );
}
```

All the providers must wrap the entry point or the first screen of the application. In the above snippet, there is only one screen, so all the providers are wrapping `HomeScreen`.

The `QueryClientProvider` component provides an instance in the form of `QueryClient` that can be further used to interact with the cache.

After modifying `App.js`, you will get the following output on a device:

![ss1](https://i.imgur.com/aFep48m.png)

## Add a Base URL to use RAWG REST API

If you want to continue reading this post and build along with the demo app, make sure you have access to the API key for your RAWG account. Once you've done that, create a new file called `index.js` inside the `/src/config` directory. This file will export the base url of the API and API key.

```js
const BASE_URL = 'https://api.rawg.io/api';
// Replace the Xs below with your own API key
const API_KEY = 'XXXXXX';

export { BASE_URL, API_KEY };
```

Replace the Xs in the above snippet with your own API key.

## Fetching data from the API

To fetch the data, we will use JavaScript `fetch` API method. Create a new file called `index.js` inside `/src/api`. It will import the base url and the API key from the `/config` directory and expose a function that fetches the data.

```js
import { BASE_URL, API_KEY } from '../config';

export const gamesApi = {
  // later convert this url to infinite scrolling
  fetchAllGames: () =>
    fetch(`${BASE_URL}/games?key=${API_KEY}`).then(res => {
      return res.json();
    })
};
```

Next, in the `HomeScreen.js` file, import React Query hook called `useQuery`. This hook accepts two arguments. The first argument is a unique key. This key is a unique identifier in the form of a string. It tracks the result of the query and caches it.

The second argument is a function that returns a promise. This promise is resolved when there is data or throws an error when there is something wrong when fetching the data. We've already created the promise function that fetches data asynchronously from the API's base Url in the form of `gamesApi.fetchAllGames()`. Let's import the `gamesApi` as well.

Inside the `HomeScreen`, let's call this hook to get the data.

```js
import React from 'react';
import { Box, Text, FlatList, Divider, Spinner } from 'native-base';
import { useQuery } from 'react-query';

import { gamesApi } from '../api';

export const HomeScreen = () => {
  const { isLoading, data } = useQuery('games', gamesApi.fetchAllGames);

  const gameItemExtractorKey = (item, index) => {
    return index.toString();
  };

  const renderData = item => {
    return (
      <Text fontSize="20" py="2">
        {item.item.name}
      </Text>
    );
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor="white"
      alignItems="center"
      justifyContent="center"
    >
      <Spinner color="emerald.500" size="lg" />
    </Box>
  ) : (
    <Box flex={1} safeAreaTop backgroundColor="white">
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
      <Box px={2}>
        <FlatList
          data={data.results}
          keyExtractor={gameItemExtractorKey}
          renderItem={renderData}
        />
      </Box>
    </Box>
  );
};
```

In the above snippet, take a note that React Query comes with the implementation of request states such as `isLoading`. The `isLoading` state implies that there is no data and is currently in the "fetching" state. To improve the user experience, while the `isLoading` state is true, a loading indicator or a spinner component can be displayed (as did in the above snippet using the `Spinner` component from NativeBase).

Here is the output after this step:

![ss2](https://i.imgur.com/jSX1Aqu.gif)

## Adding pagination to the API request

The `useInfiniteQuery` hook provided by the React Query library is a modified version of the `useQuery` hook. In addition to the request states such as `isLoading` and `data`, it utilizes a function to get the next page number using `getNextPageParam`.

In the case of RAWG REST API, the data fetch on each request contains the following keys:

- `count`: the total count of games.
- `next`: the url to the next page.
- `previous`: the url of the previous page. Is `null` if the current page is first.
- `results`: the array of items on an individual page.

The key names `next`, and `previous` will depend on the response structure of the API request. Make sure to check your data response what are the key names and what are their values.

Currently, the API request made in the `/api/index.js` file does not consider the number of the current page. Modify as shown below to fetch the data based on the page number.

```js
export const gamesApi = {
  // later convert this url to infinite scrolling
  fetchAllGames: ({ pageParam = 1 }) =>
    fetch(`${BASE_URL}/games?key=${API_KEY}&page=${pageParam}`).then(res => {
      return res.json();
    })
};
```

The addition `&page=${pageParam}` in the above snippet is how the `getNextPageParam` function will traverse to the next page if the current page number is passed in the request endpoint. Initially, the value of `pageParam` is `1`.

## Using useInfiniteQuery hook

Let's import the `useInfiniteQuery` hook in the `HomeScreen.js` file.

```js
// rest of the import statements remain same
import { useInfiniteQuery } from 'react-query';
```

Next, inside the `HomeScreen` component, replace the `useQuery` hook with the `useInfiniteQuery` hook as shown below. Along with the two arguments, the new hook will also contain an object as the third argument. This object contains the logic to fetch the data from the next page using the `getNextPageParam` function.

The function retrieves the page number of the next page. It accepts a parameter called `lastPage` that contains the response of the last query. As per the response structure we discussed earlier in the previous section, check the value of `lastPage.next`. If it is not `null`, return the next page's number. If it is `null`, return the response from the last query.

```js
const { isLoading, data, hasNextPage, fetchNextPage } = useInfiniteQuery(
  'games',
  gamesApi.fetchAllGames,
  {
    getNextPageParam: lastPage => {
      if (lastPage.next !== null) {
        return lastPage.next;
      }

      return lastPage;
    }
  }
);
```

## Implementing infinite scroll on FlatList

In the previous snippet, the `hasNextPage` and `fetchNextPage` are essential. The `hasNextPage` contains a boolean. If it is `true`, it indicates that more data can be fetched. The `fetchNextPage` is the function provided by the `useInfiniteQuery` to fetch the data of the next page.

Add a handle method inside the `HomeScreen` component called `loadMore`. This function will be used on the FlatList prop called `onEndReached`. This prop is called when the scroll position reaches a threshold value.

```js
const loadMore = () => {
  if (hasNextPage) {
    fetchNextPage();
  }
};
```

Another difference between `useInfiniteQuery` and `useQuery` is that the former's response structure includes an array of fetched pages in the form of `data.pages`. Using JavaScript `map` function, get the `results` array of each page.

Modify the `FlatList` component as shown below:

```js
<FlatList
  data={data.pages.map(page => page.results).flat()}
  keyExtractor={gameItemExtractorKey}
  renderItem={renderData}
  onEndReached={loadMore}
/>
```

Here is the output after this step. Notice the scroll indicator on the right-hand side of the screen. As soon as it reaches a little below half of the list, it repositions itself. This repositioning indicates that the data from the next page is fetched by the `useInfiniteQuery` hook.

![ss3](https://i.imgur.com/IiJMVA7.gif)

The default value of the threshold is `0.5`. This means that the `loadMore` will get triggered at the half-visible length of the list. To modify this value, you can add another prop, `onEndReachedThreshold`. It accepts a value between 0 and 1, where 0 is the end of the list.

```js
<FlatList
  data={data.pages.map(page => page.results).flat()}
  keyExtractor={gameItemExtractorKey}
  renderItem={renderData}
  onEndReached={loadMore}
  onEndReachedThreshold={0.3}
/>
```

## Display a spinner when fetching next page data

Another way to enhance the user experience is when the end of the list is reached, and the data of the next page is still being fetched (let's say, the network is weak). While the app user waits for the data, it is good to display a loading indicator.

The `useInfiniteQuery` hook provides a state called `isFetchingNextPage`. Its value will be true when the data from the next page is fetched using `fetchNextPage`.

Modify the `HomeScreen` component as shown below. The loading spinner renders when the value of `isFetchingNextPage` is true. The `ListFooterComponent` on the FlatList component is used to display the loading indicator at the end of the list items.

```js
export const HomeScreen = () => {
  const { isLoading, data, hasNextPage, fetchNextPage, isFetchingNextPage } =
    useInfiniteQuery('games', gamesApi.fetchAllGames, {
      getNextPageParam: lastPage => {
        if (lastPage.next !== null) {
          return lastPage.next;
        }

        return lastPage;
      }
    });

  const loadMore = () => {
    if (hasNextPage) {
      fetchNextPage();
    }
  };

  const renderSpinner = () => {
    return <Spinner color="emerald.500" size="lg" />;
  };

  const gameItemExtractorKey = (item, index) => {
    return index.toString();
  };

  const renderData = item => {
    return (
      <Box px={2} mb={8}>
        <Text fontSize="20">{item.item.name}</Text>
      </Box>
    );
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor="white"
      alignItems="center"
      justifyContent="center"
    >
      <Spinner color="emerald.500" size="lg" />
    </Box>
  ) : (
    <Box flex={1} safeAreaTop backgroundColor="white">
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
      <Box px={2}>
        <FlatList
          data={data.pages.map(page => page.results).flat()}
          keyExtractor={gameItemExtractorKey}
          renderItem={renderData}
          onEndReached={loadMore}
          onEndReachedThreshold={0.3}
          ListFooterComponent={isFetchingNextPage ? renderSpinner : null}
        />
      </Box>
    </Box>
  );
};
```

Here is the output:

![ss4](https://i.imgur.com/uLmbrjC.gif)

## Wrapping up

In this tutorial, you've successfully implemented infinite scroll using `useInfiniteQuery` from React Query. Using this library for fetching and managing data inside a React Native app takes away a lot of pain points. Make sure to check out the [Infinite Queries](https://react-query.tanstack.com/guides/infinite-queries) documentation here.

You can also check the [complete source code for this example is at this GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/main/infinite-scroll-with-react-query).


Implementing Infinite Scroll with React Query and FlatList in React Native

---
title: 'Tamagui for React Native: Create faster design systems'
slug: 'tamagui-for-react-native'
date: '2022-01-09'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://blog.logrocket.com/tamagui-react-native-create-faster-design-systems/'
---

> Originally Published at [Blog.Logrocket.com](https://blog.logrocket.com/tamagui-react-native-create-faster-design-systems/) on December 24, 2021.

> **Update (6 November, 2023)**: This post may have been outdated. See [Tamagui documentation](https://tamagui.dev/docs/intro/installation) for up to date information.

The React Native system is gradually progressing towards solutions for sharing code between React Native and React Native web applications.

One recent addition to the React Native ecosystem is [Tamagui](https://tamagui.dev), a UI kit that includes a series of themes, media queries, and typed inline styles, as well as an optimizing compiler. Tamagui aims to close the gap between React Native and React Native web applications by covering the foundational elements of an app, like styling, theming, and providing cross-platform components, all while keeping the app’s performance in mind.

In this article, we’ll learn how to configure Tamagui in a React Native app and a React Native Web app, checking out the components it offers in its current state. Let’s get started!

## Create a new React Native app

We’ll start by creating a new React Native project using [Expo CLI](https://docs.expo.dev/workflow/expo-cli/), which enhances the developer experience with tools in the React Native ecosystem, for example, a variety of templates. Choosing one of these templates is a great starting point for the demo app we’ll build in this tutorial. Open up a terminal window and execute the following command:

```shell
npx expo init tamagui-app
# after the project directory is created, navigate inside it
cd tamagui-app
```

On running the command, you’ll be prompted to choose a template. Choose `blank (TypeScript)`. It will create a project with minimal TypeScript configuration.

## Installing dependencies

After navigating inside the project directory, we’ll install the libraries required to configure Tamagui inside a React Native project. But first, run the following command from the terminal:

```shell
yarn add tamagui@1.0.0-alpha.37 @tamagui/babel-plugin@1.0.0-alpha.37
```

Since Tamagui is still in its alpha release, I'm using specific package versions. However, when a more stable version is released in the future, this may change. Be sure to refer to the [official documentation](https://tamagui.dev/docs/intro/installation) for the most up to date information on installing dependencies.

`tamagui` is the UI kit, and `@tamagui/babel-plugin` is the babel plugin that loads the design system properties defined inside another file called `tamagui.config.ts`. You’ll need to create this file in the root of your project, but you can leave it blank for now. We’ll return to it later.

The `@unimodules/core` dependency is required by the Tamagui UI kit to work with an Expo project. Open the terminal window and execute the following command:

```shell
expo install @unimodules/core
```

Next, we need to install dev dependencies to use Tamagui with Expo web. Open the terminal window and execute the command below:

```shell
yarn add -D @expo/webpack-config@0.16.14 esbuild-loader@2.17.0 tamagui-loader@1.0.0-alpha.37 thread-loader@3.0.4
```

As before, we've installed packages with specific versions. In the `package.json` file, you’ll find the following summary of dependencies and dev dependencies that we installed:

```json
{
  "dependencies": {
    "@tamagui/babel-plugin": "^1.0.0-alpha.37",
    "@unimodules/core": "~7.2.0",
    "expo": "~43.0.2",
    "expo-status-bar": "~1.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.64.3",
    "react-native-web": "0.17.5",
    "tamagui": "^1.0.0-alpha.37"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.6",
    "typescript": "~4.5.2",
    "@expo/webpack-config": "^0.16.14",
    "esbuild-loader": "^2.17.0",
    "tamagui-loader": "^1.0.0-alpha.37",
    "thread-loader": "^3.0.4"
  }
}
```

Now that our dependencies are installed, add `@tamagui/babel-plugin` to the `babel.config.js` file:

```js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts'
        }
      ]
    ]
  };
};
```

In the code snippet above, ensure that the path defined for `config` is the relative path to the Tamagui config file. `components` contains an array of npm modules containing Tamagui components. For this example app, we're using Tamagui base components. Therefore, we don't need to add any further configuration.

## Setting up Tamagui configuration

Tamagui lets you create themes, define tokens, add shorthands, and more. However, it requires you to describe all the properties and set up the foundation of a design system before you dive into building the components for your React Native app.

To set up the required Tamagui configuration, we’ll use the `createTamagui` function. We’ll need to define the following:

- `tokens`: Generate variables in `theme` and `app`
- `media`: Defines reusable responsive media queries
- `themes`: Defines your design theme
- `shorthands`: Allows you to define keys that expand the `style value` props. For example, you can define `f` for flex, `ai` for `alignItems`, `jc` for `justifyContent`, etc.

You can start setting up the configuration with the `size` and `space` properties. We’ll also need `defaultFont` using the `createFont` function with a configuration object that contains values for font `family`, `size`, `lineHeight`, `fontWeight`, and `letter spacing`.

All of the values above are used inside of the `createTokens` function, which allows you to create tokens, or the variables mapped to CSS variables at build time. The `createTokens` function requires the `size `, `space`, `font`, `color`, `radius`, and `zIndex` properties in its configuration object.

The code block below contains a minimal configuration that I've created for the demo app with all of the required properties:

```ts
import { createFont, createTokens, createTamagui } from 'tamagui';
const size = {
  0: 0,
  1: 4,
  2: 8
};
const space = {
  ...size,
  '-0': -0,
  '-1': -5
};
const defaultFont = createFont({
  family: 'Arial',
  size: {
    1: 14,
    2: 18,
    3: 22
  },
  lineHeight: {
    1: 15,
    2: 20
  },
  weight: {
    4: '300',
    7: '600'
  },
  letterSpacing: {
    4: 0,
    7: -1
  }
});
const tokens = createTokens({
  size,
  space,
  font: {
    title: defaultFont,
    body: defaultFont
  },
  color: {
    lightPurple: '#EDD2F3',
    darkPurple: '#544179'
  },
  radius: {
    0: 0,
    1: 3,
    2: 5,
    3: 10,
    4: 15,
    5: 20
  },
  zIndex: {
    0: 0,
    1: 100,
    2: 200,
    3: 300,
    4: 400,
    5: 500
  }
});
const shorthands = {
  ai: 'alignItems',
  bg: 'backgroundColor',
  br: 'borderRadius',
  f: 'flex',
  h: 'height',
  jc: 'justifyContent',
  m: 'margin',
  p: 'padding',
  w: 'width',
  lh: 'lineHeight',
  ta: 'textAlign'
} as const;
const media = {
  xs: { maxWidth: 660 },
  gtXs: { minWidth: 660 + 1 },
  sm: { maxWidth: 860 },
  gtSm: { minWidth: 860 + 1 },
  md: { minWidth: 980 },
  gtMd: { minWidth: 980 + 1 },
  lg: { minWidth: 1120 },
  gtLg: { minWidth: 1120 + 1 },
  xl: { minWidth: 1280 },
  xxl: { minWidth: 1420 },
  short: { maxHeight: 820 },
  tall: { minHeight: 820 },
  hoverNone: { hover: 'none' },
  pointerCoarse: { pointer: 'coarse' }
};
const config = createTamagui({
  defaultTheme: 'light',
  shorthands,
  media,
  tokens,
  themes: {
    light: {
      bg: tokens.color.lightPurple
    }
  }
});
type Conf = typeof config;
declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}
export default config;
```

## Using Tamagui Provider

Tamagui configuration provides a [Tamagui.Provider](https://tamagui.dev/docs/intro/configuration#add-provider) component that wraps all the other components inside your app:

```tsx
import React from 'react';
import Tamagui from './tamagui.config';
export default function App() {
  return <Tamagui.Provider>{/* The rest of your app here */}</Tamagui.Provider>;
}
```

## Tamagui views, utility props, and shorthands

In Tamagui, stacks are the core view elements for creating flex-based layouts. There are three different types of stacks available, `XStack`, `YStack`, and `ZStack`, and each implies a different axis.

In the example below, the `defaultTheme` takes the value of the theme you've defined in the config file. The `XStack` uses several shorthands; for example, `f` stands for `flex`, `ai` for `alignItems`, `jc` for `justifyContent`, and `bg` for `backgroundColor`.

The value of the `$bg` prop is also coming from the config file, where we’ve explicitly defined that the `bg` property for the `light` theme should have a particular color value. The value of `space` on the `YStack` is set to `$2` from the config file itself:

```tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { YStack, Text, XStack } from 'tamagui';
import Tamagui from './tamagui.config';
export default function App() {
  return (
    <Tamagui.Provider defaultTheme="light">
      <StatusBar style="dark" />
      <XStack f={1} ai="center" jc="center" bg="$bg">
        <YStack space="$2">
          <Text fontSize={20} marginBottom={20}>
            Tamagui
          </Text>
          <Text fontSize={20}>Tamagui</Text>
        </YStack>
      </XStack>
    </Tamagui.Provider>
  );
}
```

You can further define shorthands for properties like `margin`, `marginBottom`, and `padding` and use them as utility props on components, giving you more control over your styles and themes, as seen in the following example

![ss1](https://i.imgur.com/kZX0PQk.png)

## Making Tamagui work on the web

Now, we’ll take advantage of the `@expo/webpack-config` package that we installed earlier, which is used to create a custom webpack configuration. When running the `expo start --web` command, the Expo CLI checks whether the project has a custom webpack configuration in the root directory. If the project does not have a custom webpack configuration, Expo uses the default configuration.

To create our custom webpack configuration, we’ll first run the following command from a terminal window, which will create a `config` file for you to customize the webpack configuration. When you run this command, you’ll be prompted to choose from several options. Select the `webpack.config.js` option:

```shell
expo customize:web
```

Next, add the custom configuration to the `webpack.config.js` file, as recommend by the [Tamagui documentation](http://(https://tamagui.dev/docs/intro/installation). The configuration will allow us to run `tamagui-loader` on the web:

```js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
      const config = await createExpoWebpackConfigAsync(env, argv);
      // Customize the config before returning it.
      // add TAMAGUI_TARGET = web to defines
      const DefinePlugin = config.plugins.find(
        x => x.constructor.name === 'DefinePlugin'
      );
      DefinePlugin.definitions\['process.env'\]['TAMAGUI_TARGET'] = `"web"`;
      // replace babel-loader with our snackui + esbuild loaders
      const rules = config.module.rules[1].oneOf;
      const ruleIndex = rules.findIndex(x =>
        x.use?.loader?.includes('babel-loader')
      );
      rules[ruleIndex] = {
        test: /\.(mjs|[jt]sx?)$/,
        use: [
          'thread-loader',
          {
            loader: require.resolve('esbuild-loader'),
            options: {
              loader: 'tsx',
              target: 'es2019',
              keepNames: true
            }
          },
          {
            loader: require.resolve('tamagui-loader'),
            options: {
              config: './tamagui.config.ts',
              components: ['tamagui']
            }
          }
        ]
      };
      return config;
};
```

After adding the configuration, execute the command `yarn web` or `expo start --web`.
You’ll get the following output at `http://localhost:19006/`:

![ss2](https://i.imgur.com/jlLUyaX.png)

## Responsive styles using media queries

You can incorporate media queries directly in the UI elements of your app. After defining your media queries in the `tamagui.config.ts` file, you’ll use a Hook called `useMedia` provided by the library:

```tsx
import { YStack, Text, XStack, useMedia } from 'tamagui';
```

Now, let's add a background color to `YStack`. The color value will vary on the screen's minimum width using the media query `md: { minWidth: 980 }`.

In the code snippet below, the `backgroundColor` value is set to `yellow` if the screen width is less than `980`, otherwise, it's set to `red`:

```tsx
export default function App() {
  const media = useMedia();
  return (
    <Tamagui.Provider defaultTheme="light">
      <StatusBar style="dark" />
      <XStack f={1} ai="center" jc="center" bg="$bg">
        <YStack
          space="$2"
          width={200}
          height={100}
          p={10}
          bg={media.md ? 'red' : 'yellow'}
        >
          <Text fontSize={media.md ? 32 : 18} marginBottom={20}>
            Tamagui
          </Text>
          <Text fontSize={20}>React Native</Text>
        </YStack>
      </XStack>
    </Tamagui.Provider>
  );
}
```

You can check out the following example:

![ss3](https://i.imgur.com/LpckfEH.png).

Similarly, the `fontSize` property also changes based on the media query, as seen in the example:

![ss4](https://i.imgur.com/InzeIX3.gif)

## Conclusion

Although Tamagui is still in its [alpha release](https://tamagui.dev/docs/intro/releases), it provides [benchmarks](https://tamagui.dev/docs/intro/benchmarks) over other UI kits in the React Native space that support web and outperforms them. In this tutorial, we took a first look at Tamagui, learning the best way to configure it for different use cases.

As a developer, I'll be keeping a close eye on Tamagui’s development and growth. The idea of creating a custom design system from scratch to support both native and web platforms is both fascinating and useful. I hope you enjoyed this tutorial!


Tamagui for React Native: Create faster design systems

---
title: 'Create a custom hook to Show/Hide Password Visibility in React Native'
date: '2021-12-11'
thumbnail: '/thumbnails/expo.png'
slug: 'show-hide-password-in-react-native-using-custom-hook'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/show-hide-password-in-react-native-using-custom-hook/'
---

> Updated on May 24, 2023

Building log-in and sign-up forms in a React Native app are fundamentally composed of input fields and buttons. One field that you will often find yourself adding to these forms is the password field. This password field is created using React Native's `TextInput` component. The common behavior of this field is to hide a user's password behind obscure characters.

Take a look at an example of the `TextInput` component that is used to create a password field.

```js
import { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

export default function App() {
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name="password"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="newPassword"
          secureTextEntry
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
    padding: 14,
    fontSize: 22,
    width: '90%'
  }
});
```

It uses the `secureTextEntry` prop such that when a text value is entered in the input field, it is not visible as to what is being entered in that field. Here is the output of the above snippet on a device:

![ss1](https://i.imgur.com/kn0yv9z.gif)

However, giving an option to a user to let them see the current value they enter leads to a good experience and might be necessary in most cases.

> [Source code in this GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/main/password-visibility-custom-hook-example).

## Show or Hide Password Visibility hook

To add the ability to show or hide the password field's visibility, let's create a custom hook in a new file called `useTogglePasswordVisibility.js`.

Start by importing the `useState` hook from React library. You will need to create two different state variables to toggle between the field's visibility and change the icon.

Then define a function called `useTogglePasswordVisibility`. Inside this function, create two new state variables:

- `passwordVisibility`: set its initial value to `true`. The reason is that this variable will be the value of the prop `secureTextEntry` on the `TextInput` component. You would want to hide the password field initially when the user enters the password in the input field.
- `rightIcon`: set its default value to `eye`. This value depends on the icon library you're using in your React Native app. For this example, I'm using **MaterialCommunityIcons** from [Expo Vector Icons](https://docs.expo.dev//guides/icons/#expovector-icons).

```js
export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  // ...
};
```

Next, add a method called `handlePasswordVisibility` that will allow the app user to toggle the password field's visibility between shown and hidden state. Do not forget to return all the variables and the handler method.

```js
export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  const handlePasswordVisibility = () => {
    if (rightIcon === 'eye') {
      setRightIcon('eye-off');
      setPasswordVisibility(!passwordVisibility);
    } else if (rightIcon === 'eye-off') {
      setRightIcon('eye');
      setPasswordVisibility(!passwordVisibility);
    }
  };

  return {
    passwordVisibility,
    rightIcon,
    handlePasswordVisibility
  };
};
```

## Use the Password Visibility hook

Start by updating import statements in the `App.js` file:

```js
import { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hook/useTogglePasswordVisibility';
```

Next, access the required variables and method from the `useTogglePasswordVisibility` hook. Add the following line at the top of the `App` component:

```js
export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  // ...
}
```

Modify the `TextInput` component's prop. Make sure to add the `passwordVisibility` as the value to the `secureTextEntry` prop.

```js
<TextInput
  secureTextEntry={passwordVisibility}
  // ... rest of the props remain unchanged
/>
```

Inside the `View` component that wraps the `TextInput`, add a button using the `Pressable` component. This button will allow the user to toggle between the hidden and shown state of the password field. It also wraps the icon component.

```js
<View style={styles.inputContainer}>
  {/* After TextInput component */}
  <Pressable onPress={handlePasswordVisibility}>
    <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
  </Pressable>
</View>
```

That's all! Here is the output after this step:

![ss2](https://i.imgur.com/rTNH2Ud.gif)

Here is the complete code for the `App.js` file:

```js
import React, { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hook/useTogglePasswordVisibility';

export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name="password"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="newPassword"
          secureTextEntry={passwordVisibility}
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
        <Pressable onPress={handlePasswordVisibility}>
          <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
    padding: 14,
    fontSize: 22,
    width: '90%'
  }
});
```


Create a custom hook to Show/Hide Password Visibility in React Native

---
date: '2021-10-14'
title: 'How to avoid notches with Safe Area Context in React Native apps'
thumbnail: '/thumbnails/react.png'
slug: 'safe-area-context-in-react-native-apps'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/safe-area-context-in-react-native-apps/'
---

Most devices nowadays come with a notch or some kind of status bar. Therefore, when building a mobile application using React Native, it is vital to ensure that the content of an app screen is rendered correctly across different types of devices.

In this article, let's take a look at two different approaches to make app screens in React Native to avoid the content being positioned behind a notch or status bar.

The first approach will discuss `SafeAreaView` component from React Native components API. The second approach will discuss the advantage of using [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context#readme) open source library and how it provides a cross-platform solution.

## The Notch Problem

When you are starting to build a screen in React Native app, you might add use the following code snippet to display text:

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const HomeScreen = () => {
  return (
    <View style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
```

The above code snippet has a parent `View` component with a background color of `red`. It wraps another `View` component with a background color of `blue` that contains a `Text` component to display some text on the screen.

This will display the content of the app screen on an iOS device as shown below:

![ss1](https://i.imgur.com/Qfizjpr.png)

The contents of the nested `View` component hides behind the status bar and the notch on the iOS device.

On an Android device, the behavior is exactly the same:

![ss2](https://i.imgur.com/RY1tEfz.png)

## How to Use the SafeAreaView component from React Native

One approach is to use [SafeAreaView component](https://reactnative.dev/docs/safeareaview) available in React Native.

```js
import { SafeAreaView } from 'react-native';
```

It can be used in the place of the top-level `View` component. It renders content within the safe area boundaries around the nested content and automatically applies padding.

Modify the previous code snippet:

```js
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';

export const HomeScreen = () => {
  return (
    <SafeAreaView style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </SafeAreaView>
  );
};
```

It works perfectly on iOS:

![ss3](https://i.imgur.com/Mve0Nhu.png)

In React Native, this component is only applicable to iOS devices with iOS version 11 or later. Unfortunately, that means it doesn't work for Android devices as the screen's content is still behind the status bar.

## How to Use React Native's Safe Area Context Library

To use a cross-platform solution to handle safe areas on notch devices, there is a library called [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). It provides a flexible API to handle safe area insets in JS and works on iOS, Android, and Web.

Start by installing it in your React Native app:

```shell
# for plain React Native apps
yarn add react-native-safe-area-context

# install pod dependency for iOS only
npx pod-install

# for Expo apps
expo install react-native-safe-area-context
```

This library provides a `SafeAreaProvider` that needs to wrap either your Root Navigator or the screen where you want to handle safe area insets.

For example, in the code snippet below, the `SafeAreaProvider` wraps the `HomeScreen` component since there is only one screen in the example app.

```js
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { HomeScreen } from './src/screens';

export default function App() {
  return (
    <SafeAreaProvider>
      <HomeScreen />
    </SafeAreaProvider>
  );
}
```

Now, you can import the `SafeAreaView` component from the `react-native-safe-area-context` library and replace it with the one from React Native.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export const HomeScreen = () => {
  return (
    <SafeAreaView style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
```

It works both for iOS and Android:

![ss4](https://i.imgur.com/lfOTL3J.png)

If you give the nested `View` component, a property of `flex: 1` as:

```js
<View style={{ backgroundColor: 'blue', flex: 1 }}>
```

You can observe the safe are edges for iOS:

![ss5](https://i.imgur.com/86uwW7N.png)

The `SafeAreaView` acts like a regular `View` component from React Native and includes additional padding to position the content after the notch or the status bar of a device.

It also comes with an `edges` prop that customizes safe area insets around different edges such as top, bottom, left, and right.

## How to Use the useSafeAreaInsets Hook

Another advantage of using this library is that it provides a hook called `useSafeAreaInsets`. It offers more flexibility. It also gives more control, and you can apply padding for each edge using a property from this hook. For example, a `View` component below uses only wants the padding to be applied at the top edge:

```js
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export const HomeScreen = () => {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingTop: insets.top
      }}
    >
      {children}
    </View>
  );
};
```

## Conclusion

Handling status bars and notches across different devices become seamless with the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context#readme) library. Try it out in your next React Native app.

_[Source code at this GitHub repository](https://github.com/amandeepmittal/react-native-examples/tree/master/rnSplashAndIconExample)_

_This post was also published at [freeCodeCamp](https://www.freecodecamp.org/news/how-to-use-safe-area-context-to-avoid-notches-in-react-native-apps/)._


How to avoid notches with Safe Area Context in React Native apps

---
title: 'Environment Variables in Expo and TypeScript'
slug: 'environment-variables-in-expo-managed-workflow'
date: '2021-08-04'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/environment-variables-in-expo-managed-workflow/'
---

> Updated: Apr 12, 2023

Managing different keys for different environments, such as development or production, is common among JavaScript developers. Therefore, variables defined in this file may change during development and production, but the code remains unchanged. Hence, the mechanism of the `.env` file exists.

Using Expo, there are different ways you can set up and use environment variables. My preferred method is to use the dotenv file. Environment variables defined in this file are loaded using a package called `dotenv`.

## Install dotenv

To set up environment variables in an Expo app, the initial step is to install the `dotenv` and `expo-constants` packages.

```bash
npx expo install dotenv expo-constants
```

## Rename app.json

Next, rename the `app.json` file to `app.config.js` or, if using TypeScript: `app.config.ts`, at the root of your project. Then, add the import statement to use the `dotenv` configuration. Since it's a JSON file, you will have to export all Expo configuration variables and add an `extra` object containing Environment variables.

```ts
import 'dotenv/config';

export default {
  expo: {
    // ...
    extra: {
      // Add your extra configs here
      apiKey: process.env.API_KEY
    }
  }
};
```

## Constants with expo-constants

All the keys inside the extra object are readable app-wide using `expo-constants`. An environment variable is accessible through `Expo.Constants.manifest.apiKey`.

In the case of TypeScript, use optional parameter syntax to avoid squiggly: `"Object is possibly 'undefined' or 'null'"`.

```tsx
const API_KEY = Constants?.manifest?.extra?.apiKey;
```

## More

To learn more about how to use Environment variables in an Expo project, refer to Expo's [official documentation](https://docs.expo.dev/guides/environment-variables/).


Environment Variables in Expo and TypeScript

How To Integrate Firebase Authentication With an Expo App

---
title: 'How to upload an image using Expo Camera to Cloudinary'
date: '2021-03-31'
slug: 'upload-image-to-cloudinary-using-expo-camera'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://jscrambler.com/blog/how-to-upload-an-image-using-expo-camera-to-cloudinary/'
---

> Originally Published at **[Jscrambler's Blog](https://jscrambler.com/blog/how-to-upload-an-image-using-expo-camera-to-cloudinary/)**.

The camera feature in a mobile device allows it to capture pictures and record videos, making it very helpful in many circumstances. By using the expo-camera library the process of adding that camera feature to an application becomes seamless, which is why in this tutorial, we’ll take a look at how to use [Expo Camera](https://docs.expo.io/versions/latest/sdk/camera/) to take a picture and then upload that same picture to a real-time cloud service [Cloudinary](https://cloudinary.com/).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- Have [Node.js](https://nodejs.org/) version >= 14.x.x installed.
- Have access to one package manager such as npm or yarn or npx.
- Have [expo-cli](https://github.com/expo/expo-cli) installed, or use npx

**The source code is available at this [Github repository](https://github.com/amandeepmittal/react-native-examples/tree/master/camera-upload-to-cloudinary).**

## Create an Expo app

Start by creating a new Expo app and then install the dependency `expo-camera`. Execute the following commands in a terminal window:

```shell
npx create-expo-app project-name

# select the blank template

cd project-name

npx expo install expo-camera
```

## Create a custom camera component

The `expo-camera` library provides a React component that allows snapping pictures using a device's front or back camera. It exposes properties like zoom, autofocus, preview image after snapping, white balance, face detection, barcode scanning, and flash mode.

For this demo, let's create a component that when rendered renders the `<Camera>` component initially.

Start by adding the following import statements in the `App.js` file.

```js
import React, { useState, useRef, useEffect } from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  TouchableOpacity
} from 'react-native';
import { Camera } from 'expo-camera';
import { AntDesign, MaterialIcons } from '@expo/vector-icons';
```

The `@expo/vector-icons` is another package bundled with Expo SDK and allows the use of various icons from different icon sets. You can find the references to these icons at [icons.expo.fyi](https://icons.expo.fyi/).

The `Dimensions` from React Native is used to get the application’s windows width and height.

- To display the camera in full-screen mode, let's get the height of the window on which the application is running.
- Then, define a custom variable called CAPTURE_SIZE representing 80% of the window height. This variable is used in styles later.
- Add the following code snippet before the `App` component.

```js
const WINDOW_HEIGHT = Dimensions.get('window').height;
const CAPTURE_SIZE = Math.floor(WINDOW_HEIGHT * 0.08);
```

The `expo-camera` library exposes an API of methods. To invoke any of these methods, define a reference to the useRef React hook.

Add the following code snippet just after defining the `App`. Make sure to add a `ref` prop to the `Camera` component whose value is `cameraRef`.

```js
return (
  <View style={styles.container}>
    <Camera ref={cameraRef} style={styles.container} />
  </View>
);
```

## Why use absoluteFillObject to position View component

The `absoluteFillObject` automatically sets a `View` component to be full screen and absolutely positioned. It also allows overriding the values such as `top`. For example, you may want to absolute position the `View` component with an offset like `top: 30` to display it below the status bar.

Add the corresponding styles to the `App` component.

```js
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject
  },
  text: {
    color: '#fff'
  }
});
```

## How to check for camera permissions

To use a device's camera, the application needs to ask a user to utilize the hardware functionality. This is done by asking the user to grant permission for camera access, and naturally, if the request gets denied, the application won't be able to use it.

- First, define a state variable using the `useState` React hook called `hasPermission`.
- Then, create a method called `onHandlePermission`. It is asynchronous and returns a Promise that resolves when the permissions are granted. To ask for permission, `Camera.requestPermissionsAsync` is used.
- Update the state variable using the update function from the array if the promise is resolved and the permission has been granted.
- Then, using a `useEffect` hook, invoke the method `onHandlePermission`.

Add the following code snippet in `App` component:

```js
export default function App() {
  const cameraRef = useRef();
  const [hasPermission, setHasPermission] = useState(null);

  useEffect(() => {
    onHandlePermission();
  }, []);

  const onHandlePermission = async () => {
    const { status } = await Camera.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text style={styles.text}>No access to camera</Text>;
  }

  // ...
}
```

In the above code snippet, the two `if` statements are used either when:

- The permission hasn’t been requested.
- A user denies the permission, in which case, a text message stating that there is no access to the camera will be displayed.

Here is how asking for permissions are prompted on an Android device:

![ss1](https://i.imgur.com/5iOMbr1.png)

After the permission is granted, the Camera is now accessible on the device:

![ss2](https://i.imgur.com/90zdXLT.png)

## Switching between Camera types

To switch between different types of cameras on a device, let's add a custom method. The Camera component has a prop called `type` and by using it, the type of camera currently in use on the device can be determined.

Start by defining a state variable called `cameraType` to track the camera's current type. Give it a default value of type `back`. It determines that the default camera mode type is going to be back. The camera type is accessible from `Camera.Constants.Type.back`.

Define another state variable called `isPreview`. It will determine whether the app is in camera mode or image preview mode. It is going to have a default value of boolean `false`.

Add a method called `switchCamera` in the `App` component. Then, check if it is in the preview mode. If yes, return nothing.

If it is in the camera mode, write the logic to handle the switch between the back and front camera mode by updating the state value of `cameraType`.

Then, on the `Camera` component add a prop `type={cameraType}`.

Define the state variable to determine whether the camera is ready to capture photos or not. Call it `isCameraReady` with a default value of boolean `false`. Then, add a method called `onCameraReady` to update its value. Also, add the prop `onCameraReady={onCameraReady}` on the `Camera` component.

```js
export default function App() {
  const cameraRef = useRef();
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
  const [isPreview, setIsPreview] = useState(false);
  const [isCameraReady, setIsCameraReady] = useState(false);

  useEffect(() => {
    onHandlePermission();
  }, []);

  const onHandlePermission = async () => {
    const { status } = await Camera.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  };

  const onCameraReady = () => {
    setIsCameraReady(true);
  };

  const switchCamera = () => {
    if (isPreview) {
      return;
    }
    setCameraType(prevCameraType =>
      prevCameraType === Camera.Constants.Type.back
        ? Camera.Constants.Type.front
        : Camera.Constants.Type.back
    );
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text style={styles.text}>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera
        ref={cameraRef}
        style={styles.container}
        type={cameraType}
        onCameraReady={onCameraReady}
      />
    </View>
  );
}
```

To allow the Camera to switch, add a custom icon button to switch between two different camera types. The icon is used from the `MaterialIcons` set from the `@expo/vector-icons library`.

After the `Camera` component in JSX code, add a `View` component that wraps the buttons such as switch camera types and capture a picture.

Inside the `View` component, create an icon button using `TouchableOpacity`. The `onPress` prop on this component is used to trigger an action. In this case, it is used to invoke the `switchCamera` method.

Add a `disabled` prop on `TouchableOpacity` that disables the button depending on the value of `isCameraReady`. If its value is false, then this button will not function.

```js
<View style={styles.container}>
  <Camera
    ref={cameraRef}
    style={styles.container}
    type={cameraType}
    onCameraReady={onCameraReady}
  />
  <View style={styles.container}>
    {!isPreview && (
      <View style={styles.bottomButtonsContainer}>
        <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
          <MaterialIcons name="flip-camera-ios" size={28} color="white" />
        </TouchableOpacity>
      </View>
    )}
  </View>
</View>
```

Add the styles for the above code snippet:

```js
const styles = StyleSheet.create({
  // ...
  bottomButtonsContainer: {
    position: 'absolute',
    flexDirection: 'row',
    bottom: 28,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

Here is how the switch button is displayed:

![ss3](https://i.imgur.com/aPslkxl.png)

## Take a picture from the Camera and preview it

Camera API from the `expo-camera` library uses a method called `takePictureAsync()` to take a picture. It saves the photographed image in the app's cache directory by default.

The method accepts a configuration object with different options such as quality, base64, skipProcessing, exif, etc. We will use two options:

- `quality` to specify the compression rate of the image snapped
- `base64` to include the image data in Base64 format.

These options are passed as properties in a JavaScript object. This object is then further passed as an argument to the `takePictureAsync` method.

Start by adding a new asynchronous method called `onSnap`. Start by checking the value of the `cameraRef.current`. If available, then the following logic defined in the code snippet below to take a picture will execute from this method.

Then, define an object called `options` with the following properties:

- quality and set its value to `0.7`. This option selects a value between 0 to 1.
- base64 and set its value to `true`. It accepts a boolean value of true or false

The `takePictureAsync` method, when invoked, returns a promise that resolves into an object. Store the value resolved in a variable called `data`. It contains the image data in form of the following properties:

- uri of the image stored in the app's cache.
- width and height of the image.
- if the base64 option is enabled, it will return the base64 data of the image.

Store the base64 data of the image in another variable called `source`.

Next, add an if condition to check if the source exists. If it exists, pause the camera mode and set the image preview mode to true to show the current picture after it is taken.

```js
const onSnap = async () => {
  if (cameraRef.current) {
    const options = { quality: 0.7, base64: true };
    const data = await cameraRef.current.takePictureAsync(options);
    const source = data.base64;

    if (source) {
      await cameraRef.current.pausePreview();
      setIsPreview(true);
    }
  }
};
```

To go back from the image preview mode to camera mode, add a method called `cancelPreview`. When this method invokes, it resumes the camera mode.

```js
const cancelPreview = async () => {
  await cameraRef.current.resumePreview();
  setIsPreview(false);
};
```

Add the `onSnap` method as an action on `TouchableOpacity` component as the value of `onPress` prop. This button is responsible for capturing an image and is wrapped by the View component when the image preview mode is false.

```js
<View style={styles.container}>
  {!isPreview && (
    <View style={styles.bottomButtonsContainer}>
      <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
        <MaterialIcons name="flip-camera-ios" size={28} color="white" />
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.7}
        disabled={!isCameraReady}
        onPress={onSnap}
        style={styles.capture}
      />
    </View>
  )}
</View>
```

Add the styles for the above code snippet:

```js
const styles = StyleSheet.create({
  // ...
  capture: {
    backgroundColor: '#5A45FF',
    borderRadius: 5,
    height: CAPTURE_SIZE,
    width: CAPTURE_SIZE,
    borderRadius: Math.floor(CAPTURE_SIZE / 2),
    marginBottom: 28,
    marginHorizontal: 30
  }
});
```

Here is how the capture button is shown. It can now take pictures.

![ss4](https://i.imgur.com/RYAKlLf.png)

Add JSX code to trigger the `cancelPreview` method as an action on a `TouchableOpacity` component. It wraps an icon component from `AntDesign`. This is shown when the application is in image preview mode.

```js
<View style={styles.container}>
  {isPreview && (
    <TouchableOpacity
      onPress={cancelPreview}
      style={styles.closeButton}
      activeOpacity={0.7}
    >
      <AntDesign name='close' size={32} color='#fff' />
    </TouchableOpacity>
  )}
  {!isPreview && (
    // ...
  )}
</View>
```

Add the styles for the above code snippet:

```js
const styles = StyleSheet.create({
  // ...
  closeButton: {
    position: 'absolute',
    top: 35,
    right: 20,
    height: 50,
    width: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#5A45FF',
    opacity: 0.7
  }
});
```

After taking a picture, here is how the image preview mode is displayed:

![ss5](https://i.imgur.com/dIyq9ce.png)

## Setup the Cloudinary service

Before starting with this section, make sure you have a Cloudinary account set up. If you already have an account, [log in here](https://cloudinary.com/users/login).

After logging in, you will be welcomed by a dashboard screen similar to below:

![ss6](https://i.imgur.com/jIX6Yio.png)

To upload an image to their service, two things are required.

First, an apiUrl which is constructed of the following base URL:

```shell
'https://api.cloudinary.com/v1_1/<your-cloud-name>/image/upload'
```

The value for the placeholder `<your-cloud-name>` is the cloud name you entered when creating a new account or as shown in the dashboard screen.

The second parameter required is called `upload_preset`. It is created by following the steps below:

- From the Dashboard, click Settings in the menu bar and select the Upload tab.
- Look for the section "Upload presets" and click "Add upload preset".
- Enter the name of the upload preset. In the "Signing mode," select the value "Unsigned" from the drop-down menu.
- Then click Save.

![ss7](https://i.imgur.com/sfEYaDR.gif)

## Upload an image to Cloudinary

To upload an image to the service, we need a few required presets. We will use JavaScript's `fetch` API to send a POST request to the Cloudinary API URL. A service that allows uploading base64 images requires the image data to be appended by the `data:image/jpg;base64,` prefix.

The request also requires a `data` object which has the image data as the `file` and the value of the `upload_preset`.

Modify the `onSnap` method inside as shown below.

```js
const onSnap = async () => {
  if (cameraRef.current) {
    const options = { quality: 0.7, base64: true };
    const data = await cameraRef.current.takePictureAsync(options);
    const source = data.base64;

    if (source) {
      await cameraRef.current.pausePreview();
      setIsPreview(true);

      let base64Img = `data:image/jpg;base64,${source}`;
      let apiUrl =
        'https://api.cloudinary.com/v1_1/<your-cloud-name>/image/upload';
      let data = {
        file: base64Img,
        upload_preset: '<your-upload-preset>'
      };

      fetch(apiUrl, {
        body: JSON.stringify(data),
        headers: {
          'content-type': 'application/json'
        },
        method: 'POST'
      })
        .then(async response => {
          let data = await response.json();
          if (data.secure_url) {
            alert('Upload successful');
          }
        })
        .catch(err => {
          alert('Cannot upload');
        });
    }
  }
};
```

Take a picture and when it is successfully uploaded to the Cloudinary service, an alert message like below is displayed:

![ss8](https://i.imgur.com/gEQe5wP.png)

## Using Camera2 api for Android

Android devices have a new package called [android.hardware.camera2](https://developer.android.com/reference/android/hardware/camera2/package-summary) that provides an interface to an individual camera. It replaces the deprecated [Camera](https://developer.android.com/reference/android/hardware/Camera) class.

To use the latest package using `expo-camera`, add the following prop with a value of boolean `true` on the `Camera` component.

```js
<Camera
  // ...
  useCamera2Api={true}
/>
```

## Conclusion

In this post, we have successfully used Expo Camera to take a picture and then upload it to a real-time service like Cloudinary. To add image saving functionality check out the [expo-media-library](https://docs.expo.io/versions/latest/sdk/media-library/).

The source code is available at this [Github repository](https://github.com/amandeepmittal/react-native-examples/tree/master/camera-upload-to-cloudinary).


How to upload an image using Expo Camera to Cloudinary

---
title: 'How to use React Native Geolocation to get Postal Address'
date: '2021-02-25'
slug: 'react-native-geolocation-to-get-postal-address'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://jscrambler.com/blog/how-to-use-react-native-geolocation-to-get-postal-address/'
---

Geolocation in React Native applications is the ability to fetch the geographic position of the device when it is connected to the internet. It takes advantage of an API that provides the current location of the device in the form of Longitude and Latitude coordinates. It can be used to add features such as fetching simple location coordinates of a device or getting the current location of the device. Ultimately, Geolocation provides support to the development functionalities seen in delivery or ride-hailing applications.

In this tutorial, let's learn how you can implement a feature to get the current location of a device in a React Native app. To do this we’ll be using an API provided by Expo in the form of a package called `expo-location`. We will then convert the location coordinates into human-readable postal address format.

The source code is available at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/expo-geolocation-example).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- Have [Node.js](https://nodejs.org/) version >= `12.x.x` installed.
- Have access to one package manager such as npm or yarn or npx.
- Have [expo-cli](https://github.com/expo/expo-cli) installed, or use npx

## Create a React Native app with expo-cli

Create a new React Native project using `expo-cli` and then install the dependencies required to build this demo app. Let's break down what we are going to implement:

- The demo app is going to mimic a food delivery app feature where when an end-user opens the app, the first thing they are prompted for is to fetch their current location. Let's call this screen a Welcome screen.
- Only once the location is fetched, will the end-user be taken to the Home screen of the app. This is a condition we are going to put in our demo.
- We will be using a stack navigator from [React Navigation](https://reactnavigation.org/docs/getting-started) library. This is just an example of understanding the concepts of using Geolocation data in a React Native app. You can use the same concepts in the way you want to implement the feature of fetching the current location.

Open a terminal window and execute the following commands:

```shell
npx expo init expo-geolocation-example

# navigate into that directory
cd expo-geolocation-example
yarn add @react-navigation/native @react-navigation/stack

# install dependencies with Expo specific package version
expo install expo-location react-native-gesture-handler react-native-reanimated
react-native-screens react-native-safe-area-context
@react-native-community/masked-view
```

After installing these dependencies, let's create two mock screens that are going to be the two core screens for the demo app. Create a new `screens/` directory and inside it, create the first screen file `Welcome.js`. This screen is going to display an image, a title, and a dummy mock location address for now. Later in this post, this dummy mock location address is going to display a real address based on the current location.

Add the following code snippet to this file:

```js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const Welcome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Image source={require('../assets/geo.png')} style={styles.image} />
        <Text style={styles.title}>What's your address?</Text>
      </View>
      <Text style={styles.text}>Mock Address</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    paddingTop: 130
  },
  contentContainer: {
    alignItems: 'center',
    marginBottom: 20
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: 'contain',
    marginBottom: 20
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#FD0139'
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
    color: '#fff'
  }
});

export default Welcome;
```

Create the second screen file `Home.js` with the following code snippet:

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default Home;
```

Let's hook up the stack navigation container in the `App.js` file since we do not have multiple files and different ways to navigate in this demo app. I am not going through how to set up and use the React Navigation library. If you'd like to learn more on that subject please go through the post [How to Set Up and Use Navigators in React Native](https://jscrambler.com/blog/how-to-set-up-and-use-navigators-in-react-native).

Open up the `App.js` file and add the following:

```js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Custom screens
import Welcome from './screens/Welcome';
import Home from './screens/Home';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Welcome" headerMode="none">
        <Stack.Screen name="Welcome" component={Welcome} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

Once the navigator is set, you can open up a terminal window and run the command `expo start`. You can either choose an iOS simulator or an Android emulator or the Expo Go client app to view the results so far. Here is current the state of the demo app in an iOS simulator:

<img src="https://i.imgur.com/l0cuYI1.png" width="300" />

## Check if the device's location service enabled

The first thing in the demo app we are going to implement is to check whether a device's location services are enabled or not. For this, let's create a state variable called `locationServiceEnabled`.

To check the status of the service let's create a new handler method called `CheckIfLocationEnabled`. The `expo-location` has an asynchronous method called `Location.hasServicesEnabledAsync()`. It returns a boolean value of true if the location service on the device is enabled and if otherwise, it returns false. In case of the value false, let's display an alert box indicating the same. If the location service is enabled, then update the value of the state variable using the `setLocationServiceEnabled` method.

The handler method is then called inside a `useEffect` React hook with no dependency such that it triggers only after the first render.

Modify the `Welcome.js` screen as shown below. Do note the placeholder message displayed in the place of the mock location address using a state variable called `displayCurrentAddress`. It will get an update once the current location of the device is found.

```js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image, Alert } from 'react-native';
import * as Location from 'expo-location';

const Welcome = ({ navigation }) => {
  const [locationServiceEnabled, setLocationServiceEnabled] = useState(false);
  const [displayCurrentAddress, setDisplayCurrentAddress] = useState(
    'Wait, we are fetching you location...'
  );

  useEffect(() => {
    CheckIfLocationEnabled();
  }, []);

  const CheckIfLocationEnabled = async () => {
    let enabled = await Location.hasServicesEnabledAsync();

    if (!enabled) {
      Alert.alert(
        'Location Service not enabled',
        'Please enable your location services to continue',
        [{ text: 'OK' }],
        { cancelable: false }
      );
    } else {
      setLocationServiceEnabled(enabled);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Image source={require('../assets/geo.png')} style={styles.image} />
        <Text style={styles.title}>What's your address?</Text>
      </View>
      <Text style={styles.text}>{displayCurrentAddress}</Text>
    </View>
  );
};

// styles remain same

export default Welcome;
```

To test it out in the iOS simulator, go to **Settings > Privacy > Location Services**.

<img src="https://i.imgur.com/Q0yZjbv.png" width="300" />

If it says on, as shown in the above image, tap it and make sure to switch off the **Location Services**.

<img src="https://i.imgur.com/yic9jlo.gif" width="250" />

Now open the app and you will notice that the alert box appears.

<img src="https://i.imgur.com/xzE8giE.gif" width="250" />

Similarly, on Android device, the location can be disabled from the following menu:

<img src="https://i.imgur.com/TKFYDhq.png" width="300" />

And the alert message will appear on the opening of the app:

<img src="https://i.imgur.com/Mk9egWP.png" width="300" />

Make sure to enable the location service again on the device before proceeding to the next section.

## Get current location and postal address

It is necessary to request access to a device's information whether it is location or any other sensitive information. Fortunately, `expo-location` has methods that can be directly used when fetching the current location of the device.

Let's break down the steps on how we are going to fetch the current location of the device and obtain the information of the current address (which includes name, street name, city, and postal code) to display on the app screen.

- First, create a new asynchronous handler method called `GetCurrentLocation`. Make sure to call it inside the `useEffect` hook after the previous code.
- Inside it, using the Location API method `requestPermissionsAsync`, ask the device's user to grant permission for the location. If, in any case, the user denies it, display them an alert box stating the same.
- If the permission is granted, get the current coordinates of the device's location using the Location API method `getCurrentPositionAsync`. The coordinates here are an object representing the location.
- Then, when the coordinates object is present, destructure the value of Latitude and Longitude. The Location API has a method called `reverseGeocodeAsync` which reverses the geocode of a location to a postal address. Using the result from this, we can update the value of `setDisplayCurrentAddress` to display the device's current address.

Update the code snippet in `Welcome.js` as shown below:

```js
// first update the useEffect hook
useEffect(() => {
  CheckIfLocationEnabled();
  GetCurrentLocation();
}, []);

// create the handler method

const GetCurrentLocation = async () => {
  let { status } = await Location.requestPermissionsAsync();

  if (status !== 'granted') {
    Alert.alert(
      'Permission not granted',
      'Allow the app to use location service.',
      [{ text: 'OK' }],
      { cancelable: false }
    );
  }

  let { coords } = await Location.getCurrentPositionAsync();

  if (coords) {
    const { latitude, longitude } = coords;
    let response = await Location.reverseGeocodeAsync({
      latitude,
      longitude
    });

    for (let item of response) {
      let address = `${item.name}, ${item.street}, ${item.postalCode}, ${item.city}`;

      setDisplayCurrentAddress(address);
    }
  }
};
```

Here is the output after this step:

<img src="https://i.imgur.com/JW51WSR.gif" width="250" />

The complete postal address is an object in JSON format and has the following fields (some of them might be useful for various cases):

```json
Object {
    "city": "Stockholm",
    "country": "Sweden",
    "district": "Stockholm City",
    "isoCountryCode": "SE",
    "name": "Gustav Adolfs torg",
    "postalCode": "111 52",
    "region": "Stockholm",
    "street": "Gustav Adolfs torg",
    "subregion": "Stockholm",
    "timezone": "Europe/Stockholm",
}
```

Once the location is fetched, we can send the current postal address as an object and navigate to the Home screen after a delay of two seconds using a `setTimeout` function.

Add the following code snippet after the statement `setDisplayCurrentAddress(address)`:

```js
if (address.length > 0) {
  setTimeout(() => {
    navigation.navigate('Home', { item: address });
  }, 2000);
}
```

Then, update the `Home.js` file to get the `item` object from `route.params` as well as its styles:

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const Home = ({ route }) => {
  const { item } = route.params;
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>Home Delivery address: </Text>
        <Text style={styles.text}>{item}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    justifyContent: 'center'
  },
  contentContainer: {
    paddingHorizontal: 20,
    alignItems: 'center'
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#FD0139',
    paddingBottom: 10
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
    color: '#fff'
  }
});

export default Home;
```

Here is the final output:

<img src="https://i.imgur.com/48csotO.gif" width="250" />

## Further Reading

That's it! We hope you have found this tutorial helpful. We are adding some references for you to learn more about using Location API in Expo and React Native apps, plus which different packages can be used for your particular use case.

- [Reverse Geocode from expo-location](https://docs.expo.io/versions/latest/sdk/location/#locationreversegeocodeasynclocation)
- [@react-native-community/geolocation](https://github.com/react-native-geolocation/react-native-geolocation#README.md)
- [react-native-geolocation-service](https://github.com/Agontuk/react-native-geolocation-service)
- [Hiring a React Native Developer: What Should You Look For? by Jess Marranco](https://www.g2i.co/blog/hiring-a-react-native-developer)

**The source code is available at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/expo-geolocation-example).**

_Originally Published at [Jscrambler's Blog](https://jscrambler.com/blog/how-to-use-react-native-geolocation-to-get-postal-address/)_


How to use React Native Geolocation to get Postal Address

How to use shared element transitions in React Native

---
title: 'How to remove bottom tab bar border in React Navigation'
slug: 'react-navigation-remove-tab-bar-border'
date: '2021-01-17'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/react-navigation-remove-tab-bar-border/'
---

> Updated: May 2, 2022

![cover_image](https://i.imgur.com/Tu5dv1l.png)

Navigation plays an important role in mobile applications and the React Navigation library does an awesome job in providing a completely customizable interface for utilizing different navigation patterns to React Native apps.

Having the liberty to customize tab bars with React Navigation, one customizable option available (depending on the UI design of an app) is to remove the border from the Tab bar.

Here is an example of the border that is the default when the React Navigation Bottom Tabs library is utilized to create a tab bar.

![ss1](https://i.imgur.com/ttIMI5V.png)

For the demonstration purpose, I am using an Expo project created using the `expo-cli` command-line tool. To create a similar new Expo project, you can execute the command and choose the `tabs` option.

```shell
expo init yourProjectName

# when prompted, choose the tabs option
# in managed workflow
```

This expo project comes with a default bottom tab navigator whose configuration can be found in the file `navigation/BottomTabNavigator.tsx`.

## Customize the TabBar

The Bottom Tab Bar React Navigation library gives an object called `screenOptions` to customize a tab bar. This object contains props that can be used to apply custom styles and one of the generic property it has is called `tabBarStyle`. This property is commonly used to change the styles of the tab bar, for example, by applying the `backgroundColor` styles' property.

To remove the border, add the `screenOptions` prop and inside it, add a `tabBarStyle` property called `borderTopWidth` with a value `0`.

```js
<BottomTab.Navigator
  initialRouteName='TabOne'
  screenOptions={{
    // ...
    tabBarStyle: {
       borderTopWidth: 0
    }
  }}
>
```

Here is the output:

![ss2](https://i.imgur.com/WqR3X9I.png)

Do note that this property can also be used to increase the width of the top border.

## Removing shadow on Android Device

After applying this `tabBarStyle` property, the width of the top border is removed from an Android device. However, there is a shadow at the top border of the tab bar that remains.

![ss3](https://i.imgur.com/ofnBBis.jpg)

To remove this shadow, set the `elevation` to `0`:

```js
tabBarStyle: {
  borderTopWidth: 0,
  elevation: 0
}
```

![ss4](https://i.imgur.com/3TEx5ib.jpg)

[Source code available at GitHub](https://github.com/amandeepmittal/react-native-examples/tree/main/remove-tabbar-border)


How to remove bottom tab bar border in React Navigation

How to use redux-persist in React Native with Asyncstorage

---
title: 'How to Animate a Header View on Scroll With React Native Animated'
slug: 'animate-header-view-on-scroll-with-react-native-animated-api'
date: '2020-10-01'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://jscrambler.com/blog/how-to-animate-a-header-view-on-scroll-with-react-native-animated'
---

![cover_image](https://i.imgur.com/qDKlX8L.jpg)

The [Animated](https://reactnative.dev/docs/animated.html) library from React Native provides a great way to add animations and give app users a smooth and friendlier experience.

In this tutorial, let's explore a way to create a header view component that animates on the scroll position of the `ScrollView` component from React Native. We will go through the basics of creating a new Animated value as well as explaining the significance of functions and properties like `interpolation`, `extrapolate`, `contentOffset`, and so on.

[The source code is available at GitHub](https://github.com/amandeepmittal/react-native-examples/tree/master/animate-header-on-scroll).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements on your local dev environment.

- [Node.js](https://nodejs.org/) version >= 12.x.x installed
- Have access to one package manager such as npm or yarn
- [expo-cli](https://github.com/expo/expo-cli) version installed or use npx

The example in the following tutorial is based on Expo SDK 38.

## Installing dependencies

Start by creating a new React Native app generated with `expo-cli`. Do note that all the code mentioned in this tutorial works with plain React Native apps as well. Open up a terminal window and execute the following command:

```shell
npx expo-cli init animate-header-example

# after the project is created, navigate into the directory
cd animate-header-example
```

To handle devices with notch both on iOS and Android operating systems, let's install some libraries first. These libraries are going to add automatic padding on notch devices such that the main view of the app does not intersect with a safe area on notch-enabled devices. Run:

```shell
expo install react-native-safe-area-view react-native-safe-area-context
```

To use safe area views, wrap the root of the React Native app with `SafeAreaProvider` from the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) library. Open `App.js` and modify the it as shown below:

```js
import React from 'react';
import { Text, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    </SafeAreaProvider>
  );
}
```

Next, wrap the contents of the `App` component with `SafeAreaView` from the [react-native-safe-area-view](https://github.com/react-navigation/react-native-safe-area-view) library. It is going to have a `style` prop with a `flex` of value `1` and another prop called `forceInset`. It’s important we add this, especially for some Android devices which might not behave as expected. This prop is going to force the application to add an inset padding on the content view. Setting the value of `top: always` will always imply that padding is forced at the top of the view.

```js
// ... other import statements
import SafeAreaView from 'react-native-safe-area-view';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
```

Here is what happens on an Android device when `forceInset` is not used on `SafeAreaView`:

![ss1](https://i.imgur.com/uBdAKZ4.jpg)

And with the `forceInset` prop applied:

![ss2](https://i.imgur.com/xNZx2rq.jpg)

On iOS, the behavior is as expected:

![ss3](https://i.imgur.com/HXHJRv9.png)

The last step in this section is to create a new component file called `AnimatedHeader.js` inside the `components/` directory. For now, it is going to return nothing.

```js
import React from 'react';
import { Animated, View } from 'react-native';

const AnimatedHeader = () => {
  return null;
};

export default AnimatedHeader;
```

Make sure to import it in the `App.js` file:

```js
// ... after other import statements
import AnimatedHeader from './components/AnimatedHeader';
```

## Creating an animated header component

The animation on the position of the scroll on a `ScrollView` component is going to have an `Animated.Value` of `0`. To create an animation, `Animated.Value` is required. In the `App.js` file, import `useRef` from the React library. Then, define a variable called `offset` with a new `Animated.Value`. To use the Animated library from React Native, import it as well.

```js
import React, { useRef } from 'react';
import { Text, View, Animated } from 'react-native';
// ...other import statements

export default function App() {
  const offset = useRef(new Animated.Value(0)).current;

  // ...
}
```

For this example, it is not required to use the `useRef` hook; however, if you are looking forward to modifying the animated value, it is recommended to use `useRef`. It provides a `current` property that is persisted throughout a component's lifecycle.

The value of the `offset` can now be passed as a prop to the `AnimatedHeader` component.

```js
export default function App() {
  const offset = useRef(new Animated.Value(0)).current;

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        {/* Add the following AnimatedHeader */}
        <AnimatedHeader animatedValue={offset} />
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
```

To access the safe area inset value inside the `AnimatedHeader` component, the library `react-native-safe-area-context` provides a hook called `useSafeAreaInsets()`. This hook returns a safe area insets object with the following values:

```js
{
  top: number,
  right: number,
  bottom: number,
  left: number
}
```

The inset value of `top` is going to be manipulated when defining the animated header.

First, let's import this hook in the `AnimatedHeader.js` file and then define a fixed `HEADER_HEIGHT` constant that is going to be the initial height of the `Animated.View`.

```js
// ... other import statements
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const HEADER_HEIGHT = 200;

const AnimatedHeader = ({ animatedValue }) => {
  const insets = useSafeAreaInsets();

  return null;
};
```

To animate the height of the header view on the scroll, we are going to use interpolation. The `interpolate()` function on `Animated.Value` allows an input range to map to a different output range.

In the current scenario, when the user scrolls, the interpolation on `Animated.Value` is going to change the scale of the header to slide to the top on scroll along the y-axis. This effect is going to minimize the initial value of the height of `Animated.View`.

The interpolation must specify an `extrapolate` value. This determines the scaling of the header’s height to be visible at the last value in `outputRange`. There are three different values for `extrapolate` available, but we are going to use `clamp`.

Begin by declaring a variable called `headerHeight` that is going to have the value of interpolation. The `Animated.Value` is the prop `animatedValue` coming from the parent component.

The `inputRange` is going to be `0` to the `HEADER_HEIGHT` plus the top inset. The `outputRange` is to be the `HEADER_HEIGHT` plus the top inset to the top inset plus `44`.

```js
const AnimatedHeader = ({ animatedValue }) => {
  const insets = useSafeAreaInsets();

  const headerHeight = animValue.interpolate({
    inputRange: [0, HEADER_HEIGHT + insets.top],
    outputRange: [HEADER_HEIGHT + insets.top, insets.top + 44],
    extrapolate: 'clamp'
  });

  // ...
};
```

Now, let's add an `Animated.View` to render from this component. It is going to use `position: absolute` to help cover the background behind the status bar as well as the same color as the whole header.

```js
const AnimatedHeader = ({ animatedValue }) => {
  // ...
  return (
    <Animated.View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 10,
        height: headerHeight,
        backgroundColor: 'lightblue'
      }}
    />
  );
};
```

This section ends with the following output:

![ss4](https://i.imgur.com/kOdpwwL.png)

## Manipulating the ScrollView

In the `App.js` file, a `ScrollView` component is going to be displayed beneath the header component and, in return, it is going to display a list of mocked data.

For this example, I've prepared a bare minimum list of book titles in a separate file called `data.js`.

```js
const DATA = [
  {
    id: 1,
    title: 'The Hunger Games'
  },
  {
    id: 2,
    title: 'Harry Potter and the Order of the Phoenix'
  },
  {
    id: 3,
    title: 'To Kill a Mockingbird'
  },
  {
    id: 4,
    title: 'Pride and Prejudice'
  },
  {
    id: 5,
    title: 'Twilight'
  },
  {
    id: 6,
    title: 'The Book Thief'
  },
  {
    id: 7,
    title: 'The Chronicles of Narnia'
  },
  {
    id: 8,
    title: 'Animal Farm'
  },
  {
    id: 9,
    title: 'Gone with the Wind'
  },
  {
    id: 10,
    title: 'The Shadow of the Wind'
  },
  {
    id: 11,
    title: 'The Fault in Our Stars'
  },
  {
    id: 12,
    title: "The Hitchhiker's Guide to the Galaxy"
  },
  {
    id: 13,
    title: 'The Giving Tree'
  },
  {
    id: 14,
    title: 'Wuthering Heights'
  },
  {
    id: 15,
    title: 'The Da Vinci Code'
  }
];

export default DATA;
```

The next step is to import this file in `App.js`. Also, import the `ScrollView` component from React Native.

```js
//...
import { ScrollView, Text, View, Animated } from 'react-native';

import DATA from './data';
```

Next, modify the contents of the `App` component. The important prop to note below in the `ScrollView` component is the `onScroll` prop. Mapping gestures like scrolling directly to an animated value can be done by using `Animated.Event`. This type of event function is passed as the value to the `onScroll` prop.

`Animated.Event` accepts an array of objects as the first argument which is going to be the `contentOffset`, which tells the current position of the scrolling view. It changes every time the user scrolls up or down. The value of `contentOffset` along the y-axis is going to be the same `Animated.Value` that is used to interpolate the height of the `AnimatedHeader` component.

It is recommended that you pass the second argument of `useNativeDriver` in `Animated.Event` .

```js
export default function App() {
  const offset = useRef(new Animated.Value(0)).current;

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        <AnimatedHeader animatedValue={offset} />
        <ScrollView
          style={{ flex: 1, backgroundColor: 'white' }}
          contentContainerStyle={{
            alignItems: 'center',
            paddingTop: 220,
            paddingHorizontal: 20
          }}
          showsVerticalScrollIndicator={false}
          scrollEventThrottle={16}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: offset } } }],
            { useNativeDriver: false }
          )}
        >
          {DATA.map(item => (
            <View
              key={item.id}
              style={{
                marginBottom: 20
              }}
            >
              <Text style={{ color: '#101010', fontSize: 32 }}>
                {item.title}
              </Text>
            </View>
          ))}
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
```

Here is the output after this step on an iOS device:

![ss5](https://i.imgur.com/QFWrJCN.gif)

On Android:

![ss6](https://i.imgur.com/4HlPFNQ.gif)

## Conclusion

I hope you had fun reading this tutorial. If you are trying the Animated library from React Native for the first time, wrapping your head around it might take a bit of time and that's the part of the process.

Some of the important topics covered in this post are listed as links for further reading below:

- [The onScroll prop](https://reactnative.dev/docs/scrollview#onscroll)
- [Interpolation](https://reactnative.dev/docs/animations#interpolation)
- [Tracking gestures with Animated.Event](https://reactnative.dev/docs/animations#tracking-gestures)

Originally published at [Jscrambler](https://jscrambler.com/blog/how-to-animate-a-header-view-on-scroll-with-react-native-animated).


How to Animate a Header View on Scroll With React Native Animated

---
title: 'Styling The React Native Way'
slug: 'styling-the-react-native-way'
date: '2020-06-04'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/styling-the-react-native-way/'
---

> [Originally published at Level up coding on January 14, 2019.](https://levelup.gitconnected.com/styling-the-react-native-way-3cc6d3ef52d0)

React Native comes with many in-built components that you can use to style cross-platform applications. Styling a mobile application is essential. I cannot put enough emphasis on how important it is for a mobile app to have a pleasing design and good use of colors can be provide a better user experience. Without a polished user interface, a potential user will be repelled by the lack of design in the mobile app.

React Native uses plain JavaScript to style. In this tutorial, you are going to explore different ways to style a React Native app by getting some hands-on experience and learning tips along the way.

## Introduction

React Native uses JavaScript to style, if you have some experience with the CSS of the web, you know that styling a component is nothing more than writing code by using proper styling syntax. If you do not have any idea what CSS is, stop right here as there would be no advantage for you reading this tutorial. You need to understand a bit of CSS to continue reading the tutorial below. If you understand what `backgroundColor: 'blue’` means, then you are good to go.

React Native comes in with many built-in components. Each having its own specific set of styles. These specific styles may or may not be applicable to other components.

For example, `Text` component supports `fontWeight` whereas a `View` component does not. However, some of the styles are similar but not exactly the same. `View` supports `shadowColor` while `Text` supports `textShadowColor`. Lastly, you have to make note that there are a few platform-specific styles such as `shadowPropTypesIOS`.

## Different Ways to Style a React Native App

There are different ways you can add styles to your React Native component. First one is **inline styling**. See the example below.

```js
// inline example
import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue'
      }}
    >
      <Text style={{ color: 'white', fontSize: 32 }}>Some Text</Text>
    </View>
  );
}
```

The result of the above code of snippet is following.

![ss1](https://i.imgur.com/GHvCHh4.png)

In the post [**Getting Started with React Native in 2019**](https://amanhimself.dev/getting-started-with-react-native-in-2019-build-your-first-app/), I've described about `StyleSheet` object. It is the second way.

Available from React Native API, by importing and using `StyleSheet`, you create an object and refer to each style individually. This brings the separation of styles from the render method and helps you organize the code. Also, it promotes re-using styles across components.

```js
// StyleSheet Example
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.bigText}>Some Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  bigText: {
    color: 'white',
    fontSize: 32
  }
});
```

This snippet of code will have the same effect on rendering on a mobile device. The only thing changed here is being separation of styles inside the component `App` with `StyleSheet` object. It takes a JavaScript object as it does above, and returns a new `Stylesheet` object from it. There are no classes or ids in React Native like in web development.

**To create a new style object you use** `StyleSheet.create()` **method. Another advantage this way of styling React Native components** hold is that when creating a new style object every time, `StyleSheet` helps to create style objects with an ID which is further used to reference instead of rendering the whole component again.

Another difference comes with **inline** styling is that an inline style property name, if misspelled, does not work and there is no error thrown for the misspelling.

![ss2](https://i.imgur.com/065jq9Y.png)

However there is a valid style property check when styles are defined using `StyleSheet.create()`.

![ss3](https://i.imgur.com/pM0LktI.png)

![ss4](https://i.imgur.com/0iAFAvZ.png)

## Encapsulation of Styles

In React Native, styles are scoped to the component rather than the whole application. You have seen one preferred way of defining styles used commonly by the React Native community.

Another way to define styles is to organize your application code in such a way that it becomes easier to keep track of them when refactoring, or when the application starts to expand. In this second way, you declare all the styles related to a component in a separate file. Then import that styles file inside the component file. Here is an example for you. Create a new file next to the `App.js` called `AppStyles.js`.

```js
// AppStyles.js
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  bigText: {
    color: 'white',
    fontSize: 32
  }
});
```

Next step is to import this file inside `App.js`.

```js
//App.js
import React from 'react';
import { View, Text } from 'react-native';

import styles from './AppStyles';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.bigText}>Some Text</Text>
    </View>
  );
}
```

The demo runs and produces the same result as before. This separation of styles in a file other than the component file has its own advantages. It increases the reusability of other style objects.

## Using arrays to pass styles

In inline styling, you must have observed that it is nothing but an object that starts with a `style` prop and an object is passed with key-value pairs. Similarly, you can use an array that can contain multiple key-value pairs as the value of the `style` prop.

```js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.bigText, styles.textYellow]}>Some Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  bigText: {
    color: 'white',
    fontSize: 32
  },
  textYellow: {
    color: 'yellow'
  }
});
```

The following is the result for the above snippet.

![ss5](https://i.imgur.com/GHvCHh4.png)

Do notice that, the last style passed in overrides the previous style when there is a duplicate `color` property.

## Building an App: Dark/Light Themes

In this section, you are going to build a simple app called **light/dark mode** toggle. It contains a button with some text with a dark background of its own and a light colored background. When the user clicks the button, the background of the app changes to dark mode and the text on the button changes to light mode.

First, let us define styles for it. Open `AppStyles.js` the external styling file.

```js
import { StyleSheet } from 'react-native';

const Colors = {
  light: 'white',
  dark: 'black'
};

const baseContainer = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
};

const buttonBorderContainer = {
  justifyContent: 'center',
  alignItems: 'center',
  borderWidth: 3,
  height: 50,
  width: 150
};

const lightStyles = StyleSheet.create({
  container: {
    ...baseContainer,
    backgroundColor: Colors.light
  },
  button: {
    ...buttonBorderContainer,
    backgroundColor: Colors.dark
  }
});

const darkStyles = StyleSheet.create({
  container: {
    ...baseContainer,
    backgroundColor: Colors.dark
  },
  button: {
    ...buttonBorderContainer,
    backgroundColor: Colors.light
  }
});

export default function useTheme(darkTheme) {
  return darkTheme ? darkStyles : lightStyles;
}
```

A lot is going on here. First, the two different color variables are defined inside a single `Colors` object. Then, there are two different container objects, one for the background and one for the button.

Both of these container objects then re-used inside the StyleSheet objects, `lightStyles` and `darkStyles`. Similarly, to define the background color, we make re-use of the color object such that we do not have to write the value of each color twice.

Lastly, there is a function that gets exported that returns theme based upon a boolean value. Dark Theme’s value `darkStyles` is returned if its true otherwise light theme is returned.

The file `AppStyles.js` is a clear representation of structuring styles in a React Native app. This file is then imported inside the `App.js` that has the following content.

```js
import React, { useState } from 'react';
import { View, Button } from 'react-native';

import useTheme from './AppStyles';

export default function App() {
  const [darkTheme, setDarkTheme] = useState(false);
  const styles = useTheme(darkTheme);

  const toggleTheme = () => {
    setDarkTheme(!darkTheme);
  };

  return (
    <View style={styles.container}>
      <View style={styles.button}>
        <Button title={'Click Me'} onPress={toggleTheme} />
      </View>
    </View>
  );
}
```

By defining the state, you can declare the default value of the dark theme to be false such as it allows the light theme to be the default. `toggleTheme` is the method that reverses the boolean value for the dark theme accordingly. Next, inside the `render()` you are passing the current value of dark theme from the state. This function is then used to apply the correct theme or set of styles based on the boolean value.

You can see this in action below.

![ss6](https://i.imgur.com/uEQLG9f.gif)

- You can find the complete code for the example at [this Expo Snack](https://snack.expo.io/@amanhimself/38e20d).
- A big thank you to [Catalin Miron](https://twitter.com/mironcatalin) for proof reading it 🤗

**Resources & Further Reading:**

- If you are looking for some insight on how to hire a React Native dev, Toptal.com has an [awesome guide here](https://www.toptal.com/react-native#hiring-guide).


Styling The React Native Way

---
title: 'How to create custom wavy headers with react-native-svg'
slug: 'create-custom-headers-with-react-native-svg'
date: '2020-05-26'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/creating-custom-wavy-headers-using-react-native-svg-639ce0861327'
---

> [Originally Published at Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/creating-custom-wavy-headers-using-react-native-svg-639ce0861327)

In React Native apps, the support for SVG graphics is provided by an open-source module called [`react-native-svg`](https://github.com/react-native-community/react-native-svg) that is maintained by React Native community.

Using SVG can enhance an app’s design when it comes to displaying different patterns. It can make a difference in how the look and feel of the app might appear to the end-user, as well how it is easy to edit the pattern built using SVG. SVG is mainly found on the web, and while they have similar uses to JPEG, PNG, and WebP image types, SVG is not resolution-dependent. Hence, the definition according to [Wikipedia](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics):

<blockquote>
  Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based
  vector image format for two-dimensional graphics with support for
  interactivity and animation.
</blockquote>

This format consists of shapes rather than pixels which can further be concluded that an SVG graphic can be scaled indefinitely in terms of resolution.

In this post, let us learn how to use `react-native-svg` in React Native and Expo apps and create some custom examples such as wavy header shown below.

<img src='https://miro.medium.com/max/598/1*aivsFUf_OF6mYBSfOCGrTQ.gif' />

## Requirements

Ensure your dev environment includes the following required packages:

- [Node.js](https://nodejs.org/) above `12.x.x` installed on your local machine
- JavaScript/ES6 basics
- [`expo-cli`](https://expo.io/tools)

## Installing react-native-svg library

Start by creating a new project using expo-cli. Navigate inside the project directory when the CLI has finished generating the new project. Then install all the required dependencies to integrate the `react-native-svg` library.

```shell
expo init [PROJECT NAME]

cd [PROJECT NAME]

expo install react-native-svg
```

The reason to use `expo install` command when building a React Native app using Expo SDK instead of package managers like `npm` or `yarn` is that it is going to install the most compatible version of the package available to be used with Expo SDK. This avoids unnecessary errors.

That's it for installing this library. The `react-native-svg` library contains common shapes and elements such as `Svg`, `Rect`, `Circle`, `Line`, `Polygon`, `Path`, and so on as components to be used. You are going to see `Svg` and `Path` in action, in this post.

## Create a header component

In the next few sections, let us try to create a custom header background that has a bottom border with the form of a wave as shown below.

<img src='https://miro.medium.com/max/700/1*mf6AmpW-7j4nS1nixMDiVQ.png' />

Start by creating a new screen component inside `src/screens/ScreenOne.js` file that displays a heading on the screen. (_Create the directory if it doesn't exist._)

Add the following code snippet to this file.

```js
import React from 'react';
import { StyleSheet, View, Text, Dimensions } from 'react-native';

export default function ScreenOne() {
  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>Custom Header</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  headerContainer: {
    marginTop: 50,
    marginHorizontal: 10
  },
  headerText: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    marginTop: 35
  }
});
```

Next, go to `App.js` file and modify it to render the `ScreenOne` functional component as below.

```js
import React from 'react';
import ScreenOne from './src/screens/ScreenOne';
import { StatusBar } from 'react-native';

export default function App() {
  return (
    <>
      <StatusBar hidden={true} />
      <ScreenOne />
    </>
  );
}
```

Lastly, to see this simple header text on a device's screen, from the terminal window, execute the command `expo start`. You should results similar to the screenshot below:

<img src='https://miro.medium.com/max/700/1*kwennRzVGQSDL0fASGCC5g.png' />

## Create a custom header component with waves

The motive of this section is to add a custom header using the svg component in the background in the `ScreenOne.js` file.

The SVG component that we intend to create is going to wrap the path drawing primitive. This primitive is the outline of a shape that can be filled or stroked. It primitive is represented by the `Path` component from `react-native-svg` library and makes use of different commands such as `elliptical Arc`, `moveto`, `lineto`and so on. You can read more about [Paths here](https://www.w3.org/TR/SVG/paths.html).

To generate the SVG background as you have seen in the previous section, I am going to make use of [getwaves.io](https://getwaves.io/). This web tool allows you to generate custom wave patterns in SVG format. Check out their website, it is simple and fulfils the purpose. You can create different patterns using this tool.

<img src='https://miro.medium.com/max/984/1*NzoVM40QM6VUNSGyCQLZ7g.gif' />

Make sure to copy the values of properties such as `viewbox` and `d` as shown above.

Next, create a file called `WavyHeader.js` inside `src/components/` directory. Import the following statements.

```js
import React from 'react';
import { View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
```

Create a functional component called `WavyHeader` that is going to have a prop passed from the parent (_the screen component_) it is going to be used. Let us call this prop `customStyles`. The main reason to pass this prop here is to define the dimensions of the screen component in its own file and keep the style value dynamic for different screens.

Here is the complete code snippet for this custom component. Notice the properties of the `Path` component are the same as copied from getwaves.io.

```jsx
export default function WavyHeader({ customStyles }) {
  return (
    <View style={customStyles}>
      <View style={{ backgroundColor: '#5000ca', height: 160 }}>
        <Svg
          height="60%"
          width="100%"
          viewBox="0 0 1440 320"
          style={{ position: 'absolute', top: 130 }}
        >
          <Path
            fill="#5000ca"
            d="M0,96L48,112C96,128,192,160,288,186.7C384
            ,213,480,235,576,213.3C672,192,768,128,864,
            128C960,128,1056,192,1152,208C1248,224,1344,192,
            1392,176L1440,160L1440,0L1392,0C1344,0,1248,0,
            1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,
            384,0,288,0C192,0,96,0,48,0L0,0Z"
          />
        </Svg>
      </View>
    </View>
  );
}
```

Now, go back to the `ScreenOne.js` file and import this custom component after the rest of the import statements.

```js
// rest of the import statements
import WavyHeader from '../components/WavyHeader';
```

Add this component before the `<View>` that represents `headerContainer`.

```js
export default function ScreenOne() {
  return (
    <View style={styles.container}>
      <WavyHeader customStyles={styles.svgCurve} />
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>Custom Header</Text>
      </View>
    </View>
  );
}
```

Lastly, define the style reference `svgCurve` in the `StyleSheet` object as shown in the snippet below.

```js
const styles = StyleSheet.create({
  // rest of the styles
  svgCurve: {
    position: 'absolute',
    width: Dimensions.get('window').width
  },
  headerText: {
    fontSize: 30,
    fontWeight: 'bold',
    // change the color property for better output
    color: '#fff',
    textAlign: 'center',
    marginTop: 35
  }
});
```

From the snippet, you can notice that using the `Dimensions` API from `react-native` we are going to get the width of the current window. The `position` property is set to `absolute` such that the header component that contains the heading is displayed and does not hide behind this wavy background.

The final result is going to be as the following.

<img src='https://miro.medium.com/max/700/1*mf6AmpW-7j4nS1nixMDiVQ.png' />

## Make WavyHeader component reusable

So far, you have completed the task of displaying the wavy header background on a screen component. But what if the scenario changes and you have two screens both require wavy header backgrounds but with some customization such as each having a different height as well as different wave pattern?

In this section, let us customize the `WavyHeader` component to accept more props in order to make it a reusable component.

First, let us customize the `WavyHeader.js` file to accept more props.

```js
export default function WavyHeader({
  customStyles,
  customHeight,
  customTop,
  customBgColor,
  customWavePattern
}) {
  return (
    <View style={customStyles}>
      <View style={{ backgroundColor: customBgColor, height: customHeight }}>
        <Svg
          height="60%"
          width="100%"
          viewBox="0 0 1440 320"
          style={{ position: 'absolute', top: customTop }}
        >
          <Path fill={customBgColor} d={customWavePattern} />
        </Svg>
      </View>
    </View>
  );
}
```

Now the `<Path />` component is going to accept values (such as `backgroundColor`, `height`) in the form of props passed to the `WavyHeader` component.

Next, go to the `ScreenOne.js` file and pass in the values for the props for the `WavyHeader` component.

```jsx
export default function ScreenOne() {
  return (
    <View style={styles.container}>
      <WavyHeader
        customStyles={styles.svgCurve}
        customHeight={160}
        customTop={130}
        customBgColor="#5000ca"
        customWavePattern="M0,96L48,112C96,128,192,160,288,
        186.7C384,213,480,235,576,213.3C672,192,768,128,864,
        128C960,128,1056,192,1152,208C1248,224,1344,192,1392,
        176L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,
        0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,
        0,96,0,48,0L0,0Z"
      />
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>Custom Header</Text>
      </View>
    </View>
  );
}
```

You won’t see a difference in the result on the device’s screen unless you change the values of these props.

<img src='https://miro.medium.com/max/700/1*mf6AmpW-7j4nS1nixMDiVQ.png' />

## Conclusion

You can try adding more custom screens to have different wave patterns and try to use the `WavyHeader` component as reusable for different screens. Here is an example below that displays two different screens with different wave patterns as well as background color and height.

<img src='https://miro.medium.com/max/700/1*ZmqxTfYO5jfv24ktveRzxg.png' />

<img src='https://miro.medium.com/max/598/1*aivsFUf_OF6mYBSfOCGrTQ.gif' />

- [Source code](https://github.com/amandeepmittal/wavySVGExample).
- Or try using an Expo client [here](https://expo.io/@amanhimself/rnwavysvg).
- Or check out [Leandro Favre’s](https://twitter.com/FavreLeandro) [Whicecream](https://github.com/AtilaDev/whicecream) example based on this tutorial!

Here is the list of resources used in order to create this post:

- [react-native-svg](https://github.com/react-native-community/react-native-svg)
- [getwaves.io](https://getwaves.io/)
- [What are Paths?](https://www.w3.org/TR/SVG/paths.html)


How to create custom wavy headers with react-native-svg

Creating "Quarantine Pro" — A Fun Learning Experiment in React Native

---
title: 'How to add a Search bar in a FlatList in React Native apps'
date: '2020-04-16'
slug: 'add-search-bar-to-a-flatlist-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://blog.crowdbotics.com/add-search-bar-flatlist-react-native-apps/'
---

![cover_image](https://i.imgur.com/zeVnUHd.png)

> Originally published at [Crowdbotics.com](https://blog.crowdbotics.com/add-search-bar-flatlist-react-native-apps)

There are few ways to create scrollable lists in React Native. Two of the common ways available in React Native core are `ScrollView` and `FlatList` components. Each has its strength and in this tutorial, let us dive deep to create a search bar with `FlatList` component.

The final result you are going to achieve at the end of this tutorial is shown below.

![ss8](https://i.imgur.com/a5FpiUm.gif)

## Table of contents

- Getting started
- What is FlatList?
- Basic usage of a FlatList component
- Fetching data from Remote API in a FlatList
- Adding a custom Separator to FlatList component
- Adding a Search bar
- Run the app
- Add clear button to input text field
- Conclusion

## Getting started

For the demo we are going to create in this tutorial, I am going to use [Expo](https://expo.io/). You are free to choose and use anything between an Expo CLI or a `react-native-cli`.

To start, let us generate a React Native app using Expo CLI and then install the required dependency to have a charming UI for the app. Open up a terminal window and run the following commands in the order they are mentioned.

```shell
expo init searchbarFlatList

cd searchbarFlatList

yarn install @ui-kitten/components @eva-design/eva lodash.filter

expo install react-native-svg
```

_Note_: The dependency `react-native-svg` is required as a peer dependency for the UI kitten library.

UI Kitten is ready to use now. To check, everything has installed correctly, let us modify `App.js` file as the following snippet:

```js
import React from 'react';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
import { mapping, light as lightTheme } from '@eva-design/eva';

const HomeScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category="h1">HOME</Text>
  </Layout>
);

const App = () => (
  <ApplicationProvider mapping={mapping} theme={lightTheme}>
    <HomeScreen />
  </ApplicationProvider>
);

export default App;
```

The `ApplicationProvider` accepts two props, `mapping` and `theme`.

To run this demo, open up the terminal window and execute the following command.

```shell
expo start
```

I am using an iOS simulator for the demo. Here is the output of the above code snippet.

![ss1](https://i.imgur.com/TZ173Uv.png)

## What is FlatList?

The component `FlatList` is an efficient way to create scrolling data lists in a React Native app. It has a simple API to work with and is more efficient and preferment with a large amount of information to display in comparison to its alternate.

By default, you can just pass in an array of data and this component will do its work. You do not have to take care of formatting the data too often.

## Basic usage of a FlatList component

There are three primary props that a FlatList component requires to display a list of data:

- `data`: an array of data that is used to create a list. Generally, this array is built of multiple objects.
- `renderItem`: is a function that takes an individual element from the `data` array and renders it on the UI.
- `keyExtractor`: it tells the list of data to use the unique identifiers or `id` for an individual element.

To get understand this pragmatically, let us build a mock an array of data and using `FlatList`, let us display it on our demo app. To start, import the following statements in `App.js` file.

```js
import React from 'react';
import { FlatList, View, Text } from 'react-native';
```

Then, create an array of mock data.

```js
const mockData = [
  { id: '1', text: 'Expo 💙' },
  { id: '2', text: 'is' },
  { id: '3', text: 'Awesome!' }
];
```

Now, modify the `HomeScreen` component with the following snippet:

```js
const HomeScreen = () => (
  <View
    style={{
      flex: 1,
      paddingHorizontal: 20,
      paddingVertical: 20,
      marginTop: 40
    }}
  >
    <FlatList
      data={mockData}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <Text style={{ fontSize: 22 }}>
          {item.id} - {item.text}
        </Text>
      )}
    />
  </View>
);
```

If the Expo cli command to run the development server is still running, you are going to get the following result.

![ss2](https://i.imgur.com/penUpT7.png)

## Fetching data from Remote API in a FlatList

You can even play around with it. Try to fetch data from a real-time remote API and display them in the list instead of mock data. For a start, you can use a public API URL such as [Randomuser.me API](https://randomuser.me/api/). The result to obtain at the end of this section is displayed below.

![ss3](https://i.imgur.com/cAwKEaD.png)

Open, `App.js` file and a state object with some properties to keep track of data from the Random User API. Also, do not forget to modify the import statements.

```js
// modify the import statements as below
import React from 'react';
import {
  FlatList,
  View,
  ActivityIndicator,
  TouchableOpacity
} from 'react-native';
import { ApplicationProvider, Text, Avatar } from '@ui-kitten/components';
import { mapping, light as lightTheme } from '@eva-design/eva';

// add a state object to the HomeScreen component
class HomeScreen extends React.Component {
  state = {
    loading: false,
    data: [],
    page: 1,
    seed: 1,
    error: null
  };

  // ... rest of the code
}
```

With the HTTP request to the API URL, let us fetch the first 20 results for now. Create a handler method called `makeRemoteRequest` that uses JavaScript's `fetch(url)` where `url` is the API request. It will fetch the results in JSON format. In case of a successful response from the API, the loading indicator (_which is going to add later_) will be false.

Also, using the lifecycle method `componentDidMount`, you can render the list of random users at the initial render of the `HomeScreen` component.

```js
 componentDidMount() {
 this.makeRemoteRequest()
 }

 makeRemoteRequest = () => {
 const { page, seed } = this.state
 const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`
 this.setState({ loading: true })

 fetch(url)
 .then(res => res.json())
 .then(res => {
 this.setState({
 data: page === 1 ? res.results : [...this.state.data, ...res.results],
 error: res.error || null,
 loading: false
 })
 })
 .catch(error => {
 this.setState({ error, loading: false })
 })
 }
```

Next, add a `renderFooter` handler method that is going to display a loading indicator based on the value from the state object. This indicator is shown when the list of data in still being fetched. When the value of `this.state.loading` is true, using the `ActivityIndicator` from react-native components, a loading indicator on the UI screen is shown.

```js
renderFooter = () => {
  if (!this.state.loading) return null;

  return (
    <View
      style={{
        paddingVertical: 20,
        borderTopWidth: 1,
        borderColor: '#CED0CE'
      }}
    >
      <ActivityIndicator animating size="large" />
    </View>
  );
};
```

Here is the output you are going to get when the loading indicator is shown.

![ss5](https://i.imgur.com/FYDMKsp.png)

## Adding a custom Separator to FlatList component

Previously, you learned about the three most important props in the FlatList component. It is so flexible that it comes with extra props to render different components to make UI as pleasing to the user. One such prop is called `ItemSeparatorComponent`. You can add your own styling with custom JSX.

To do so, add another handler method called `renderSeparator`. It consists of rendering a `View` with some styling.

```js
renderSeparator = () => {
  return (
    <View
      style={{
        height: 1,
        width: '86%',
        backgroundColor: '#CED0CE',
        marginLeft: '5%'
      }}
    />
  );
};
```

This completes all of the handler method currently required. Now, let us replace the previous `FlatList` component in `App.js` file with the following snippet.

A list of user names is going to be rendered with an individual item as the user. When pressed it shows an alert message for now but in real-time app, it will go on to display the complete user profile or user's contact.

The individual items in the list are going to be separated by the `renderSeparator` method as well as each item is going to display a user image which is composed of `Avatar` component from `react-native-ui-kitten`. The data is coming from the state object.

```js
<FlatList
  data={this.state.data}
  renderItem={({ item }) => (
    <TouchableOpacity onPress={() => alert('Item pressed!')}>
      <View
        style={{
          flexDirection: 'row',
          padding: 16,
          alignItems: 'center'
        }}
      >
        <Avatar
          source={{ uri: item.picture.thumbnail }}
          size="giant"
          style={{ marginRight: 16 }}
        />
        <Text
          category="s1"
          style={{
            color: '#000'
          }}
        >{`${item.name.first} ${item.name.last}`}</Text>
      </View>
    </TouchableOpacity>
  )}
  keyExtractor={item => item.email}
  ItemSeparatorComponent={this.renderSeparator}
  ListFooterComponent={this.renderFooter}
/>
```

From the above snippet, you can also notice that the loading indicator handler method `renderFooter()` is also used as the value of a prop called `ListFooterComponent`.

You can also use this prop to render other information at the bottom of all the items in the list. One example is to fetch more items in the list and show the loading indicator when the request is made.

Here is the output so far.

![ss4](https://i.imgur.com/eszTsxG.gif)

## Adding a Search bar

To create a search bar on top of the FlatList, you need a component that scrolls away when the list is scrolled. One possible solution is to create a custom Search bar component and render it as the value of `ListHeaderComponent` prop in a FlatList.

Open `App.js` file and add the following prop to the list.

```js
<FlatList
  // rest of the props remain same
  ListHeaderComponent={this.renderHeader}
/>
```

The search bar component is going to be an input field that can take the user's name from the end-user. To build one, let us start by modifying the import statements as below.

```js
import filter from 'lodash.filter';
import {
  ApplicationProvider,
  Text,
  Avatar,
  Input
} from '@ui-kitten/components';
```

Next, modify the `state` object and the following variables to it. The `query` is going to hold the search term when the input is provided. The `fullData` is a temporary array that a handler method is going to filter the user's name on the basis of a query.

```js
state = {
  // add the following
  query: '',
  fullData: []
};
```

Since you are already storing the `results` fetched from the remote API, state variable `data`, let us do the same for `fullData` as well. Add the following inside the handler method `makeRemoteRequest()`.

```js
makeRemoteRequest = () => {
  const { page, seed } = this.state;
  const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
  this.setState({ loading: true });

  fetch(url)
    .then(res => res.json())
    .then(res => {
      this.setState({
        data: page === 1 ? res.results : [...this.state.data, ...res.results],
        error: res.error || null,
        loading: false,

        // ---- ADD THIS ----
        fullData: res.results
      });
    })
    .catch(error => {
      this.setState({ error, loading: false });
    });
};
```

Next, add the handler method that is going to handle the search bar. By default, it is going to format the search term provided as a query to lowercase. The user's name is filtered from the state variable `fullData` while the state variable `data` stores the final results after the search to render the correct user.

```js
handleSearch = text => {
  const formattedQuery = text.toLowerCase();
  const data = filter(this.state.fullData, user => {
    return this.contains(user, formattedQuery);
  });
  this.setState({ data, query: text });
};
```

The `contains` handler method is going to look for the query. It accepts two parameters, the first and last name of the user and the formatted query to lowercase from `handleSearch()`.

```js
contains = ({ name, email }, query) => {
  const { first, last } = name;
  if (first.includes(query) || last.includes(query) || email.includes(query)) {
    return true;
  }
  return false;
};
```

Lastly, add `renderHeader` to render the search bar on the UI.

```js
renderHeader = () => (
  <View
    style={{
      backgroundColor: '#fff',
      padding: 10,
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <Input
      autoCapitalize="none"
      autoCorrect={false}
      onChangeText={this.handleSearch}
      status="info"
      placeholder="Search"
      style={{
        borderRadius: 25,
        borderColor: '#333',
        backgroundColor: '#fff'
      }}
      textStyle={{ color: '#000' }}
    />
  </View>
);
```

That's it to add a search bar to the FlatList component.

## Run the app

To run the app, make sure the `expo start` command is running. Next, go to Expo client and you are going to be prompted by the following screen:

![ss6](https://i.imgur.com/nUcoa0G.png)

Next, try to add a user name from the list being rendered.

![ss7](https://i.imgur.com/KCL5zYz.gif)

## Add clear button to input text field

The last thing I want to emphasize is that using a custom UI component from a UI library such as UI Kitten, you can use general `TextInputProps` from React Native core as well. A few examples are props such as `autoCapitalize`, and `autoCorrect`.

Let us add another prop called `clearButtonMode` that allows the input field to have a clear button appear on the right side. Add the prop to the `Input` inside `renderHeader()`.

```js
<Input
  // rest of the props remain same
  clearButtonMode="always"
/>
```

Now go back to the Expo client and see it in action

![ss8](https://i.imgur.com/fQvxr4j.gif)

## Conclusion

This brings an end to this current tutorial. The screen implemented in this demo is from one of the templates from **Crowdbotics' react-native collection**.

We use UI Kitten for our latest template libraries. Find more about how to create custom screens like this from our open source project [here](https://github.com/crowdbotics/blueprint-react-native-contacts-screen).

You can also find the source code from this tutorial at this [Github repo](https://github.com/amandeepmittal/searchableFlatListDemo).


How to add a Search bar in a FlatList in React Native apps

---
title: 'Nesting Tab and Stack navigators in React Native and Expo apps'
date: '2020-02-26'
slug: 'nested-navigators-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/nesting-tab-and-stack-navigators-in-react-native-and-expo-apps-cc118a141e70'
---

Using [`react-navigation`](https://reactnavigation.org/docs/en/getting-started.html) you can definitely nest different types of navigators. The term nesting navigators mean that rendering one navigator inside a screen of another navigator.

The possible scenarios of nesting navigators are:

- Stack navigator nested inside drawer navigator
- Tab navigator nested inside stack navigator
- Stack navigator nested inside a tab navigator

In this tutorial, let us examine one of the above scenarios by nesting Tab inside a stack navigator. Whether you are following from the previous tutorial on building a stack navigator using a component-based configuration with the latest version of the react-navigation library, or not, here is the source code of the Expo demo app that is going to be leveraged. This demo app, already has a stack navigator running. You can download the source code from the Github rep [here](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-stack-navigator).

## Table of contents

- Install dependencies
- Create a mock screen
- Create a tab navigator
- Adding icon and changing active tint color
- Passing `screenOptions` in a Tab Navigator
- Updating the header title for the nested child navigator
- Conclusion

## Requirements

Requirements for this tutorial is simple. Have the following installed on your local dev environment.

- Node.js version >= `10.x.x` installed
- Have access to one package manager such as npm or yarn
- Latest `expo-cli` version installed or use npx

Do note that, without dwelling much into the configuration of native binaries with the `react-navigation` library, I am going to use a project that is already generated using `expo-cli`. If you wish to start afresh, choose the blank template.

## Install dependencies

Install the following dependency to setup a Tab Navigator. Run the following command from a terminal window.

```shell
yarn add @react-navigation/bottom-tabs
```

This package is going to allow the app to have a simple tab bar appear at the bottom of the screen and switch between different routes. The demo app we are going to build is going to consist of two tabs. We are going to nest the stack navigator inside the first tab and create a mock screen for the second tab.

## Create a mock screen

Even though the current app structure has three different screen components (_open `src/screens` to view them_), let us create another screen component called `Profile` that will act as the second tab. Create a new file called `src/screens/Profile.js` with the following code snippet:

```js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

function Profile(props) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Profile Tab</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ebebeb'
  },
  text: {
    color: '#101010',
    fontSize: 24,
    fontWeight: 'bold'
  }
});

export default Profile;
```

## Create a tab navigator

In this section, let us set up a basic Tab navigator. Start by renaming the file `MainStackNavigator` to `AppNavigator.js` in the directory `src/navigation`.

After the renaming, the routes config file, after other import statements, import the `createBottomTabNavigator` from `@react-navigation/bottom-tabs` as well as the `Profile` screen component.

```js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// add this after other import statements
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from '../screens/Home';
import Detail from '../screens/Detail';
import Settings from '../screens/Settings';
// add this after other import statements
import Profile from '../screens/Profile';
```

Then create an instance of the `createBottomTabNavigator` called `Tab` as below:

```js
// after other instances
const Tab = createBottomTabNavigator();
```

Next, create a function called `MainTabNavigator()`. Using `Tab.Navigator` you can define the structure of the routes and use `Tab.Screen` you can define each of the routes.

Let us define tab routes for now: `Home` and `Profile`.

```js
function MainTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}
```

Now, in the `MainStackNavigator()` instead of passing the `Home` screen, let us pass the `MainTabNavigator`.

```js
<Stack.Screen name="Home" component={MainTabNavigator} />
```

Lastly, to make all of this work, open `App.js` file in the root of the project and modify the statement that imports the `MainStackNavigator` with the correct file name.

```js
import React from 'react';

// make sure this matches the file name of navigator config
import MainStackNavigator from './src/navigation/AppNavigator';

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

Go back to the terminal window, execute `expo start` and open up an Expo client inside a simulator or a real device. You are going to get the following result.

<img src='https://miro.medium.com/max/369/1*_noQNKBA1wUf8EkgNyCsQA.gif' />

## Adding icon and changing active tint color

From the last image, you notice that the active tab is highlighted by a tint color of blue and the non-active tab is of gray. Let us change this tint color.

Open `AppNavigator.js` file at `Tab.Navigator` add a prop called `tabBarOptions`. This prop allows you to customize the tab bar shared between different routes.

Add the following:

```js
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#101010'
  }}
>
  {/* rest remains same */}
</Tab.Navigator>
```

Go to the simulator device, you are going to notice that the active tab bar label has a color of black from the previous blue.

<img src='https://miro.medium.com/max/350/1*y3hy861GwUm_mj1HCvr3Ew.png' />

Let us add some icons to the tab bar. Start by importing the `Ionicons` from `@expo/vector-icons`.

```js
import { Ionicons } from '@expo/vector-icons';
```

Then, in each `Tab.Screen`, add an options prop that is going to have a property of `tabBarIcon`. This function returns the component `Ionicons`. Pass the arguments `color` and `size` you can maintain the active tint color.

```js
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#101010'
  }}
>
  <Tab.Screen
    name="Home"
    component={Home}
    options={{
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-home" color={color} size={size} />
      )
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-person" size={size} color={color} />
      )
    }}
  />
</Tab.Navigator>
```

Here is the output:

<img src='https://miro.medium.com/max/350/1*3G4fINzTR9vNIGQzujkegQ.png' />

You can even change the background of the tab bar by adding a `style` property to `tabBarOptions`.

```js
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#101010',
    style: {
      backgroundColor: '#ffd700'
    }
  }}
>
  {/* rest remains same */}
</Tab.Navigator>
```

Here is the output for the above snippet:

<img src='https://miro.medium.com/max/350/1*Gxk9p_0XQ2z-y-sYHH7Epw.png' />

## Passing screenOptions in a Tab Navigator

The previous section is one way to add icons to each route or screen in the tab bar. There is another way you can do it by passing `screenOptions` in the wrapper `Tab.Navigator`. This prop is used to modify or add common styles to a navigator.

```js
function MainTabNavigator() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#101010',
        style: {
          backgroundColor: '#ffd700'
        }
      }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          let iconName;
          if (route.name == 'Home') {
            iconName = 'ios-home';
          } else if (route.name == 'Profile') {
            iconName = 'ios-person';
          }
          return <Ionicons name={iconName} color={color} size={size} />;
        }
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}
```

There is no change in the functioning of the tab navigator from the previous section, as you can notice below:

<img src='https://miro.medium.com/max/369/1*X06mUqbYfHKYEDdPAVBJjA.gif' />

## Updating the header title for the nested child navigator

Right now the title for each tab screen is going to be the same. This is because the root navigator (which, here is the Stack Navigator) structure is going to look at its immediate children, which are Home, Detail and Settings screen. In the current scenario, if you are to set the title for the `Profile` screen passing the prop `options`, it is not going to work.

This is because the `Profile` screen is a child of the Tab Navigator and not Stack Navigator. The tab navigator is nested inside the Stack navigator and thus, Profile is not the immediate child to Stack Navigator.

For each tab to have its own title (since the tab navigator is nested inside the stack navigator), you have to determine the title for a specific tab screen based on the navigation state from the property `route.state`.

This can be done by defining a helper function called `getHeaderTitle` that has `route` as its parameter. Why pass `route`? Because it contains the `state` property which refers to the child's navigator state and the value of the currently active route name can be obtained from this state.

Add a function called `getHeaderTitle` in `AppNavigator.js` file.

```js
function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'Home';

  switch (routeName) {
    case 'Home':
      return 'Home';
    case 'Profile':
      return 'Profile';
  }
}
```

Then, [as per the recommended way](https://reactnavigation.org/docs/en/screen-options-resolution.html#__docusaurus), add the options prop to the `Stack.Screen` route whose value is `Home`.

```js
<Stack.Screen
  name="Home"
  component={MainTabNavigator}
  options={({ route }) => ({
    headerTitle: getHeaderTitle(route)
  })}
/>
```

Now, when visiting the `Profile` tab, you are going to get the desired title in the header.

<img src='https://miro.medium.com/max/369/1*gCs24QDMEQ_D6DcDxjiALw.gif' />

## Conclusion

_Congratulations! You’ve completed this tutorial._

In this tutorial, we discuss only one scenario of nesting navigators. The main objective here is to get familiar with the component-based configuration of the Tab Navigator in the latest version of the `react-navigation` library.

Here is the link to the complete Tab Navigator API [here](https://reactnavigation.org/docs/en/bottom-tab-navigator.html) I'd recommend you to check.

You can find the complete code for this tutorial at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-tab-navigator).

Originally published at [Heartbeat.fritz.ai](https://heartbeat.fritz.ai/nesting-tab-and-stack-navigators-in-react-native-and-expo-apps-cc118a141e70)


Nesting Tab and Stack navigators in React Native and Expo apps

Getting Started with Stack Navigator using react-navigation 5 in React Native and Expo apps

Getting Started with React Native and Expo using Hooks in 2020

---
title: 'Handle different field types in React Native forms with formik and yup'
date: '2019-10-26'
slug: 'handle-different-field-types-in-react-native-forms'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e'
---

In the [previous post](https://amanhimself.dev/build-validate-forms-with-react-native-formik-yup), you did a lot of things. From creating Login and Signup forms from scratch and using powerful libraries like Formik and yup to validate those forms.

In this tutorial, let us extend our knowledge of building and validating forms by handling different input field types other than strings. You are also going to take a look at my share of the solution on how to gracefully create a Confirm Password field and validate it using the reference of already setup `password` field.

Lastly, there is a small bonus section that will allow you to complete the UI of the form. You are going to add a toggle icon to show or hide the password for the user to re-check.

This tutorial is going to use an already setup source code from [**this Github repo**](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.2.0) release.

After installing the source code, please navigate inside the project directory and install dependencies by running the following command:

```shell
npm install

# or

yarn install
```

## Table of Contents

- Requirements
- Adding Confirm Password Field to Signup Screen
- Handling a CheckBox with Formik and Yup
- Bonus: Hide/Show Password fields
- Conclusion

## Requirements

To follow this tutorial, please make sure you following installed on your local development environment and access to the services mentioned below.

- Nodejs (>= `10.x.x`) with npm/yarn installed
- expo-cli (>= `3.x.x`), (previously known as create-react-native-app)

## Adding Confirm Password Field to Signup Screen

In the [**last post**](LINK HERE), I left you with a challenge to figure out how to add validation for confirm password field in the signup screen using `yup`. If you succeeded, please skip this section and move on the next one. If you are still curious about it, open `Signup.js` file and a new input field for the confirm password as well as a new property with the same name in the `initialValues` object of `Formik` element.

```js
<Formik
  initialValues={{
    name: '',
    email: '',
    password: '',
    // add this
    confirmPassword: ''
  }}
  onSubmit={values => {
    this.handleSubmit(values);
  }}
  validationSchema={validationSchema}
>
  {({
    handleChange,
    values,
    handleSubmit,
    errors,
    isValid,
    touched,
    handleBlur,
    isSubmitting
  }) => (
    <Fragment>
      {/* Rest of the code remains same */}
      <FormInput
        name="password"
        value={values.confirmPassword}
        onChangeText={handleChange('confirmPassword')}
        placeholder="Confirm password"
        secureTextEntry
        iconName="ios-lock"
        iconColor="#2C384A"
        onBlur={handleBlur('confirmPassword')}
      />
      <ErrorMessage
        errorValue={touched.confirmPassword && errors.confirmPassword}
      />
      <View style={styles.buttonContainer}>
        <FormButton
          buttonType="outline"
          onPress={handleSubmit}
          title="SIGNUP"
          buttonColor="#F57C00"
          disabled={!isValid || isSubmitting}
          loading={isSubmitting}
        />
      </View>
    </Fragment>
  )}
</Formik>
```

In the `validationSchema` object add a new property called `confirmPassword` that is going to be a string. Next, use `oneOf` method from Yup's API. Inside its array parameter, it accepts a `Yup.ref()` which creates a reference to another sibling from the `initialValues` object.

```js
const validationSchema = Yup.object().shape({
  name: Yup.string()
    .label('Name')
    .required()
    .min(2, 'Must have at least 2 characters'),
  email: Yup.string()
    .label('Email')
    .email('Enter a valid email')
    .required('Please enter a registered email'),
  password: Yup.string()
    .label('Password')
    .required()
    .min(4, 'Password must have more than 4 characters '),

  // add this
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password')], 'Confirm Password must matched Password')
    .required('Confirm Password is required')
});
```

The `Yup.ref('password')` here refers to the actual `password` field. Let us try to add a different password to both of these fields and see what happens.

I am going to add `pass` to the `password` field (_since it accepts four minimum characters_) and `passo` to the `confirmPassword` field.

![1](https://i.imgur.com/p9CEa5H.gif)

See the error message being displayed when both input fields do not match.

## Handling a CheckBox with Formik and Yup

You can create and validate other field types using Formik and Yup. In this section, you are going to achieve that by creating a checkbox field that is quite common when signing up into new applications where they make you agree to all of their terms and app policies.

Open `Signup.js` file and the following [checkbox element](https://react-native-training.github.io/react-native-elements/docs/checkbox.html#docsNav) from `react-native-elements` library. It is going to contain a boolean value. In the `initialValues` object, please add that.

```js
// import checkbox element
import { Button, CheckBox } from 'react-native-elements'

initialValues={{
  name: '',
  email: '',
  password: '',
  confirmPassword: '',
  // add "check" to initial values
  check: false
}}
```

At the checkbox, there is a prop called `checked` that is required. It holds the current value of the element whether it checked or not. After you have defined the `confirmPassword` input field, please state the following.

```js
<CheckBox
  containerStyle={styles.checkBoxContainer}
  checkedIcon="check-box"
  iconType="material"
  uncheckedIcon="check-box-outline-blank"
  title="Agree to terms and conditions"
  checkedTitle="You agreed to our terms and conditions"
  checked={values.check}
  onPress={() => setFieldValue('check', !values.check)}
/>
```

The required prop `checked` that changes the icon to check or uncheck. By default, it will be marked uncheck. The `uncheckedIcon` prop takes the value of an icon. The `title` prop's value of the checkbox when marked check, changes to the value of `checkedTitle`. These are fair advantages of using a component library like `react-native-elements`.

Using `setFieldValue` from Formik props, you can set the value of the `check` to true or false. It accepts the reference of the key `check` itself as the first parameter. `!values.check` states the opposite of the current value of the key `check`.

Lastly, edit the `validationSchema` by adding the key `check`. It is going to use boolean schema type.

```js
check: Yup.boolean().oneOf([true], 'Please check the agreement');
```

See the below demonstration on how it works.

![2](https://i.imgur.com/pj1wjhS.gif)

## Bonus: Hide/Show Password fields

In this section, you are going to add the ability to hide or show the password on the corresponding field. By the end of this section, the password input field is going to look like this.

<img src='https://cdn-images-1.medium.com/max/800/1*1-32GyAIseC81jkInsRxSg.png' />

To start, open `Login.js` file and import `TouchableOpacity` from `react-native` and `Ionicons` from expo's vector icons library which comes with Expo SDK.

```js
import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
```

Next step is to define an initial state inside the `Login` component. This will help track of the current icon being shown and the visibility of the password.

```js
state = {
  passwordVisibility: true,
  rightIcon: 'ios-eye'
};
```

The define a handler method that will trigger on the `onPress` prop of `TouchableOpacity`. It checks the previous state of the icon and the password's visibility field.

```js
handlePasswordVisibility = () => {
  this.setState(prevState => ({
    rightIcon: prevState.rightIcon === 'ios-eye' ? 'ios-eye-off' : 'ios-eye',
    passwordVisibility: !prevState.passwordVisibility
  }));
};
```

Then go to the password input field and add the prop `rightIcon` from `react-native-elements`, you are going to pass the `TouchableOpacty` for the icon to be touchable and trigger some function (_in this case, handlePasswordVisibility_).

Also, tame the prop `secureEntryText`. It accepts a boolean as its value, and that is what `passwordVisibility` is. If its value is true, which is the initial state, it will secure the password field entry. When clicked on the icon, the visibility is going to change to false, and then the password will be shown.

```js
secureTextEntry={passwordVisibility}
rightIcon={
  <TouchableOpacity onPress={this.handlePasswordVisibility}>
    <Ionicons name={rightIcon} size={28} color='grey' />
  </TouchableOpacity>
}
```

This is the output you are going to get.

<img src='https://cdn-images-1.medium.com/max/800/1*m5e8YiiykjcR2h9-PuqwqA.gif' />

## Conclusion

That's it. This post and the [previous one](https://amanhimself.dev/build-validate-forms-with-react-native-formik-yup) covers enough to get you started and create forms in advance forms in React Native apps using formik and yup.

You can go ahead and add the toggle password visibility to the `Signup` form screen as well. You will find the source code from [**this Github repo**](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.5.0) release.

[Originally published at Heartbeat](https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e)


Handle different field types in React Native forms with formik and yup

---
title: 'How to implement Forgot Password feature in React Native with Firebase'
date: '2019-10-25'
slug: 'implement-forgot-password-firebase-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/implement-forgot-password-firebase-react-native/'
---

> Originally published at [Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/how-to-implement-forgot-password-feature-in-react-native-and-firebase-app-890b572d9759)

In some of the previous posts, you built a React Native app using Firebase as the backend service provider for Email authentication and storing user data upon successful sign-up.

Let's add another common yet useful and necessary feature in the current app structure: **Forgot Password**. This feature will require another screen in the current React Native app. To follow this tutorial, you can go through the previous posts if you are a beginner to the React Native world:

- [How authentication works using react-navigation 4.x.x](https://heartbeat.fritz.ai/how-authentication-flow-works-in-react-native-apps-using-react-navigation-4-x-a30bb4d9e5d6)
- [How to build and validate forms in React Native apps using Formik and Yup](https://heartbeat.fritz.ai/build-and-validate-forms-in-react-native-using-formik-and-yup-6489e2dff6a2)
- [Handle different field types in React Native forms](https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e)
- [Use React Context API to build React Native, Expo and Firebase apps](https://amanhimself.dev/context-api-react-native-firebase)

**Or** you if you are comfortable in understanding React Native code, dive deep in source code or download it from the Github repo release [here](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.6.0).

After downloading the source code, please navigate inside the project directory and install dependencies by running the command `npm install` or `yarn install`.

## Table of Contents

- Requirements
- Add Forgot Password Screen
- Add a method to send a password reset email
- Create a Form
- Handle Password Reset

## Requirements

To follow this tutorial, please make sure you the following libraries are installed on your local development environment and access to the services mentioned below.

- Nodejs (`>= 12.x.x`) with npm/yarn installed
- Expo SDK (`>= 40.x.x`)
- Firebase account, free tier will do

## Add Forgot Password Screen

Let’s start with a basic screen and hook it up with current navigation flow such that an app user will be able to navigate to this new screen from the `Login` screen.

Create a new file `screens/ForgotPassword.js` with some dummy text.

```js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class ForgotPassword extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Forgot Password Screen</Text>
      </View>
    );
  }
}

export default ForgotPassword;
```

Open the `AuthNavigation.js` file and this new class component as below.

```js
import { createStackNavigator } from 'react-navigation-stack';
import Login from '../screens/Login';
import Signup from '../screens/Signup';
import ForgotPassword from '../screens/ForgotPassword';

const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
    Signup: { screen: Signup },
    ForgotPassword: { screen: ForgotPassword }
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none'
  }
);

export default AuthNavigation;
```

Lastly, open `Login.js` file. Logically, this where a button to navigate to this new `ForgotPassword` component should exist. First, add the handler method `goToForgotPassword` inside the `Login` class component with other handler methods.

```js
goToForgotPassword = () => this.props.navigation.navigate('ForgotPassword');
```

Passing the name of the route as the first parameter to `navigation.navigate()` is how you navigate from one screen to the other screen using `react-navigation` library. In this case, the name of the route is going to be `ForgotPassword`.

Next, add the a `Button` component after the `Signup` button. The value of the `onPress` prop of this button is going to be the handler method.

```js
<Button
  title="Forgot Password?"
  onPress={this.goToForgotPassword}
  titleStyle={{
    color: '#039BE5'
  }}
  type="clear"
/>
```

Now, open a simulator or a real device with an Expo client installed and run the command `expo start` from a terminal window. You will be welcomed by the following screen.

![ss1](https://i.imgur.com/U7hRwYl.png)

Clicking on the button `Forgot Password ?` will lead you to the new screen.

![ss2](https://i.imgur.com/UrH4dJY.png)

## Add a method to send a password reset email

The Firebase authentication module provides a method that you can use in React Native apps to send a link to the user's registered email id with the app. Users can click the link to reset the password. Firebase does this on its own. You do not have to write the server code to add this functionality to your app.

To start, open `config/Firebase/firebase.js` file and add the following method. You will use this method inside the `ForgotPassword` component by providing the user's email as input.

```js
passwordReset: email => {
  return firebase.auth().sendPasswordResetEmail(email)
},
```

That's all you need to configure the Firebase app to make sure it sends the email on the registered email id.

To extend this further, you can try and customize the Email template that Firebase uses to send the reset password link [here](https://support.google.com/firebase/answer/7000714).

## Create a Form

Using the previously obtained knowledge of Formik ad yup let us add an input field and a button. The input field will take in the email and the button will be responsible to perform the action of submitting the form. In other words, it will trigger the network to reset the user's email in a handler method.

Open `ForgotPassword.js` file and add the following import statements.

```js
import React, { Component, Fragment } from 'react';
import { Text, SafeAreaView, View, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import ErrorMessage from '../components/ErrorMessage';
import { withFirebaseHOC } from '../config/Firebase';
```

After the import statements, add `validationSchema` object. This object is similar to that used in `Login` component and will help to determine whether the input provided already exists as the registered email or not.

```js
const validationSchema = Yup.object().shape({
  email: Yup.string()
    .label('Email')
    .email('Enter a valid email')
    .required('Please enter a registered email')
});
```

Go the `render` function, and replace its existing content to the form below.

```js
render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Forgot Password?</Text>
        <Formik
          initialValues={{ email: '' }}
          onSubmit={(values, actions) => {
            this.handlePasswordReset(values, actions)
          }}
          validationSchema={validationSchema}>
          {({
            handleChange,
            values,
            handleSubmit,
            errors,
            isValid,
            touched,
            handleBlur,
            isSubmitting
          }) => (
            <Fragment>
              <FormInput
                name='email'
                value={values.email}
                onChangeText={handleChange('email')}
                placeholder='Enter email'
                autoCapitalize='none'
                iconName='ios-mail'
                iconColor='#2C384A'
                onBlur={handleBlur('email')}
              />
              <ErrorMessage errorValue={touched.email && errors.email} />
              <View style={styles.buttonContainer}>
                <FormButton
                  buttonType='outline'
                  onPress={handleSubmit}
                  title='Send Email'
                  buttonColor='#039BE5'
                  disabled={!isValid || isSubmitting}
                />
              </View>
              <ErrorMessage errorValue={errors.general} />
            </Fragment>
          )}
        </Formik>
      </SafeAreaView>
    )
  }
```

In the above code snippet, the elements such as `FormInput`, `FormButton` and `ErrorMessage` are some re-usable custom presentational components that you can find inside `components/` directory. `this.handlePasswordReset(values, actions)` is the handler method that accepts two parameters. You will write the logic behind this method in the next section.

The corresponding styles to the component are:

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 150
  },
  text: {
    color: '#333',
    fontSize: 24,
    marginLeft: 25
  },
  buttonContainer: {
    margin: 25
  }
});
```

Lastly, do not forget to wrap the `ForgotPassword` with the Firebase High Order Component `withFirebaseHOC` to use `passwordReset` method as props.

```js
export default withFirebaseHOC(ForgotPassword);
```

Now go back to the simulator and you will get the following screen.

![ss3](https://i.imgur.com/2ry1EAn.png)

## Handle Password Reset

Inside the `ForgotPassword` component create a new handler method called `handlePasswordReset`. This is going to be an asynchronous function that will accept the user's email as the parameter from the Formik's values.

Also, pass the `actions` from Formik as the second parameter. Instead of just console logging the error values, to display the error on the screen, Formik provides `setFieldError`.

```js
handlePasswordReset = async (values, actions) => {
  const { email } = values;

  try {
    await this.props.firebase.passwordReset(email);
    console.log('Password reset email sent successfully');
    this.props.navigation.navigate('Login');
  } catch (error) {
    actions.setFieldError('general', error.message);
  }
};
```

The above snippet signifies that if the email provided as the input is valid, it will send the request to reset the password. On success, a message on Expo's console will be displayed as shown below.

![ss4](https://i.imgur.com/zDL0Pfg.png)

Also, on success, it will navigate the user back to the login screen. On errors, the code inside the `catch` block will be triggered.

To try it out, register a user with a valid email address such that you can receive an email. On registering a new user, right now, the app will log you in. Sign out from the app which will take you back to the login screen. Next, go the `Forgot Password` screen and enter the valid email.

![ss8](https://i.imgur.com/YwJ191G.png)

You will receive an email like the below. It uses the default Firebase template. To demonstrate, I am using my personal Gmail address.

![ss5](https://i.imgur.com/kmgey8U.png)

Click on the link and it will redirect you to a webpage like below.

![ss6](https://i.imgur.com/vhuApsk.png)

Upon successful password change, it will prompt with the following message to the user.

![ss7](https://i.imgur.com/rLPkUeE.png)

## Conclusion

That's it! It is that simple. With a new password, you can try to login to the app now and it will work. If you have come this far, I am hope enjoyed reading this post. These are some of the strategies I try to follow with any Firebase + React Native projects.

I hope any of the codebase used in this tutorial helps you. To find the complete code, you will have to visit this [Github repo release](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.7.0).

## Further reading

- [Hiring a React Native Developer: What Should You Look For? by Jess Marranco](https://www.g2i.co/blog/hiring-a-react-native-developer)


How to implement Forgot Password feature in React Native with Firebase

---
title: 'Image Classification on React Native with TensorFlow.js and MobileNet'
date: '2019-10-17'
slug: 'tensorflow-image-classification-expo'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/image-classification-on-react-native-with-tensorflow-js-and-mobilenet-48a39185717c'
---

Recently, the alpha version [Tensorflow.js](https://www.tensorflow.org/js/) for React Native and Expo applications was released. It currently provides the capabilities of loading pre-trained models and training. Here is the announcement tweet:

> [Tweet](https://twitter.com/tensorflow/status/1169309153715732480?lang=en)

TensorFlow.js provides many [pre-trained models](https://github.com/tensorflow/tfjs-models) that simplify the time-consuming task of training a machine learning model from scratch. In this tutorial, we are going to explore [Tensorflow.js](https://www.tensorflow.org/js/) and the MobileNet pre-trained model to classify image based on the input image provided in a React Native mobile application.

Here is the link to the complete code in a [Github repo](https://github.com/amandeepmittal/mobilenet-tfjs-expo) for your reference.

## Requirements

- Nodejs >= 10.x.x install on your local dev environment
- `expo-cli`
- Expo Client app for Android or iOS, used for testing the app

## Integrating TFJS in an Expo app

To start and use the Tensorflow library in a React Native application, the initial step is to integrate the platform adapter. The module `tfjs-react-native` is the platform adapter that supports loading all major tfjs models from the web. It also provides GPU support using `expo-gl`.

Open the terminal window, and create a new Expo app by executing the command below.

```shell
expo init mobilenet-tfjs-expo
```

Next, make sure to generate Expo managed app. Then navigate inside the app directory and install the following dependencies.

```shell
yarn add @react-native-community/async-storage
@tensorflow/tfjs @tensorflow/tfjs-react-native
expo-gl @tensorflow-models/mobilenet jpeg-js
```

> _Note:_ If you are looking forward to using `react-native-cli` to generate an app, you can follow the clear instructions to modify `metro.config.js` file and other necessary steps, mentioned [here](https://github.com/tensorflow/tfjs/tree/master/tfjs-react-native).

Even though you are using Expo, it is necessary to install [async-storage](https://github.com/react-native-community/async-storage) as tfjs module depends on that.

## Testing TFJS that it is working

Before we move on, let us test out that the tfjs is getting loaded into the app before the app is rendered. There is an asynchronous function to do so, called `tf.ready()`. Open `App.js` file, import the necessary dependencies, and define an initial state `isTfReady` with a boolean false.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as tf from '@tensorflow/tfjs';
import { fetch } from '@tensorflow/tfjs-react-native';

class App extends React.Component {
  state = {
    isTfReady: false
  };

  async componentDidMount() {
    await tf.ready();
    this.setState({
      isTfReady: true
    });

    //Output in Expo console
    console.log(this.state.isTfReady);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>TFJS ready? {this.state.isTfReady ? <Text>Yes</Text> : ''}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default App;
```

Since the lifecycle method is asynchronous, it will only update the value of `isTfReady` to true when tfjs is actually loaded.

You can see the output in the simulator device as shown below.

<img src='https://miro.medium.com/max/300/1*Qc2DyJWJztezFuQ8JltDlw.png' />

Or in the console, if using the `console` statement as the above snippet.

<img src='https://miro.medium.com/max/319/1*0rmnFTDv6wAHCBdggIk8TA.png' />

## Loading Tensorflow model

Similar to the previous section, you can load the model being used in this app (_mobilenet_) is integrating or not. Loading a tfjs pre-trained model from the web is an expensive network call and will take a good amount of time. Modify the `App.js` file to load the MobileNet model. Start by importing the model.

```js
import * as mobilenet from '@tensorflow-models/mobilenet';
```

Next, add another property to the initial state.

```js
state = {
  isTfReady: false,
  isModelReady: false
};
```

Then, modify the lifecycle method.

```js
async componentDidMount() {
    await tf.ready()
    this.setState({
      isTfReady: true
    })
    this.model = await mobilenet.load()
    this.setState({ isModelReady: true })
}
```

Lastly, the display on the screen when the loading of the model is complete.

```js
<Text>
  Model ready?{' '}
  {this.state.isModelReady ? <Text>Yes</Text> : <Text>Loading Model...</Text>}
</Text>
```

When the model is being loaded, it will display the following message.

<img src='https://miro.medium.com/max/300/1*DIZZk1CMDLwnmq7XUq9TOA.png' />

When the loading of the MobileNet model is complete, you will get the following output.

<img src='https://miro.medium.com/max/300/1*hS5fFnGr4R_5Zuj9nHvtCg.png' />

## Asking user permissions

Now that both the platform adapter and the model are currently integrated with the React Native app, add an asynchronous function to ask for the user's permission to allow access to the camera roll. This is a mandatory step when building iOS applications using the image picker component from Expo.

Before, you proceed, run the following command to install all the packages provided by Expo SDK.

```shell
expo install expo-permissions expo-constants expo-image-picker
```

Next, add the following import statements in the `App.js` file.

```js
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
```

In the `App` class component, add the following method.

```js
getPermissionAsync = async () => {
  if (Constants.platform.ios) {
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!');
    }
  }
};
```

Lastly, call this asynchronous method inside `componentDidMount()`.

```js
async componentDidMount() {
    await tf.ready()
    this.setState({
      isTfReady: true
    })
    this.model = await mobilenet.load()
    this.setState({ isModelReady: true })

    // add this
    this.getPermissionAsync()
  }
```

## Convert a raw image into a Tensor

The application will require the user to upload an image from their phone's camera roll or gallery. You have to add a handler method that is going to load the image and allow the Tensorflow to decode the data from the image. Tensorflow supports JPEG and PNG formats.

In the `App.js` file, start by importing [`jpeg-js` package](https://www.npmjs.com/package/jpeg-js) that will be used to decode the data from the image.

```js
import * as jpeg from 'jpeg-js';
```

It decodes the width, height and the binary data from the image inside the handler method `imageToTensor` that accepts a parameter of the raw image data.

```js
imageToTensor(rawImageData) {
    const TO_UINT8ARRAY = true
    const { width, height, data } = jpeg.decode(rawImageData, TO_UINT8ARRAY)
    // Drop the alpha channel info for mobilenet
    const buffer = new Uint8Array(width * height * 3)
    let offset = 0 // offset into original data
    for (let i = 0; i < buffer.length; i += 3) {
      buffer[i] = data[offset]
      buffer[i + 1] = data[offset + 1]
      buffer[i + 2] = data[offset + 2]

      offset += 4
    }

    return tf.tensor3d(buffer, [height, width, 3])
  }
```

The `TO_UINT8ARRAY` array represents an array of 8-bit unsigned integers. the constructor method `Uint8Array()` is the [new ES2017 syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). There are different types of typed arrays, each having its own byte range in the memory.

## Load and Classify the image

Next, we add another handler method `classifyImage` that will read the raw data from an image and yield results upon classification in the form of `predictions`.

The image is going to be read from a source and the path to that image source has to be saved in the `state` of the app component. Similarly, the results yield by this asynchronous method have to be saved too. Modify the existing state in the `App.js` file for the final time.

```js
state = {
  isTfReady: false,
  isModelReady: false,
  predictions: null,
  image: null
};
```

Next, add the asynchronous method.

```js
classifyImage = async () => {
  try {
    const imageAssetPath = Image.resolveAssetSource(this.state.image);
    const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
    const rawImageData = await response.arrayBuffer();
    const imageTensor = this.imageToTensor(rawImageData);
    const predictions = await this.model.classify(imageTensor);
    this.setState({ predictions });
    console.log(predictions);
  } catch (error) {
    console.log(error);
  }
};
```

The results from the pre-trained model are yield in an array. An example is shown below.

<img src='https://miro.medium.com/max/376/1*MIDSYfqejEkwyLO6SKkY9Q.png' />

## Allow user to pick the image

To select an image from the device's camera roll using the system's UI, you are going to use the asynchronous method `ImagePicker.launchImageLibraryAsync` provided the package `expo-image-picker`. Import the package itself.

```js
import * as Permissions from 'expo-permissions';
```

Next, add a handler method `selectImage` that will be responsible for

- let the image to be selected by the user
- if the image selection process is not canceled, populate the source URI object in the `state.image`
- lastly, invoke `classifyImage()` method to make predictions from the given input

```js
selectImage = async () => {
  try {
    let response = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3]
    });

    if (!response.cancelled) {
      const source = { uri: response.uri };
      this.setState({ image: source });
      this.classifyImage();
    }
  } catch (error) {
    console.log(error);
  }
};
```

The package `expo-image-picker` returns an object. In case the user cancels the process of picking an image, the image picker module will return a single property: `canceled: true`. f successful, the image picker module returns properties such as the `uri` of the image itself. That’s why the `if` statement in the above snippet holds so much significance.

## Run the app

To complete this demonstration app, you need to add a touchable opacity where the user will click to add the image.

Here is the complete snippet of the `render` method in the `App.js` file.

```js
render() {
    const { isTfReady, isModelReady, predictions, image } = this.state

    return (
      <View style={styles.container}>
        <StatusBar barStyle='light-content' />
        <View style={styles.loadingContainer}>
          <Text style={styles.commonTextStyles}>
            TFJS ready? {isTfReady ? <Text>✅</Text> : ''}
          </Text>

          <View style={styles.loadingModelContainer}>
            <Text style={styles.text}>Model ready? </Text>
            {isModelReady ? (
              <Text style={styles.text}>✅</Text>
            ) : (
              <ActivityIndicator size='small' />
            )}
          </View>
        </View>
        <TouchableOpacity
          style={styles.imageWrapper}
          onPress={isModelReady ? this.selectImage : undefined}>
          {image && <Image source={image} style={styles.imageContainer} />}

          {isModelReady && !image && (
            <Text style={styles.transparentText}>Tap to choose image</Text>
          )}
        </TouchableOpacity>
        <View style={styles.predictionWrapper}>
          {isModelReady && image && (
            <Text style={styles.text}>
              Predictions: {predictions ? '' : 'Predicting...'}
            </Text>
          )}
          {isModelReady &&
            predictions &&
            predictions.map(p => this.renderPrediction(p))}
        </View>
        <View style={styles.footer}>
          <Text style={styles.poweredBy}>Powered by:</Text>
          <Image source={require('./assets/tfjs.jpg')} style={styles.tfLogo} />
        </View>
      </View>
    )
  }
}
```

Here is the list of the complete `styles` object.

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#171f24',
    alignItems: 'center'
  },
  loadingContainer: {
    marginTop: 80,
    justifyContent: 'center'
  },
  text: {
    color: '#ffffff',
    fontSize: 16
  },
  loadingModelContainer: {
    flexDirection: 'row',
    marginTop: 10
  },
  imageWrapper: {
    width: 280,
    height: 280,
    padding: 10,
    borderColor: '#cf667f',
    borderWidth: 5,
    borderStyle: 'dashed',
    marginTop: 40,
    marginBottom: 10,
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center'
  },
  imageContainer: {
    width: 250,
    height: 250,
    position: 'absolute',
    top: 10,
    left: 10,
    bottom: 10,
    right: 10
  },
  predictionWrapper: {
    height: 100,
    width: '100%',
    flexDirection: 'column',
    alignItems: 'center'
  },
  transparentText: {
    color: '#ffffff',
    opacity: 0.7
  },
  footer: {
    marginTop: 40
  },
  poweredBy: {
    fontSize: 20,
    color: '#e69e34',
    marginBottom: 6
  },
  tfLogo: {
    width: 125,
    height: 70
  }
});
```

Run the application by executing the `expo start` command from a terminal window. The first thing you’ll notice is that upon bootstrapping the app in the Expo client, it will ask for permissions.

<img src='https://miro.medium.com/max/300/1*yI8SE6c25GMpfSoqgethYg.png' />

Then, once the model is ready, it will display the text **"Tap to choose image"** inside the box. Select an image to see the results.

<img src='https://miro.medium.com/max/358/1*qxXtE5tU7yuuFKVKjQbIFg.gif' />

Predicting results can take some time. Here are the results of the previously selected image.

<img src='https://miro.medium.com/max/300/1*7yGIbTerLleJeSDUN5LW2A.png' />

## Conclusion

I hope this post serves the purpose of giving you a head start in understanding how to implement a TesnorFlow.js model in a React Native app, as well as a better understanding of image classification, a core use case in computer vision-based machine learning.

Since the TF.js for React Native is in alpha at the time of writing this post, we can hope to see many more advanced examples in the future to build real-time applications.
Here are some resources that I find extremely useful.

Here are some resources that I find extremely useful.

- [tfjs-react-native](https://github.com/tensorflow/tfjs/tree/master/tfjs-react-native) Github repo contain more examples using different pre-trained models
- Infinite Red's [NSFW JS and React Native example](https://shift.infinite.red/nsfw-js-for-react-native-a37c9ba45fe9)
- [Introduction to Tensorflow.js](https://medium.com/tensorflow/introducing-tensorflow-js-machine-learning-in-javascript-bf3eab376db)

You can find the complete code at this [Github repo](https://github.com/amandeepmittal/mobilenet-tfjs-expo).

Originally published at [Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/image-classification-on-react-native-with-tensorflow-js-and-mobilenet-48a39185717c)


Image Classification on React Native with TensorFlow.js and MobileNet

Build and validate forms in React Native using Formik and Yup

How to Build an Audio Player in React Native

Build a Not Hotdog clone with React Native

---
title: 'How to build a xylophone app with Audio API, React Native, and Expo'
date: '2019-07-22'
slug: 'how-to-use-emotion-js-with-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/how-to-build-a-xylophone-app-with-audio-api-react-native-and-expo-7d6754a0603c'
---

React Native when used with Expo as a toolchain eases out the common pain to manage ios and android applications. After saying that, I realized that there is a delight to use this ever-growing open source mobile application framework. Expo has gained a lot of credibility as a framework to provide collective solutions to build React Native applications by lowering the time and effort of the developer using it. They are continuing to enhance it from time to time and keeping up with the latest changes in React Native community. That said, Expo SDK33 is a blast.

That being said, let us dive into one of the Expo's API. In this tutorial, you are going to build an application using Expo's Audio API. You are going to develop the following app (_a toy xylophone app_) step-by-step.

<img src='https://miro.medium.com/max/350/1*YE5sb3gX_ValSM48QGT1eQ.png' />

**Table of Contents**

## Requirements

To follow this tutorial, please make sure you have the following installed on your local development environment and have access to the services mentioned below:

- [Nodejs](https://nodejs.org/en/) (>=`8.x.x`) with npm/yarn installed.
- [`expo-cli`](https://docs.expo.io/versions/latest/workflow/expo-cli/) (>= `2.19.4)`, previously known as create-react-native-app.
- [`watchman`](https://facebook.github.io/watchman/) is the file change watcher for React Native projects.

## Getting Started

To create a new Expo project, the only requirement is to have `expo-cli` installed. Then, execute the following command to create a new project directory.

```shell
expo init rn-xylophone-app

# navigate inside the app folder
cd rn-xylophone-app

# install the following dependency
yarn add expo-av
```

Once the project directory is generated, navigate inside it as shown in the above command. Then install the required dependency to add the functionality of playing an Audio file inside the React Native app. The dependency `expo-av` will help you use Audio API and its promise based asynchronous methods to play the audio files. You are going to implement this functionality later.

The last step needed is to have some sound files saved in your `assets` folder. You can, of course, use your audio files but if you want to use the same audio files used in this tutorial, you can download them at the link given below.

[add assets folder download link]

You might have got the idea of what the user interface is going to look while having a glimpse at the demo in the previous section. For each button, you are going to need a different color. Hence, create a new file called `contants/Colors.js` and add the following code.

```js
export const NoteOne = 'red';
export const NoteTwo = 'orange';
export const NoteThree = 'yellow';
export const NoteFour = 'green';
export const NoteFive = '#00FFFF    ';
export const NoteSix = '#000080';
export const NoteSeven = '#B266FF';
```

Require this file and all the Color codes inside `App.js` file after other imports.

```js
// ...after other imports

import {
  NoteOne,
  NoteTwo,
  NoteThree,
  NoteFour,
  NoteFive,
  NoteSix,
  NoteSeven
} from './constants/Colors';
```

The color names are specified to mark each audio file which is named and numbered similarly. To import all the sounds file needed to build the application from the `assets` folder. Add the below object before the `App` component as shown.

```js
const xyloSounds = {
  one: require('./assets/note1.wav'),
  two: require('./assets/note2.wav'),
  three: require('./assets/note3.wav'),
  four: require('./assets/note4.wav'),
  five: require('./assets/note5.wav'),
  six: require('./assets/note6.wav'),
  seven: require('./assets/note7.wav')
};
```

The above object `xyloSounds` consist of the path to each sound file. This will be helpful when you are writing business logic to play these audio files and have to detect which audio file to play for the specific note.

## Building the first UI button

In this section, you are going to create a button using `TouchableOpacity` that is going to play the sound for the note when pressed. To start, make sure in the file `App.js` you have imported the following APIs from the react-native core.

```js
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
```

Then, you have to modify the contents of the `render` function from the default, boilerplate text that any Expo application comes with. This is going to be done by creating a `View` container for each button, which will have a fixed height and margin of value `5` to add some spacing between the buttons.

```js
<View style={styles.container}>
  <View style={styles.buttonContainer}>
    <TouchableOpacity
      style={[styles.button, { backgroundColor: NoteOne }]}
      onPress={() => this.handlePlaySound('one')}
    >
      <Text style={styles.buttonText}>Note 1</Text>
    </TouchableOpacity>
  </View>
</View>
```

Notice that each button will have its background color specified in the file `constants/Colors.js`. This is done by inline styling method. To combine multiple styles in React Native, you can use an array notation like above. The button has one `onPress` method that is going to be responsible for playing the correct sound associated with the note. You will be creating the method `handlePlaySound` in the next section. However, do note that the value `one` being passed to this method is coming from the path you specified earlier for each audio file. Lastly, the button is going to have a text to display the correct audio file number.

The above snippet is followed by the styles that are created using `StyleSheet.create()` method.

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50
  },
  buttonContainer: {
    height: 40,
    margin: 5
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonText: {
    color: '#fff',
    fontSize: 18
  }
});
```

To see the current state of the application in action, go back to the terminal window and run the command `yarn start` or `expo start` if you do not have yarn installed. In the simulator screen, you are going to be welcomed, as shown in the below image.

<img src='https://miro.medium.com/max/350/1*jzwOoqsEJkTUSMMEKCwOPg.png' />

## Adding the Audio functionality

To play a sound in an Expo application, you are required to first the API for the `Audio` from `expo-av`. So at the top of the `App.js` file and after other imports, you can add the following line.

```js
import { Audio } from 'expo-av';
```

Next, you have to add the method `handlePlaySound` inside the `App` function and before the `render()` method. Inside this function, create a new sound object. Whenever you are required to play sound using `expo-av` library, you have to create a new object. This object is going to represent the instance of the class `Audio.sound`.

```js
handlePlaySound = async note => {
  const soundObject = new Audio.Sound();

  try {
    let source = require('./assets/note1.wav');
    await soundObject.loadAsync(source);
    await soundObject
      .playAsync()
      .then(async playbackStatus => {
        setTimeout(() => {
          soundObject.unloadAsync();
        }, playbackStatus.playableDurationMillis);
      })
      .catch(error => {
        console.log(error);
      });
  } catch (error) {
    console.log(error);
  }
};
```

In the above snippet, you can notice that the method `handlePlaySound` is going to accept one parameter. This parameter is going to be the note's number, hence the name of the parameter being passed in the above snippet is called `note`. Inside that, the first line creates the instance of the class `Audio.Sound()`.

Since JavaScript syntax of `async/await` is being used, it is better to create a `try/catch` block such that this Expo app does not give us any error when running the application. Inside this block, the first method `loadAsync` is used to create and load the sound from the source. Hence, the variable `source` defined explicitly is passed and contains the path of the first audio file from the `assets` folder.

To play the sound, `playAsync()` method is used. This method is, however, further extends using a promise that takes one object called `playbackStatus` object. This object uses `playableDurationMillis` to identify the position until the audio file should run from the memory. Once the audio file is played, the `soundObject` calls the method `unloadAsync()` which unloads the media file from memory. This allows the media file to be played again and again. The `setTimeout` function's value depends on the duration of the media file being played from memory.

Go back to the simulator or the device the current app is running and try to press the first button. You will hear the sound of the first note.

## Finishing the App

To complete building the application, you have to read the path of each file from the object `xyloSounds.` Edit the the value of `source` inside the method `handlePlaySound()`.
Also, add the button for each note and do not forget to pass the correct source value inside the `onPress()` method. For your reference, here is the complete code of the file `App.js`.

```js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Audio } from 'expo-av';

import {
  NoteOne,
  NoteTwo,
  NoteThree,
  NoteFour,
  NoteFive,
  NoteSix,
  NoteSeven
} from './constants/Colors';

const xyloSounds = {
  one: require('./assets/note1.wav'),
  two: require('./assets/note2.wav'),
  three: require('./assets/note3.wav'),
  four: require('./assets/note4.wav'),
  five: require('./assets/note5.wav'),
  six: require('./assets/note6.wav'),
  seven: require('./assets/note7.wav')
};

export default function App() {
  handlePlaySound = async note => {
    const soundObject = new Audio.Sound();

    try {
      let source = xyloSounds[note];
      // let source = require('./assets/note1.wav')
      await soundObject.loadAsync(source);
      await soundObject
        .playAsync()
        .then(async playbackStatus => {
          setTimeout(() => {
            soundObject.unloadAsync();
          }, playbackStatus.playableDurationMillis);
        })
        .catch(error => {
          console.log(error);
        });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteOne }]}
          onPress={() => this.handlePlaySound('one')}
        >
          <Text style={styles.buttonText}>Note 1</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteTwo }]}
          onPress={() => this.handlePlaySound('two')}
        >
          <Text style={styles.buttonText}>Note 2</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteThree }]}
          onPress={() => this.handlePlaySound('three')}
        >
          <Text style={styles.buttonText}>Note 3</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteFour }]}
          onPress={() => this.handlePlaySound('four')}
        >
          <Text style={styles.buttonText}>Note 4</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteFive }]}
          onPress={() => this.handlePlaySound('five')}
        >
          <Text style={styles.buttonText}>Note 5</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteSix }]}
          onPress={() => this.handlePlaySound('six')}
        >
          <Text style={styles.buttonText}>Note 6</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteSeven }]}
          onPress={() => this.handlePlaySound('seven')}
        >
          <Text style={styles.buttonText}>Note 7</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50
  },
  buttonContainer: {
    height: 40,
    margin: 5
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonText: {
    color: '#fff',
    fontSize: 18
  }
});
```

Now run the application in the simulator, and you will get the following screen.

<img src='https://miro.medium.com/max/350/1*YE5sb3gX_ValSM48QGT1eQ.png' />

## Conlusion

You have reached the end of this tutorial. I hope you have learned how to integrate the `expo-av` library to use `Audio` class to create functionality in your cross-platform applications and play audio media files. Important things to notice in this demo application is how to use available methods like `loadAsync()`, `unloadAsync()` and leverage the duration of the playing media using the object `playplaybackStatus`.

[Originally published at Heartbeat](https://heartbeat.fritz.ai/how-to-build-a-xylophone-app-with-audio-api-react-native-and-expo-7d6754a0603c)


How to build a xylophone app with Audio API, React Native, and Expo

Building Stylistic UIs with Emotion-JS for React Native

---
title: 'User Authentication with Amplify in a React Native and Expo app'
slug: 'user-authentication-with-amplify-in-a-react-native-and-expo-app'
date: '2019-05-22'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/user-authentication-with-amplify-in-a-react-native-and-expo-app-d00cdaf1ac28'
---

AWS Amplify is a fantastic framework that helps you develop your web or mobile applications quickly. Not only it enhances your current tech stack but actually has many features in-built that you don't have to worry about especially when your app is in the development process.

Features such as:

- authentication
- GraphQL and REST API support
- storage
- S3 uploads
- a way to manage user pool
- hosting
- notifications
- interactions
- analytics
- compatibility to work with AWS Lambda functions

Not only that. Amplify can be integrated with most popular frontend frameworks like React, Vue, Angular, Ionic, React Native or just go vanilla JavaScript if you want to.

In this tutorial, we are going to take a look at one of the most important feature of an application and that is **authentication**. You know the scenarios where you need store some amount of user information (credentials) for them to get back and re-use the application rather creating a new account.

Amplify helps us integrate its authentication component _out of the box_. Do not hate me for saying this. Now, if you have developed an application with a proper authentication flow, you know what pain it gives when it comes to writing that amount of code. With Amplify you will see how easy it is to integrate things like new user's email verification.

Enough with the introduction, let us start. However, if this is your first time reading about Amplify framework and want to learn more about what it is or how to integrate it with a React Native or Expo application, [read my previous post](https://heartbeat.fritz.ai/building-a-react-native-mobile-app-with-aws-amplify-and-expo-fcab6ee0555e).

It will walk you through from basics such as [What is Amplify?](https://heartbeat.fritz.ai/building-a-react-native-mobile-app-with-aws-amplify-and-expo-fcab6ee0555e#a083), [How to create a new AWS IAM user](https://heartbeat.fritz.ai/building-a-react-native-mobile-app-with-aws-amplify-and-expo-fcab6ee0555e#b8c6), and [creating a GraphQL API](https://heartbeat.fritz.ai/building-a-react-native-mobile-app-with-aws-amplify-and-expo-fcab6ee0555e#cfaa) and so on.

### Table of Contents

- Requirements
- Creating a new React Native App
- Create a new AWS IAM user
- Initializing & Integrating Amplify SDK
- Enable Amplify Auth Resource
- `withAuthenticator`: Adding a High Order Component
- Testing the default Amplify auth flow

## Requirements

Here is a complete list of plugins, packages, and services you’re going to need in order to gain something from this tutorial:

- Nodejs `v8.x.x` or higher installed along with npm/yarn
- `watchman`: The file change watcher for React Native projects
- AWS account
- [Amplify CLI](https://aws-amplify.github.io/docs/cli/)
- [Expo CLI](https://www.npmjs.com/package/expo-cli) (_previously known as create-react-native-app_)

_Note:_ To use any Amplify service and to follow the rest of this tutorial, you need an AWS account (which is free). If you don’t have one, please consider signing up for one here for the free tier.

## Creating a new React Native App

To get started, make sure you have already installed [`expo-cli`](https://www.npmjs.com/package/expo-cli). Now, open up a terminal window at a desired directory or location where you keep your demo projects and type the following and then press enter to execute.

```shell
expo init customize-amplify-auth-ui
```

This command will create a new directory called `customize-amplify-auth-ui`. You can name it whatever you want. Inside this directory you will find a complete react native + expo SDK generated.

On running the above command, you will be asked by the CLI to make some choices by prompting some questions. I will be leaving the them default.

Expo CLI is a command line utility to create React Native apps with no build configuration. The reason we are relying on it, is that, first it is awesome tool for such use cases. Next, it will help us build this React Native app/project much faster for any of the mobile platform (_iOS_ or _android_) than a traditional React Native project generated with `react-native-cli`. This will save us time for now but you can go ahead with `react-native-cli` if you want to but remember to run `react native link` when integrating Amplify with React Native app.

## Create a new AWS IAM user

Once you are signed-in to AWS console (_remember_, I told you to create a free AWS account and sign-in. If you haven't done so already, go ahead do it. Otherwise, you might not enjoy and at the same time, be able to follow the rest of the tutorial).

Now, from your terminal window, execute the following command.

```shell
amplify configure
```

This will open up the AWS console dashboard. Go back to terminal and press enter to continue. This will lead you through a bunch of questions in order to configure a user account to use Amplify with the React Native application. Lastly, it will provide you with a **secret** key and an **access** key. Go back to terminal and enter those keys.

Here is a summary of questions prompted by AWS Amplify CLI.

<img src='https://cdn-images-1.medium.com/max/800/1*amSKLCe6467xU_wJ5Kgr0g.png' />

This process is easy, but if you are going through it for the first time, I'd recommend you to give the below link a visit and only in few minutes you will realise how easy it is to setup a new IAM user for AWS services.

https://heartbeat.fritz.ai/building-a-react-native-mobile-app-with-aws-amplify-and-expo-fcab6ee0555e#b8c6

## Initializing & Integrating Amplify SDK

To integrate AWS Amplify with the React Native app run the following command that in return prompts you for some more questions. Later, in this section, we will install dependencies in the React Native app to complete this process.

_Note:_ For a complete step by step process, please refer to [**this link here**](https://heartbeat.fritz.ai/building-a-react-native-mobile-app-with-aws-amplify-and-expo-fcab6ee0555e#d79c). Do not worry, most of these configuration settings are going to be default at the moment. I am only going to walk you through essentials here.

To start, execute the following command. Make sure you are inside your React Native project directory and that too at the root of your project. This is required as this command will add some configuration files.

```shell
amplify init
```

Once you run this command, you will be prompted for the following questions.

<img src='https://cdn-images-1.medium.com/max/800/1*d1aVKZuIFzZN1Mgo86cAfQ.png' />

After the Amplify SDK initialization process is complete, notice there are some new file changes inside the project directory. A new directory `amplify/` which stores any local or cloud changes are made to configuration files. Also, a new file called `aws-exports.js` appears at the root that doesn't require to be committed over your Github account (_always remember_).

Make sure that `.gitignore` file is up to date. Amplify CLI is so good that it will update this file for you and take care of what to commit or not from the configuration part.

This is just the initialization part. We need to integrate amplify SDK now to tell our React Native app that we are going to use Amplify configuration and components in the app. To make this happen, install the following dependencies.

```shell
yarn add aws-amplify aws-amplify-react-native
```

Both of these packages are required. The package `aws-amplify` allows you to make requests to the auth and API services provided by AWS. The other one is framework specific which contains ready-to-use UI components. After these dependencies are installed, open `App.js` file and add the following.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// --- This is the part to add

import Amplify from 'aws-amplify';
import config from './aws-exports';

Amplify.configure(config);

// ---

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>React Native + Amplify = 💛</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

To verify that everything is on order and the app works fine, you can go ahead and run `npm start` command. Then select which mobile platform you want to run. If there no errors, you will get to see the following result.

<img src='https://cdn-images-1.medium.com/max/800/1*3CQuczlaCMHVnFBojLqhVQ.png' />

## Enable Amplify Auth Resource

To include authentication experiences in your React Native app, amplify uses Amazon Cognito that is a fully featured user directory to handle user registration, login, and account recovery. Amplify interfaces with Cognito User Pools to store the user information, including social providers like Facebook, Google and so on.

Amplify gives you the superpower to generate an authentication flow by executing a command from the terminal window.

```shell
amplify add auth
```

On running the above command, you will be prompted with the first question like below.

<img src='https://cdn-images-1.medium.com/max/800/1*br7DyESd83gE1fz2gWV5Lg.png' />

This option is to choose the default authentication and security configuration. The second option to include a social provider like Facebook. Another option to look out for is Manual configuration about which you can read more at the [official amplify docs](https://aws-amplify.github.io/docs/js/react).

<img src='https://cdn-images-1.medium.com/max/800/1*w9im1GzV1CjKGdPpVR-DLg.png' />

Next, it will prompt you to choose the default sign in method. Choose `Username`.

Amplify’s command line interface is so interactive and in detail that it prompts you to provide input fields and select them from your terminal. Look at below.

<img src='https://cdn-images-1.medium.com/max/800/1*IIw8O4dwLrkyGoi9x5Y4iA.png' />

Choose `Email`. Now run the following command to publish all the local changes to the AWS in order to create a user pool.

```shell
amplify push
```

You will get the following screen after you execute the above command.

<img src='https://cdn-images-1.medium.com/max/800/1*14ONUYoXLzlwlVcSKLzWtQ.png' />

This shows the details of the current working environment (_which we manually entered at the time of configuring AWS IAM user_) and displays the status of the resource we are currently using ,that is `Auth`.

Executing this command will take some time to update the resources in order to enable and create a user pool for your React Native app. So go ahead, pause here, drink a cup of coffee. The user authentication setup is complete for now.

## withAuthenticator: Adding a High Order Component

Enough with the configuration part. Let us work with some app code. For React Native apps, the simplest way to add authentication flow into the app is to use `withAuthenticator` [High Order Component](https://reactjs.org/docs/higher-order-components.html).

Open up the file `App.js` and the following.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Amplify from 'aws-amplify';
import config from './aws-exports';

// New ----
import { withAuthenticator } from 'aws-amplify-react-native';

Amplify.configure(config);

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>React Native + Amplify = 💛</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

// New ----
export default withAuthenticator(App, true);
```

This HOC wraps the `App` component. It automatically detects the authentication state and updates to the UI.
`withAuthenticator` component renders the `App` component after a successful user signed in, and it prevents non-sign-in users to interact with your app. The second argument passed in this HOC is a boolean value that tells whether to enable the Sign Out button (once the user is successfully logged-in) or not. You will see this in action later once we have created the user.

By default, on running `npm` start, you will get the Sign In screen like below.

<img src='https://cdn-images-1.medium.com/max/800/1*cNDW73k-43-FiHndSZ8YKw.png)' />

Do notice that right now in the above screen, the Sign In button is disabled since there the input fields are empty. This a too good to for the default flow. If you enter a username followed by a password, it even throws an error like below.

<img src='https://cdn-images-1.medium.com/max/800/1*33BkYtrQA_9NfumRr6ebWA.png' />

By clicking on Sign up button, you will go to the registration screen.

<img src='https://cdn-images-1.medium.com/max/800/1*jw2fK8IJ0xjL1MR4iBK2QA.png' />

On clicking Forgot Password, will take you to another screen where it will ask you for the registered username.

<img src='https://cdn-images-1.medium.com/max/800/1*mccJmsNibLlxIKtJ11USjw.png' />

If the user is signed in, the underlying component (_in current scenario, the `App` component_) is displayed otherwise signin/signup controls are displayed. Also, did you notice that just by adding two lines of code you have authentication flow that looks pretty decent? In the next section, let us see if it works or not.

_Bonus:_ If you love design, UI, UX, or want your apps to look good, at this link you can view the color palettes Amplify uses.

https://aws-amplify.github.io/media/ui_library

## Testing the default Amplify auth flow

Currently, there no user’s registered to our app. So let us register one. Create the button `Sign Up` and enter the details asked. Do note that, enter a valid email address for the AWS cloud service will send you an email to verify your account.

Once you are done, click the `SIGN UP` button at the end of the registration form. You will get the following screen asking for the confirmation/verification code.

<img src='https://cdn-images-1.medium.com/max/800/1*fY2whWIX4Unwhrekjqleiw.png' />

Enter the verification code and click the confirm button. If it is confirmed, you will be directed back to the Sign in screen. Enter the credentials to login inside the app. You will be successfully logged in if you enter the correct credentials.

<img src='https://cdn-images-1.medium.com/max/800/1*8Xa9uKiLOikHO-A786fpJw.png' />

Notice how the sign-out button is appearing at top right corner next to the username. Yes, amplify greets the user and has the code for it integrated already at `withAuthenticator` HOC. Do take note in the above screen that the `App` component is getting rendered now.

## Conclusion

You have now successfully to add an authentication flow with Amplify and use it in a React Native app. Try using the federation or social login flow and gather the similarities or differences between the two.

You can find the complete code for this post in this [Github repository](https://github.com/amandeepmittal/expo-amplify-demo).

[Originally published at Heartbeat](https://heartbeat.fritz.ai/user-authentication-with-amplify-in-a-react-native-and-expo-app-d00cdaf1ac28)


User Authentication with Amplify in a React Native and Expo app

Building a React Native Mobile App with AWS Amplify and Expo

---
title: 'Accessing Geo-location and App Permissions in React Native and Expo'
slug: 'accessing-geo-location-and-app-permissions-in-react-native-and-expo'
date: '2018-09-20'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://medium.com/react-native-training/accessing-geo-location-and-app-permissions-in-react-native-and-expo-e7a1bd4714a2'
---

> [Originally published at React Native Training](https://medium.com/react-native-training/accessing-geo-location-and-app-permissions-in-react-native-and-expo-e7a1bd4714a2)

![cover_image](https://i.imgur.com/jEjHKCI.jpg)

In web, Geolocation is provided as an API that has different methods to use in a web application. Similarly, React Native takes advantage of this API and is available as polyfills. Geolocation is a must have feature to implement in a mobile app. Few of the famous mobile apps that use it for more than 90% in terms of usage are Uber, Google Maps, etc. In this article, I will show how to integrate the Geolocation API in a React Native app in two ways. Using Expo and using `react-native-cli`. Along with that, I am going to implement a real time feature that is commonly used with these types of applications. Asking **user permissions**. Permissions in `react-native-cli` can be a bit tricky but after reading this article, it won't be tricky to you as much.

## Getting Started With Expo

For this purpose, I am using `expo-cli`. Follow the below commands to set up an Expo project and get started.

```shell

npm install -g expo-cli

expo-cli init find-me

# select blank template & traverse into a newly created directory

npm run ios

# for Window users, run

npm run android
```

You will be welcomed with a default screen. We will start here. First, edit the `App.js`.

![ss](https://i.imgur.com/kWvPIWF.png)

Create a new file for the `FindMe` component at `src -> screens -> FindMe -> index.js`. Inside this file, we will just display a text.

![ss](https://i.imgur.com/rRRzQVb.png)

Here is how our app looks so far.

![ss](https://i.imgur.com/9oCTyax.png)

## Accessing Geolocation API

The Geolocation API exists as a global object called `navigator` object in React Native, just like the web. It is accessible via `navigator.geolocation` in our source code and there is no need to import it.

For our demonstration purposes, we will be using `getCurrentPosition` method from the geolocation API. This method allows a mobile app to request a user's location and accepts three parameters: success callback, error callback and a configuration object in the last.

![ss](https://i.imgur.com/oeYTXrk.png)

The first callback has a `position` argument that is an object with the following properties.

```shell
{
  "timestamp": 1533729980953.91
  "coords": {
    "accuracy": 5,
    "altitude": 0,
    "altitudeAccuracy": -1,
    "heading": -1,
    "latitude": 37.785834,
    "longitude": -122.406417,
    "speed": -1
  }
}
```

Now, implement this in our `FindMe` component.

![ss](https://i.imgur.com/totMaU5.png)

We start be importing `TouchableOpcaity`. It is a wrapper that responds accurately to user touches. In a mobile app, you will be making use of them. Think of it as a button in a web application. This newly imported wrapper accepts an `onPress` prop that is going to trigger the function defined as in the value, in our case `findCurrentLocation`.

`findCurrentLocation` holds the logic of fetching a user's location. We are also using the local state to display coordinates from the data provided to us by `position` object. The text `Where Am I` now becomes clickable.

![ss](https://i.imgur.com/Wj58GJo.png)

That’s it for the app part. Now let us see how to add permissions to the same application.

## Using Expo Permissions

Requesting to access a user’s information whether it is location or any other sensitive information on the device, it is your job as the developer to ask for the permissions first. It is one time process, both when developing the application and when the user is using the application. Most permissions are asked when the user installs the application run it for the first time.

For us, Expo has integrated all the permission API we need for this demo app or any other app you are building using Expo. This API has different methods for device types of permissions to grant for. Such as location, camera, audio recording, contacts, camera roll, calendar, reminders (for ios only) and notifications. We are going to use `Location`.

![ss](https://i.imgur.com/e4InNct.png)

We change our state a bit. It will not store the whole geolocation object and `errorMessage` in case of an error. Our `findCurrentLocation` remains the same. In fact, we are not using it. Expo has a method for us that does the same. It is called `getCurrentPositionAsync`. It will only fetch the user's location and other properties made available by `getCurrentPosition` method from Geolocation API and if the permission is granted. In the render method, `onPress` prop is now calling a different method `findCurrentLocationAsync` that holds the logic for asking permission and fetches the location data after the user has granted permission to our app to access it. If not, the error message is set otherwise the location in the state is updated.

The last step is for android users. Open `app.json` and permissions.

![ss](https://i.imgur.com/NvFVYyw.png)
![ss](https://i.imgur.com/gov0n1z.png)

If you press allow, you will see the following result.

![ss](https://i.imgur.com/hEh9YBC.png)

Note that in even in development mode and running the app in a simulator, the permissions are only asked once. To perform this again, you will have to delete the app from your simulator and re-run the command to start the expo app.

## Using react-native-cli

Using `react-native-cli` means you will have to set permissions on your own, however, the logic of getting a user's location is going to be the same.

There are no templates in `react-native-cli` so once the directory is generated, traverse into it and run `npm start` to see if everything is installed correctly. The first thing you will notice when you open this project in an IDE or a code editor is that there is a vast amount of change in the structure of files and folders. Expo had a sort of minimal project structure as compared to this one. There are separate build folders such as `/android` and `/ios` for each platform. You can also use flow (which is similar to TypeScript, open sourced by Facebook).

![ss](https://i.imgur.com/MOyLOFw.png)

We will only modify `App.js` file with the following code.

![ss](https://i.imgur.com/CPryJLE.png)

Observe that `findCoordinates` works the same way as in Expo application and also the code in `render()` function is exactly same. Our next step is to set permissions.

In ios, geolocation is enabled by default when a project is created using `react-native-cli`. To use it, we just need to include a key in `info.plist` which is inside the `ios/findCoordsApp` directory.

![ss](https://i.imgur.com/Iqc2Y2c.png)

For android, we need to add the following line in `android/app/src/AndroidManifest.xml` file.

```xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
```

![ss](https://i.imgur.com/eqkj6TT.png)

Now if you run your application you will see the following screen.

![ss](https://i.imgur.com/528AV75.png)

Click on the text and you will be prompted to ask whether to allow the application to request for user’s location or not. For the demonstration purpose, I am using an android Emulator since we have already seen how it works on ios Simulator in the Expo section.

![ss](https://i.imgur.com/RVPukGJ.png)

If you press allow, you will see the following result.

![ss](https://i.imgur.com/z7MQSko.png)

_You can find the complete code in this Github repository._ 👇

[**amandeepmittal/findCoordsApp**](https://github.com/amandeepmittal/findCoordsApp)

If you want to learn more about working with Geolocation API in a React Native application, please go through the [**official documentation**](https://facebook.github.io/react-native/docs/geolocation)**.**

[**Expo’s Documentation**](https://docs.expo.io/versions/latest/sdk/permissions#__next) has a lot more on **Permissions** too.


Accessing Geo-location and App Permissions in React Native and Expo

---
title: 'Simple Recipe to Build a Theme App in React Native'
date: '2018-09-11'
slug: 'simple-recipe-to-build-a-theme-app-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://medium.com/hackernoon/simple-recipe-to-build-a-theme-app-in-react-native-8e2456f81bc5'
---

Recently, I have been working on a React Native application that demands a changeable theme based on the user selection. I wanted to do this in a simplest way possible. I have so far avoided any React Native UI toolkit such as NativeBase or React Native Elements. In the article below, I am going to share with you all about this simple recipe.

> This is what we are building. By the end of this article you will have a similar looking React Native project.

<img src='https://cdn-images-1.medium.com/max/800/1*NK6OqE6SWsT3ibxXDhkx6g.gif' />

### Requirements

You can either clone the application to see how it works from this Github repo here to see everything working properly. Or you can follow the article step by step. It is up to you. To start, generate a react native app using a generator of your choice. We have to choices:

- `react-native cli`
- expo-cli/CRNA

I will use expo-cli for the demo purposes but you can use CRNA(Create-React-Native-Project) if you want. We need to the following dependencies to be installed in our project before we start.

- redux
- redux-logger(optional, it will be better for you to debug in case anything goes wrong)
- react-navigation
- react-native-vector-icons (only install if you are using react-native-cli)

### Getting Started: Navigation

We need only two screen for the demonstration. I am going to call them `Home.js` and `Theme.js`. Both are right now contain only boilerplate code. It is good for them to be dumb until we connect them using `react-navigation`. Create a new file called `navigation.js` and import both the components.

<img src='https://cdn-images-1.medium.com/max/800/1*hBNBbPck6EmD9Bq9NCAhzA.png' />

`createStackNavigator` is the replacement to `StackNavigator` in `react-navigation` version 2+. Notice that, we are not passing a header to the Home Screen.

### Creating a Store using Redux

Next step is to build a redux store that will make use of an action, action creator and reducer to change theme in our application. In `actions.js` put the following code.

<img src='https://cdn-images-1.medium.com/max/800/1*T86eAgIOjKi5L0xyuqIxCA.png' />

We only have one action and changes the theme color of the app. Now the reducer:

<img src='https://cdn-images-1.medium.com/max/800/1*n6CqWVOCKJw0an8y2UeqkQ.png' />

Notice that we are setting the primary color in the initial state as the hex value. You can also retrieve it from a configuration file or constants file in your application. We are also exporting the `colors.js` file which contains three different hex code values that define different color schemes.

<img src='https://cdn-images-1.medium.com/max/800/1*bKG_BG6i7e7IvwT9p9zm5g.png' />

Lastly, create the store and it to `App.js` for the application components to use it.

<img src='https://cdn-images-1.medium.com/max/800/1*EBI1jplYD7TB4oxkZMlp_A.png' />

Inside `App.js` file we connect our Redux store to manage the state as well as navigation.

<img src='https://cdn-images-1.medium.com/max/800/1*4xA_ue2jr9WWItYKLQzCFA.png' />

You might be wondering why the heck use a Redux Store for such a small application. Well, all I am trying to demonstrate is a pragmatic approach to build a them-able application using React Native and Redux. It is your choice to manage the state.

### Finalizing the App

The last components of our React Native application from where the action happens are `Home.js` and `Theme.js`.

<img src='https://cdn-images-1.medium.com/max/800/1*P08ni2pglIDyhL0h8SIgbg.png' />

By pressing the settings icon, we can navigate to the Themes screen to change background color of the Home screen. We are also passing the title of the Theme Screen here.

The magic of changing the color is happening in `Home.js` at this line:

```js
<View style={[styles.container, { backgroundColor: this.props.primaryColor }]}>
```

We are receiving the `primaryColor` from the props. The `Theme.js` file will be changing the value of this prop on selecting a viable option. Take a look below.

<img src='https://cdn-images-1.medium.com/max/800/1*pqMt7rWFEqGI8H-Ml70rnQ.png' />

In above, `handleThemeChange` handles the dispatching of the only action we defined in `actions.js`. At last, we have our app working.

<img src='https://cdn-images-1.medium.com/max/800/1*NK6OqE6SWsT3ibxXDhkx6g.gif' />

[Originally published at Hackernoon.com](https://medium.com/hackernoon/simple-recipe-to-build-a-theme-app-in-react-native-8e2456f81bc5)


Simple Recipe to Build a Theme App in React Native

---
title: 'How to integrate Redux into your application with React Native and Expo'
date: '2018-08-10'
slug: 'how-to-integrate-redux-into-your-application-with-react-native-and-expo'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://medium.com/free-code-camp/how-to-integrate-redux-into-your-application-with-react-native-and-expo-ec37c9ca6033'
---

![cover](https://i.imgur.com/YqZC6zh.jpg)

Redux is an important part of the React Native ecosystem. If your world revolves around JavaScript, you’ve probably heard about Redux. Before reading the rest of the tutorial and going further, just try to remember that you are only learning about Redux because it will make things easier for you, and not more difficult. Now let us learn why you need Redux in your application.

### Need for Redux

Building a React or React Native application in the real world can become complex if there is not a proper way to handle data. If at any point the data is not managed, things will get out of hand. If you are familiar with React or React Native, you know the default way of handling data is to keep it in a component state and pass it to children components as props.

State and Props are the only two ways to control data in a component. Props is short for **properties.** It is a simple rule to follow in the React world that we should not mutate or change the value of props. In React, the flow of data is unidirectional or one way. That is, the data can always be passed from a parent to a child component. Take a look below at this simple example:

<img src='https://cdn-images-1.medium.com/max/800/1*PXT5wJ4ctcEANSAciWe6Iw.png' />

In the above example, we create two components (Parent and Child) in separate files. The Parent component consists of a view where the Child component is rendered. In the child component, the view renders a text message that is incoming from the props. The incoming message is available as the data in the state of the parent component.

This way, the child component can be reused with other parent components such that each parent component can have its own data to render. Do note that we are not modifying the value of `this.props` at any point.

The state is there to mutate data. This is the only reason that the state exists within each component. Whenever we want to change the state, we use `this.setState()` method within a component. This method re-renders the component and all of its child components to reflect the changes. This works both in React and React Native similarly, but the internals are different.

<img src='https://cdn-images-1.medium.com/max/800/1*YqjKCFCmuMikKf5n8kb_tw.png' />

Since we can manage state and props so efficiently within a React Native app, why is Redux necessary? Well, the above example represents the bare minimum and not a real-time scenario. Imagine an application like Instagram or Twitter. You have different screens, and each screen may depend on a component or two like the Parent and the reusable Child components from our example. It would be hard to keep track of the state of each component.

Redux is one the most widely adopted ways of handling data. It enables the state to be shared as a global attribute that an entire React Native application can use and receive in the form of props. This is known as creating a store in Redux. Redux simplifies the state by moving it into one place.

Redux uses an underlying React Mechanism called context. We are not going to dwell what context is, since it is out of the scope of this article. I just wanted you to know that nothing magical is happening behind the scenes.

Just remember the following terms, since we are going to see them in action in the tutorial below:

- Actions
- Reducers
- Store

The key to learning Redux is practice. I don’t want to share too much information and overwhelm things right now. So let us begin by creating a demo application to learn Redux.

### Building a Pomodoro application

#### Getting Started with Expo-CLI

To build this application, I am going to use the latest tool introduced by the [Expo](https://medium.com/u/df61a4267d7a) team called [expo-cli](https://www.npmjs.com/package/expo-cli). Install it as a global dependency and then initialise a new React Native project using it.

<img src='https://cdn-images-1.medium.com/max/800/1*WVhMAOBzQNl-4RpL0CThLw.png' />

To see if everything is working correctly at this initial state, run the following command.

<img src='https://cdn-images-1.medium.com/max/800/1*qxzbx05hdPWwKy6zQGSS6g.png' />

You will be prompted with the following interface. Take some time to go through it. If you have build applications using Expo XDE or Create-React-Native-App before, you will see that not much has changed, except that now Expo-CLI makes use of the Chrome browser.

<img src='https://cdn-images-1.medium.com/max/800/1*PP7QE6q2zPf_Ge3OPAuYcg.png' />

Choose a simulator or device that can run Expo Client as marked in the above image. If you get the below screen, that means our React Native project has been initialised without any difficulties.

<img src='https://cdn-images-1.medium.com/max/800/1*BXZsSSnTpdxs38_dRcnb5w.png' />

With that, create the following files and folders inside the `components` directory. I will discuss why we are following this directory structure later. For now, our initial setup is complete and we can start building our application.

<img src='https://cdn-images-1.medium.com/max/800/1*xVtf1meIsa4A0frjAsFsIw.png' />

#### Timer Component ⏱

First, we will create a dumb Timer component and connect it with `App.js`. Add the following code to the `Timer/index.js`:

<img src='https://cdn-images-1.medium.com/max/800/1*wQk1JSY-NaEmU1FbZKz29g.png' />

Next, modify the `App.js` file:

<img src='https://cdn-images-1.medium.com/max/800/1*emdQmLUOWJ6yNmZ6ZYTI6w.png' />

<img src='https://cdn-images-1.medium.com/max/800/1*U1Cyur_BU0oqQYQ23oHNyg.png' />

We will now make a static Timer component to see how things fit in. We’ll start by modifying the `StatusBar`. Then we define two `Text` elements from the `react-native` library to specify where the actual timer will be displayed and where the buttons for starting and stopping the timer will be displayed. For now, both are text fields.

<img src='https://cdn-images-1.medium.com/max/800/1*dtR7uZ3PaUrpcksPrVFWHQ.png' />

<img src='https://cdn-images-1.medium.com/max/800/1*C4tNc0e_fqsuVfIu308BDQ.png' />

#### Adding Buttons 🔘

In this section, we are going to replace the section that displays `Start and Stop Buttons!` with actual buttons. We will be using `TouchableOpacity` to make this work. A `TouchableOpacity` component acts as a wrapper for making views respond properly to touches. The opacity of the wrapped view (or the button in our case) gets decreased whenever a user touches it.

We create a reusable component since we need two buttons: Start and Stop.

<img src='https://cdn-images-1.medium.com/max/800/1*tj3HIFtHmaRMJC_XgokHyQ.png' />

This is a stateless component, so it has no class — we only need it to represent the Button in the UI of our app. We also import FontAwesome icons from `@expo/vector-icons`, which is a fork of react-native-vector-icons and comes directly with the expo SDK. No need to install it as a separate dependency. To display an icon, we need to define its `size`.

Lastly, in the above stateless component, we define `propTypes`. I will be discussing how and why we should use PropTypes in a React Native application in another article.

In a mobile app, events are triggered by touch. To handle those events, we are going to use `onPress`. We will have only two events here, Start and Stop. Both the buttons in our app are going to make use of `onPressOut` which differs from `onPress` . The `onPressOut` is called whenever the touch is released by the user (when the user stops pressing the button). It is called before `onPress` and is more accurate in a situation like ours where we need to start or stop the timer by pressing the button as soon as the user is done.

We will now require this `Button` component in our Timer component.

<img src='https://cdn-images-1.medium.com/max/800/1*jy7fxGEmZ6XhFbQVKBsmNw.png' />

<img src='https://cdn-images-1.medium.com/max/800/1*5YaPpg8mP6Nb95LIjifmdw.gif' />

### Integrating Redux 😍

So far, our Timer application does not do anything other than display a bare minimum UI. To make it work, we start by adding some necessary Redux dependencies.

<img src='https://cdn-images-1.medium.com/max/800/1*1wEzBipK4kL89Mt2d84sGQ.png' />

Now, let us start integrating Redux in our app.

#### Actions 🎬

In Redux, the state of the whole application is represented by one JavaScript object. Think of this object as read-only, since we cannot make changes to this state (which is represented in the form of a tree) directly. We need `actions` to do so.

Actions are like events in Redux. They can be triggered in the form of mouse clicks, key presses, timers or network requests. The nature of each event mentioned is mutable. An action is a JavaScript object. To define an action, there is one requirement: each action much have its own type property. We define these types in a file called `types.js`:

<img src='https://cdn-images-1.medium.com/max/800/1*VKHREyQdGAXCvdmVFXfPBw.png' />

Our application needs only three actions so far. The type of any action is a string value and is defined as a constant.

In the file `actions.js`, we will require these types to define action creators. Action Creators are functions that create actions.

<img src='https://cdn-images-1.medium.com/max/800/1*8ZO2qO4_ivFDAcuVkcyw8g.png' />

#### Reducers 🚜

The receiver of the action is known as a reducer. Whenever an action is triggered, the state of the application changes. The handling of the application’s state is done by the reducers.

A reducer is a pure function that calculates the next state based on the initial or previous state. It always produces the same output if the state is unchanged. It takes two inputs, and state and action must return the default state.

<img src='https://cdn-images-1.medium.com/max/800/1*52J8tvpIPftFQvxGjljioQ.png' />

In our initial state, we define three attributes: `isPlaying`, `elapsedTime` and `timerDuration`. The timer currently has a default value of 6 (seconds) for testing purposes, but the actual value we are going to change later is `25` (or 1500 seconds).

Then there are three helper functions:

- `applyStartTimer` will start the timer
- `applyRestartTimer` will stop the timer function and set everything to default
- and lastly, `applyAddSecond` will check if the time passed is less than the total timer's duration. If so, it’ll add one more second to increase its value. If the not, it will return the default state and stop the timer function from running.

After that, we define our reducer function and export the same function. Observe how the reducer function is organised. This is a pattern followed by most community members I have seen on the internet.

[This](https://egghead.io/courses/getting-started-with-redux) is a good resource to get started with Redux in general by [Dan Abramov](https://medium.com/u/a3a8af6addc1) and it is FREE!

#### Creating Redux Store 🏬

With the help of the reducer and the initial state, we can create the store object.

<img src='https://cdn-images-1.medium.com/max/800/1*FcpwQgHpKTaMvM_jjLlhKQ.png' />

A store is an object that brings and actions and reducers together. It provides and holds state at the application level instead of individual components. Redux is not an opinionated library in terms of which framework or library should use it or not.

To bind a React or React Native application with Redux, you do it with `react-redux` module. This is done by using the high ordered component `Provider`. It basically passes the store down to the rest of the application.

We need to bind action creators with our Timer function in order to make it fully functional (so that it responds to the touchable events or the start or restart of the timer). We will do this in the `Timer/index.js` function.

First, we import the required dependencies to bind action creators.

<img src='https://cdn-images-1.medium.com/max/800/1*1amB7kU23eYwjF-a8aGUiQ.png' />

`bindActionCreators` maps action functions to an object using the names of the action functions. These functions automatically dispatch the action to the store when the function is called. To change the data, we need to dispatch an action. To enable this, we need two things: `mapStateToProps` and `mapDispatchToProps`, and we need to connect both of them with our component. This is the boilerplate code that you will be re-writing.

We define these two functions and modify our `export default` statement after we define the styles for our React Native views.

<img src='https://cdn-images-1.medium.com/max/800/1*RobgSa1MMNKK-J4RstCN9w.png' />

`mapStateToProps` is an object that lives in the store whose keys are passed down to the component as props. The below is the complete code for the Timer component.

### Completing The App

<img src='https://cdn-images-1.medium.com/max/800/1*LqWiY370yr3gXMPtiJC9wg.png' />)

I have created a custom function called `formatTime` to display the time in the correct format, but you can make use of any timer library. Next, to increment the value of time, I use the React lifecycle method `componentWillReceiveProps`. I know it is going to deprecated soon, but for now it works. See our mini-app in action below:

<img src='https://cdn-images-1.medium.com/max/800/1*kMPizExeDMG-6MrYNbw8ew.gif' />

For the sake of brevity and this demo, I am using only seconds to display the timer. You can increase the value of the timer by editing the value of constant `TIMER_DURATION` in `reducers.js`.

We have reached the end of the article. Hopefully, you have had as much fun reading it as I did writing it. You can find the complete code for this article at this Github repo:

[**amandeepmittal/rn-pomodoro-example**]https://github.com/amandeepmittal/rn-pomodoro-example)

_Do you remember me telling you about a particular file structure I followed in implementing Redux architecture? Well it is called_ **_re-ducks_** _pattern and you can find more details in this informative article by_ [_Alex Moldovan_](https://medium.com/u/93d08ec35da2)_:_

[**Scaling your Redux App with ducks**](https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be)

[Originally published at freeCodeCamp.org](https://medium.com/free-code-camp/how-to-integrate-redux-into-your-application-with-react-native-and-expo-ec37c9ca6033)


How to integrate Redux into your application with React Native and Expo

---
title: 'Week 3 with React Native - Why use Expo?'
date: '2018-07-26'
slug: 'week-3-with-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://medium.com/hackernoon/week-3-with-react-native-107f6779a831'
---

[Originally published at Hackernoon.com](https://medium.com/hackernoon/week-3-with-react-native-107f6779a831)

This week has been a hectic one for me. Deadline coming closer, and too many tasks to complete. It has been a happening one also. I got the invite to join Gatsbyjs open source team, to help and maintain the on going projects. I love contributing to open source communities and projects.

![](https://i.imgur.com/K7zj9sl.png)

### 👍

This week I took a dive deeper in Expo and React Native. I successfully, implemented Facebook login and access to Firebase database in a RN app using Expo API. Expo is beautiful to work with. It takes care of a lot of native work that otherwise one would be integrating by opening either Xcode or Android Studio. I found these links helpful to go through for providing a Facebook authentication in a React Native app.

- [Expo Facebook](https://docs.expo.io/versions/latest/sdk/facebook#__next)
- For Firebase SDK setup and integration in a React Native app go through [this link](https://docs.expo.io/versions/latest/guides/using-firebase#__next), also provided by Expo API.

One good thing about Expo is that it comes with Create-React-Native-App starter project. Second most important thing I went through this week was integrating and implementing a Redux store in a React Native. To quickly get started, I went through a [Udemy Course by Stefan Hyltoft](https://www.udemy.com/learn-redux-in-react-native-in-less-than-2-hours/) since enrolling was free and seemed to the point. His explanation of concepts is clear but his methodology of working did not appeal me. Any recommendation on how to organize the actions and reducers will be helpful.

### Why Use Expo for React Native?

Expo is popular because it handles a lot of headache tasks itself and provide smooth APIs that work with React Native app outside the box. It is open source and does cost anything to use. To test on a real iOS device you need an Apple developer account (\$99/year). You can accomplish this using Expo for both platforms: iOS and android. Expo provides a client app and by downloading it from the respective stores based on the mobile platform your device runs, you can easily test applications.

Currently, Expo’s SDK handles camera, maps, location tracking, analytics, push notifications and much more. Distributing it an Expo app is easy to. You can complete the process just by running the following command. It has dedicated [store](https://expo.io/) where you can publish apps for others to use. Quite helpful in prototyping.

```shell
exp publish
```

For standalone applications there are command available from the Expo CLI tool that you can use. A standalone app does not need the Expo client to run the application. You can generate IPA or apk files by running:

```shell
exp build:ios

# OR

exp build:android
```

There are shortcomings using Expo. I am not going to list them here but the team behind it seems to works rapidly to implement these new features. You can submit a feature or upvote one using this or get involved as a contributor.

[**Feature Requests - Expo**](https://expo.canny.io/feature-requests)


Week 3 with React Native - Why use Expo?

---
title: 'Week 2 With React Native - Building a Weather App'
slug: 'week-2-with-react-native-building-a-weather-app'
date: '2018-07-16'
thumbnail: '/thumbnails/expo.png'
template: post
tag: 'expo'
canonicalUrl: 'https://medium.com/hackernoon/week-2-with-react-native-building-a-weather-app-ca50fcfcb1e1'
---

> [Originally published at Hackernoon.com](https://medium.com/hackernoon/week-2-with-react-native-building-a-weather-app-ca50fcfcb1e1)

This post was supposed to come out last weekend. I had a busy weekend could not find the time to write it nor had the energy to pull off it. Last week, I announced publicly, [in the first post](https://medium.com/@amanhimself/starting-over-with-react-native-aff0dbdf5909), that I have re-started learning and getting hands on experience using React Native. This post is a continuation to that one.

This week I advanced further in my journey. I completed [Spencer Carli](https://medium.com/u/1ec17560bf99)’s “[How to Setup a new React Native Project](https://learn.handlebarlabs.com/courses/enrolled/253279)”. The course goes through absolute basics of setting up a bare minimum app in which I got to learn things like:

- configuring iOS simulator on MAC
- linting with ESlint
- Prettier: using code formatting tool
- Debugging

Though, I had been already familiar with the process of lint and prettier since I use both of them in my daily workflow. Debugging and other modules are a delight to get familiar with in the start and will give an overall aspect of things such that you do not loose patience with yourself when trying to use them later. Moreover, Spencer is a calm instructor and has soothing voice. I enjoyed his method of teaching.

### eslint-config 🛠

I took the linting process with ESLint a step further. I worked on a small npm module called [eslint-config-amanhimself](https://www.npmjs.com/package/eslint-config-amanhimself) and the advantage of using it is that, now I do not have to setup and configure every other React-Native project I start from scratch. The other advantages of using lint tool if you are familiar with web programming, you do not need an introduction.

I personally, recommend you to use [ESLint](https://eslint.org/) with your projects, not only React Native but any other JavaScript library or framework you choose to work with. It does bring consistency in writing code and save minute errors from occurring at the time of compilation.

[**amandeepmittal/eslint-config-amanhimself**](https://github.com/amandeepmittal/eslint-config-amanhimself)

This tool is completely open source and saves a lot of my time and yours will too, if you decide to use it. At least give it a try. I want you to know that I am open to contributors if we can make this utility better that benefits every one.

### Weather Cards ⛅️

Next thing I worked on was a small application that I built to fetch weather of city using a third party API and display a set of data in the form of a card. This is how it looks like.

![](https://i.imgur.com/XPIOrxO.png)
![](https://i.imgur.com/5rz4eNi.png)

The main elements that I used in building this application are the following:

- Background image (using `ImageBackground`)
- InputText Value
- Fetching Weather Data from the API `[https://www.metaweather.com/api/](https://www.metaweather.com/api/)`
- Card View UI to display Data

Background Image changes accordingly to the type of the weather which is fetched from the API. In this process, I also learned a bit about using React Native’s `Platform` API and how to elevate the card style which is done differently for iOS and android.

Developing for Mobile is different from developing an app for web. In mobile, there are so many different elements to use and take care of. For example, in the below screen notice two things. One is a little cross button to delete the text in one action from the input field (only supported for iOS by RN API, I am sure there might be solution for android but I haven’t tried yet). Next, is the `KeyboardAvoidingView` which automatically re-positions the keyboard (or any other UI element) in the view to show maximum display elements.

![KeyboardAvoidingView Example](https://i.imgur.com/a81AmEV.gif)

In this process, I also learned that creating a custom component is not so hard but publishing it on `npm` for React Native apps is a difficult task. The card view in this application I am using can be found here as a separate component:

[**amandeepmittal/react-native-simple-card**](https://github.com/amandeepmittal/react-native-simple-card)

To setup and build this project I have used _Create-React-Native-App_ which is another wonderful open source tool to quickly kickstart a React Native project.

I had a fun week with React Native. I tried to spend as much time as I could get. _🙏 Thank you for reading this post_.

I also published another article this week on React Native:

[_React Native: How to Setup Your First App_](https://medium.com/@amanhimself/react-native-how-to-setup-your-first-app-a36c450a8a2f)


Week 2 With React Native - Building a Weather App

---
title: 'Starting Over with React Native'
date: '2018-07-07'
slug: 'starting-over-with-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/starting-over-with-react-native/'
---

## Start of 2018 🚀

When 2018 arrived I decided to pick up a new framework called [React.js](https://reactjs.org/) to enhance my skillset and get more work done remotely. A day came when I was in the middle of React development that I got interested in [React Native](https://facebook.github.io/react-native/) which is used to develop cross-platform mobile applications and started playing around it. I wrote some articles on it, worked on a few mini projects, read about APIs in its official docs but then due to the load of work from my clients I had to stop in between for three months. I tried hard to continue to learn in my spare time but managing work along with a personal hobby blog (that is not a hobby anymore, I am professional book critic 😅 and it demands quite some hours in a week) I knew I was going to burn out.

Not to interfere with my day job, I completely stopped reading or doing any React Native stuff. I even deleted my precious Trello board, where I had saved plenty of resources from awesome developers out there who have already mastered the art of React Native and contributing for the community by building courses, writing tutorials, etc.

> Lesson #1: Tech community runs because of these awesome people who spend countless hours in making things as understandable for a newbie or someone with intermediate skillset.

I did not even think twice before deleting it. How foolish of me! 😭

## My Background 👨‍💻

I have been in development for two years now. I am a Computer Science graduate and after a false start in my career, I started coding because I met Node.js while working on a project at that time. I was already familiar with HTML, CSS, and JavaScript before I entered the portal of programming heaven as a full-timer from my graduation days, had built two sites using them. Unfortunately, they do not continue to exist, had I known this at that time, I would have took some screenshots. They were hilarious as compared to modern day UIs. 😆

I went online and studied various resources to understand Node.js and its ecosystem, then came across freeCodeCamp.org curriculum which helped me sharpen my existing skills and expand my knowledge in web development, especially front-end and gave me a direction. Met some awesome people along the way: [Quincy Larson](https://medium.com/u/17756313f41a), [Scott Spence](https://medium.com/u/cf8522762673), [Alexander Kallaway](https://medium.com/u/c852ec9b2c3d) to name some who motivated to continue this path and not alone altogether.

> Worked with them (and still maintaining) some awesome open source campaigns that you can find at freeCodeCamp’s Github! 🚀

## Starting Over📱

There comes a time in life when you are so obsessed with something that there comes a bright light that guides you to the door of your own obsession. Recently, someone wanted to collaborate on a project that needs to build a React Native app. I am not sure if I will get it but this time I have thought hard enough about not giving up like before and I think, whatever happens, I will try to hustle my way through it. Another lesson I have learned over the years that programming has taught me.

> Lesson #2: Be patient and keep on building things (practice)!

Without getting hands-on experience or building things even if they suck, as a coder you are not going to go anywhere. The more you code, the fewer things start to suck if you are open to enhancing your methods and ready to learn. This time I have a blueprint that I am going to follow and will continue to refer it here as I progress ahead in my journey.

> Lesson #3: Learning must never stop.

This is the biggest lesson I have learned in two years of being a professional developer and in general life.

_Why start with it now, you ask?_ I know companies like Udacity and AirBnb have recently announced that they will stop continuing building their own applications using React Native. Both of them did mention that React Native has its own limitations in a detailed manner. Every framework or library does. Nothing is perfect out there and I do not think there ever will be such a thing. These are all creation of mankind and we ourselves are not perfect so how can you expect to build something that is 💯%. These organizations might have a different use case using this framework than a thousand other developers who are still using it. I do not know, neither do I care at this stage.

## Recommended Resources

For a start, I am currently going through [Spencer Carli](https://medium.com/u/1ec17560bf99)’s free courses on React Native. One teaches you [to build an app](https://learn.handlebarlabs.com/p/react-native-basics-build-a-currency-converter) and other teaches you to [organise your react native code](https://learn.handlebarlabs.com/p/how-to-set-up-a-new-react-native-project).

_Thank you reading this post. I know I haven’t shared much about React Native which is the focus of this seres but consider this post as chance to explain my motive behind it. I will try to share as much as about my progress in this series of posts and hopefully they might help you in some way or the other. 🙏_


Starting Over with React Native

---
title: 'React Native - Building a Minimalist Weather App using Expo XDE'
date: '2018-03-27'
slug: 'react-native-building-a-minimalist-weather-app-using-expo-xde'
thumbnail: '/thumbnails/expo.png'
template: post
tag: 'expo'
canonicalUrl: 'https://blog.expo.io/building-a-minimalist-weather-app-with-react-native-and-expo-fe7066e02c09'
---

React Native is a great framework to develop cross-platform mobile applications for the platforms iOS and Android. In this, I am going to take you through the process of building a “minimalist” weather application using React Native by fetching real-time data. If you have never worked with React Native, you can use this walkthrough as kickstart in your journey of becoming a mobile application developer and will be a cool project for your portfolio.

### Getting Started: Requirements

You have some experience of working your way with Reactjs, you will have no problem following this tutorial. If you newbie to JavaScript or Reactjs ecosystem, I want to halt right here and go through [this awesome resource](http://www.react.express/) that can help you with understanding the basic concepts in this tutorial. Don’t spend too much time if you are not interested in building web applications using Reactjs, just go through the nitty-gritty.

Please note that React Native is not a hybrid mobile app framework like others available. It uses a bridge between Javascript and native APIs of a specific platform. Do take a look at [React Native Official Docs](https://facebook.github.io/react-native/docs/getting-started.html) to read more about this.

I will be using [Expo](https://expo.io/) which is described as “the fastest way to build an app”. It is an open-source set of tools and services that come in handy, especially if you are getting started in the React Native world. The development tool I am going to use for Expo is [Expo XDE](https://expo.io/).

**Requirements summary**

- You know how to write JavaScript
- Familiar with React
- Nodejs installed on your local machine
- Simple `npm` commands

That’s all. Let us get started with the development process.

### Getting Started: In real this time

Open the Expo XDE after its installation and click on the “Create New Project”.

<img src='https://cdn-images-1.medium.com/max/800/0*6kAET2qSInCk6rtP.png' />

Enter the name of your application and click on “Create”. The name of the application will be in lowercase, I don’t know why, Expo XDE UI does not support uppercase characters.

<img src='https://cdn-images-1.medium.com/max/800/0*NyV0f0GPNVnTeJHd.png' />
![](https://cdn-images-1.medium.com/max/800/0*JIjaFynv5BRNDAh4.png)

Expo, behind the scenes using React Native Package manager to simulate the application and the load dependencies from the app’s `package.json` file. The benefit of using Expo XDE is that you do not have to open multiple terminal windows and you can test the app while still developing on a real device. Once it is done with the process of generating a source code of our app, we can start it in a simulator on our local machine to see the default app it comes with.

<img src='https://cdn-images-1.medium.com/max/800/0*ft82CkCgUzl2AFoj.png' />

If you are on Mac, make sure, you have Xcode installed. If you are using Windows, please follow the instructions to install Android Studio to run the simulator.

If you want to skip simulating the app and run it on an actual device without generating any `.apk` or `.ipa`, install the Expo client and scan the QR code generated by default by Expo XDE.

<img src='https://cdn-images-1.medium.com/max/800/0*gp1nRwd4sg051Weh.png' />

Once, bundling of the source code is done you will be prompt with a success message on the Expo XDE terminal:

<img src='https://cdn-images-1.medium.com/max/800/0*1pOjz1x6gdMbCuxJ.png' />

And you will be able to see that our default app is running on the device:

<img src='https://cdn-images-1.medium.com/max/800/0*vvy0yzLxdw5BHhIy.png' />

<img src='https://cdn-images-1.medium.com/max/800/0*VQREoYLkE45Iw2Ku.png' />

The message displayed here is the same code that is rendered by `App.js` in the root of our app.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Minimalist Weather App</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

Change the `<Text>` to:

```js
<Text>Minimalist Weather App</Text>
```

and you will see the output being rendered and the app is reloaded live. You don’t have to refresh it to see the changes.

<img src='https://cdn-images-1.medium.com/max/800/0*HGCr4kSfTugsZq9-.png' />

This completes our first getting started step. In the next step, we will build a static prototype of what our app is going to look like.

### The Prototype

In this step, we will be developing our first screen, that is going to be loading screen.

In your `App.js`, define a local state:

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  state = {
    isLoading: false
  };

  render() {
    const { isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? null : (
          <View>
            <Text>Minimalist Weather App</Text>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

The above code states that when our local state object `isLoading` is false, we will show the name of the application. This is what we are going to render. Later on, instead of displaying the name of application we will be showing the weather here once our API has successfully fetches the data. For now, I am sticking to this message because first, we are going to work on, what if our app is in the state of loading? Let's add a text message to indicate that the app is fetching the data.

```js
import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';

export default class App extends React.Component {
  state = {
    isLoading: true
  };

  render() {
    const { isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? (
          <Text>Fetching The Weather</Text>
        ) : (
          <View>
            <Text>Minimalist Weather App</Text>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

When our app is done loading the data from the API, we will set the state of `isLoading` to false.

<img src='https://cdn-images-1.medium.com/max/800/0*1ii9x6Eoi02W3d6h.png' />

### First Screen

We will define a new Weather component at `./components/Weather.js`. The boilerplate code for every weather condition screen is going to be the same. It will be divided into two views, a header, and a body. The header will show the weather condition icon and temperature and the body will display the text associated with the weather condition.

In Weather.js, we will start by defining two containers inside the main container: `headerContainer` and `bodyContainer`. Do note that we are defining `Weather` component not as a class but a function in order to receive props and since it will not be managing a state.

```js
import React from 'react';
import { View, Text, Stylesheet } from 'react-native';

const Weather = () => {
  return (
    <View style={styles.container}>
      <View style={styles.headerContainer} />
      <View style={styles.bodyContainer} />
    </View>
  );
};

const styles = StyleSheet({
  container: {
    flex: 1
  },
  headerContainer: {},
  bodyContainer: {}
});

export default Weather;
```

We will be using `MatericalCommunityIcons` that comes with expo (one of the perks) as a sub-library of a humongous library called `vector-icons`.

```js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const Weather = () => {
  return (
    <View style={styles.weatherContainer}>
      <View style={styles.headerContainer}>
        <MaterialCommunityIcons size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}>Temperature˚</Text>
      </View>
      <View style={styles.bodyContainer}>
        <Text style={styles.title}>So Sunny</Text>
        <Text style={styles.subtitle}>It hurts my eyes!</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  weatherContainer: {
    flex: 1,
    backgroundColor: '#f7b733'
  },
  headerContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tempText: {
    fontSize: 48,
    color: '#fff'
  },
  bodyContainer: {
    flex: 2,
    alignItems: 'flex-start',
    justifyContent: 'flex-end',
    paddingLeft: 25,
    marginBottom: 40
  },
  title: {
    fontSize: 48,
    color: '#fff'
  },
  subtitle: {
    fontSize: 24,
    color: '#fff'
  }
});

export default Weather;
```

This how our app looks after the prototypal stage is complete.

<img src='https://cdn-images-1.medium.com/max/800/0*cpkJvjx_VETikRV5.png' />

### Fetching The Data

To fetch real-time weather data I found [Open Weather Map API](https://openweathermap.org/) to be highly useful and consistent. To communicate with the API you are going to need an API key. Register yourself as a user on the site, and get your API key. Please note that it takes at least 10 minutes for Open Weather API to activate the API key. Once it is available, tag along.

Go to the [API section](https://openweathermap.org/api) and you will see that our need is satisfied by the Current Weather data. I am going to store my API key in `./utils/WeatherAPIKey.js` file. I know not the best name for a file.

```js
export const API_KEY = 'YOUR_API_KEY HERE';
```

The way the Open Weather API works is that we need to provide it coordinates using device’s location in terms of longitude and latitude. It will then fetch the data from its server which will be a JSON object. From the server, right now we need two things, the temperature, and the weather condition. We should have temperature and the weather condition stored in our local state in `App.js`.

```js
import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';

import { API_KEY } from './utils/WeatherAPIKey';

import Weather from './components/Weather';

export default class App extends React.Component {
  state = {
    isLoading: false,
    temperature: 0,
    weatherCondition: null,
    error: null
  };

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.fetchWeather(position.coords.latitude, position.coords.longitude);
      },
      error => {
        this.setState({
          error: 'Error Getting Weather Conditions'
        });
      }
    );
  }

  fetchWeather(lat = 25, lon = 25) {
    fetch(
      `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=${API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(json => {
        console.log(json);
      });
  }

  render() {
    const { isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? <Text>Fetching The Weather</Text> : <Weather />}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});
```

We start by importing the API key we just defined and then updating our state with `temperature`, `weatherCondition`, and `error`. We are using `componentDidMount()` a lifecycle method which helps us re-render once our API is done fetching the data. It will also help us in updating the state. We are also using JavaScript `navigator` API to get the current location. This is where a JavaScript API will communicate with a native one using a bridge. We pass on the values of latitude and longitude to our custom function `fetchWeather` where the API of Open Weather Map is called.

The result we get is in JSON format, and if you console log it, you will be able to see the result as a JSON object in Expo terminal where there are a lot of values. We only need the value of temperature and the weather condition. We then update local state with the new values obtained. `&units=metric` at the end of our API call converts the temperature from Kelvin to Celsius.

```js
.then(json => {
        // console.log(json);
        this.setState({
          temperature: json.main.temp,
          weatherCondition: json.weather[0].main,
          isLoading: false
        });
```

Now, all we have to do is pass the value two of our local state as props to the `Weather` Component and then update it such that it can receive those props.

First, in `App.js`:

```js
<Weather weather={weatherCondition} temperature={temperature} />
```

Update the `Weather.js`:

```js
const Weather = ({ weather, temperature }) => {
  return (
    <View style={styles.weatherContainer}>
      <View style={styles.headerContainer}>
        <MaterialCommunityIcons size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}>{temperature}˚</Text>
      </View>
      <View style={styles.bodyContainer}>
        <Text style={styles.title}>{weather}</Text>
        <Text style={styles.subtitle}>It hurts my eyes!</Text>
      </View>
    </View>
  );
};
```

<img src='https://cdn-images-1.medium.com/max/800/0*IUfQ_1hTKAa-U0m4.png' />

Since we have done the hard part of fetching the real-time data, we must make `Weather` component behave [dynamically to the values](https://openweathermap.org/weather-conditions) it is getting. All this dynamic part is going to be associated with one thing which we are getting from our local state, `weatherCondition`.

### Dynamic Behaviour

Using `weatherCondition` we can define the background changes, title, subtitle and weather icon changes. Let's start by pre-defining weather conditions in a file `./utils/WeatherConditions.js`.

```js
export const weatherConditions = {
  Rain: {
    color: '#005BEA',
    title: 'Raining',
    subtitle: 'Get a cup of coffee',
    icon: 'weather-rainy'
  },
  Clear: {
    color: '#f7b733',
    title: 'So Sunny',
    subtitle: 'It is hurting my eyes',
    icon: 'weather-sunny'
  },
  Thunderstorm: {
    color: '#616161',
    title: 'A Storm is coming',
    subtitle: 'Because Gods are angry',
    icon: 'weather-lightning'
  },
  Clouds: {
    color: '#1F1C2C',
    title: 'Clouds',
    subtitle: 'Everywhere',
    icon: 'weather-cloudy'
  },

  Snow: {
    color: '#00d2ff',
    title: 'Snow',
    subtitle: 'Get out and build a snowman for me',
    icon: 'weather-snowy'
  },
  Drizzle: {
    color: '#076585',
    title: 'Drizzle',
    subtitle: 'Partially raining...',
    icon: 'weather-hail'
  },
  Haze: {
    color: '#66A6FF',
    title: 'Haze',
    subtitle: 'Another name for Partial Raining',
    icon: 'weather-hail'
  },
  Mist: {
    color: '#3CD3AD',
    title: 'Mist',
    subtitle: "Don't roam in forests!",
    icon: 'weather-fog'
  }
};
```

These weather conditions are provided from Open Weather API [here](https://openweathermap.org/weather-conditions). Then, let’s import this file in our `Weather.js`. We will also define PropTypes now for the two props we are receiving from `App.js`. Take a look below, it is simple.

```js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import PropTypes from 'prop-types';
import { weatherConditions } from '../utils/WeatherConditions';

const Weather = ({ weather, temperature }) => {
  return (
    <View
      style={[
        styles.weatherContainer,
        { backgroundColor: weatherConditions[weather].color }
      ]}
    >
      <View style={styles.headerContainer}>
        <MaterialCommunityIcons
          size={72}
          name={weatherConditions[weather].icon}
          color={'#fff'}
        />
        <Text style={styles.tempText}>{temperature}˚</Text>
      </View>
      <View style={styles.bodyContainer}>
        <Text style={styles.title}>{weatherConditions[weather].title}</Text>
        <Text style={styles.subtitle}>
          {weatherConditions[weather].subtitle}
        </Text>
      </View>
    </View>
  );
};

Weather.propTypes = {
  temperature: PropTypes.number.isRequired,
  weather: PropTypes.string
};

const styles = StyleSheet.create({
  weatherContainer: {
    flex: 1
  },
  headerContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around'
  },
  tempText: {
    fontSize: 72,
    color: '#fff'
  },
  bodyContainer: {
    flex: 2,
    alignItems: 'flex-start',
    justifyContent: 'flex-end',
    paddingLeft: 25,
    marginBottom: 40
  },
  title: {
    fontSize: 60,
    color: '#fff'
  },
  subtitle: {
    fontSize: 24,
    color: '#fff'
  }
});

export default Weather;
```

Most of the source code is same. We are now just making some additions by using available props with weather conditions and to dynamically change the background, icon, weather name, and the subtitle. You can play around with the styling to make it look more minimalistic or more exquisite, it is up to you.

<img src='https://cdn-images-1.medium.com/max/600/0*xjM1JAPtNLWtzvau.gif' />

**Note:** Before running the application on your actual device make sure you have internet access and location “on” the device for this app to work. We haven’t talked about App Permissions in this article and it is a bit out of the scope too.

The whole code for this application is available at this [Github Repo](https://github.com/amandeepmittal/rn-minimalist-weather-app). I have also published the application on [Expo Store here](https://expo.io/@amanhimself/rn-minimalist-weather-app) for you to test out. Just scan the QR code and run the application to see what you will be working in this tutorial.

[Originally this article was published on Blog.expo.io](https://blog.expo.io/building-a-minimalist-weather-app-with-react-native-and-expo-fe7066e02c09)


React Native - Building a Minimalist Weather App using Expo XDE

---
title: 'React Native - Getting Started with Lottie and Expo'
date: '2018-03-09'
slug: 'react-native-getting-started-with-lottie-and-expo'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://medium.com/hackernoon/react-native-getting-started-with-lottie-and-expo-8b2105fbb496'
---

In this tutorial, we will be using [Lottie](https://www.lottiefiles.com/) with React Native. Lottie is an opensource library that renders Adobe Effects by providing easy to use animations just like static images. These animations are beautiful. Lottie is a mobile library developed by AirBnB. These animations are exported as JSON files using [Bodymovin](https://github.com/airbnb/lottie-web) to render the natively on mobile and in web applications.

> _👍 for designers who spend their time contributing in LottieFiles._

### Requirements

I will be using Expo XDE for brevity and to get started quickly. Create a new project using it. I am going to call `rn-lottie-example` but you can call whatever you want.

<img src='https://cdn-images-1.medium.com/max/800/0*POyT_Icv07TuPXTE.png' />

When the XDE completes running ReactNative Package Manager and builds up the project, you can go to `Device` dropdown menu at the right and click on whichever simulator you have installed depending on the operations system you are using. Windows users please make sure you have android studio and necessary files installed and MacOS users, please have XCode installed or up to date.

<img src='https://cdn-images-1.medium.com/max/800/0*fX2Q-CxR1HRTvJA-.png' />

You can also view the application, by running it using Expo Client on your mobile device. Note that, depending on your internet connection, this can be slow and your mobile device and development machine must be on same wifi. Scan the QR code in `Share` section, you are ready to go. Once, the app is rendered, you will be welcomed by the default screen:

<img src='https://cdn-images-1.medium.com/max/800/0*MiGY3Fi2WDSbBXvP.png' />

Now open your favorite text editor/IDE because we are going to start writing code in next section.

### Getting Started

Installing Lottie as a dependency in a project can a bit tricky but fortunately, Expo provides support for it. We do not have to install anything since we are using Expo. We directly import the dependency in our `App.js`:

```js
import { DangerZone } from 'expo';
const { Lottie } = DangerZone;
```

Sine Lottie in Expo project is in Alpha mode, do not get worried by the word `DangerZone`.

Include a local state in our application called `animation`. We will call this help in playing and restarting the animation itself. I am using [this file](https://www.lottiefiles.com/110-location) for our animation from [LottieFiles.com](https://gist.github.com/www.lottiefiles.com) so you can download it. Of course, you are free to choose any other. Animations listed on the site are open source.

```js
state = {
  animation: null
};
```

Later, we will using the `state.animation` to source the animation file fetched directly in `Lottie` component.

### Defining the animation

We will define two custom functions: `_playAnimation` and `_loadAnimationAsync` that perform the animation and load the animation from the internet using the `fetch` API. We will also be pre-mounting our animation using `componentWillMount()` method available to us by core React. In this Life cycle method, when the state is set, it can be called before the initial render.

In general, it is used to prepare either the first render or update the state before the render. This is why we are using it. We need to update the state we defined.

```js
componentWillMount() {
    this._playAnimation();
  }

  _playAnimation = () => {
    if (!this.state.animation) {
      this._loadAnimationAsync();
    } else {
      this.animation.reset();
      this.animation.play();
    }
  };

  _loadAnimationAsync = async () => {
    let result = await fetch(
      'https://www.lottiefiles.com/storage/datafiles/a795e9d1bd5672fd901329d51661db5c/JSON/location.json'
    );

     this.setState(
      { animation: JSON.parse(result._bodyText) },
      this._playAnimation
    );
  };
```

Inside, `_loadAnimationAsync()` we use JavaScript's `fetch` API to get the animation from its source. This does mean, that the animation is coming from internet so if you are testing on your mobile device, make sure you have access to internet.

This how our render function looks like:

```js
render() {
    return (
      <View style={styles.container}>
        <View style={styles.animationContainer}>
          {this.state.animation && (
            <Lottie
              ref={animation => {
                this.animation = animation;
              }}
              style={styles.loadingAnimation}
              source={this.state.animation}
            />
          )}
        </View>
      </View>
    );
  }
```

We separately define styling for the overall container and the animation. To load the animation, we will set its `backgroundColor` to `transparent` in order to remove any background color it has by default.

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  animationContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  },
  loadingAnimation: {
    width: 400,
    height: 400,
    backgroundColor: 'transparent'
  }
});
```

You can see the application working

<img src='https://cdn-images-1.medium.com/max/800/0*ojXTyWvdJ70ut1Yl.gif' />

This tutorial shows how you can get started with Lottie animation library using React Native and Expo. There are other ways to define animations and you can go in-depth as much as you want. This article is written for a beginner’s point of view.

For alternative to Lottie, you can check [Facebook’s Keyframes](https://github.com/facebookincubator/Keyframes) that also uses Adobe After Effects to create one.

Complete code of our demo application:

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DangerZone } from 'expo';
const { Lottie } = DangerZone;

export default class App extends React.Component {
  state = {
    animation: null
  };

  componentWillMount() {
    this._playAnimation();
  }

  _playAnimation = () => {
    if (!this.state.animation) {
      this._loadAnimationAsync();
    } else {
      this.animation.reset();
      this.animation.play();
    }
  };

  _loadAnimationAsync = async () => {
    let result = await fetch(
      'https://www.lottiefiles.com/storage/datafiles/a795e9d1bd5672fd901329d51661db5c/JSON/location.json'
    );

    this.setState(
      { animation: JSON.parse(result._bodyText) },
      this._playAnimation
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.animationContainer}>
          {this.state.animation && (
            <Lottie
              ref={animation => {
                this.animation = animation;
              }}
              style={styles.loadingAnimation}
              source={this.state.animation}
            />
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  animationContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  },
  loadingAnimation: {
    width: 400,
    height: 400,
    backgroundColor: 'transparent'
  }
});
```

You can also find the complete code at this [**Github repo**](https://github.com/amandeepmittal/rn-lottie-example)**,** in case you just want to play around this concept.

_[Originally this article was published on Hackernoon.com](https://medium.com/hackernoon/react-native-getting-started-with-lottie-and-expo-8b2105fbb496)_


🔥 38 Posts filtered by tag "expo"