React Native Examples

👉 Learn about React Native and Expo at amanhimself.dev.

📮 Or join more than 1300+ Developers to get latest updates on my blog posts and side projects. Subscribe the newsletter here.

This repository contains most of the examples I've used in blog posts on React Native and Expo. The blog posts are hosted mostly at amanhimself.dev and elsewhere.

You may find some of the examples being outdated in time, in terms of framework updates or libraries. Don't worry the concept would be the same.

Here is a list of notable examples and the blog post they are related [if possible].

useInfiniteQuery hook from React Query and FlatList

• 🐙 Repo
• 📝 Blog post

This example uses:

• Expo SDK 44
• create-react-native-app
• NativeBase v3
• React Query

Show/Hide Password Visibility Custom Hook

• 🐙 Repo
• 📝 Blog post

This example uses:

• Expo SDK 44

Safe Area Context in React Native and Expo apps

• 🐙 Repo
• 📝 Blog post

This example uses:

• Expo SDK 44
• react-native-safe-area-context

Add splash screen and app icon

• 🐙 Repo
• 📝 Blog post

This example uses:

• React Native version 0.65.1
• React Navigation v6
• react-native-bootsplash

Multi-language Support Example

Learn how to add multi-language support to a React Native app using i18next.

• 🐙 Repo
• 📝 Blog post

This example uses:

• React Native version 0.64.1
• React Navigation v6
• react-native-localize
• i18next
• react-i18next
• @react-native-async-storage/async-storage

Expo Firebase Auth Example

Learn how to integrate Firebase Auth service using Firebase JS SDK and Expo SDK (by generating a managed workflow app).

• 🐙 Repo
• 📝 Blog post

This example uses:

• Expo SDK version 41.x.x
• Firebase JS SDK
• React Navigation version 5.x.x
• Managing Environment Variables with app.config.json

Create a custom Image Gallery Preview

Learn how to sync thumbnail using FlatList with Carousel from react-native-snap-carousel.

• 🐙 Repo
• 📝 Blog post

This example uses:

• React Native version 0.63.4
• The scrollToOffset method on FlatList
• react-native-snap-carousel
• Images from Unsplash

Convert Reverse Geocode into Postal Address

Fetch user's current location and then convert into actual postal address.

• 🐙 Repo
• 📝 Blog post

This example uses:

• expo-cli
• React Navigation Stack v5
• expo-location
• Icon from Flaticon.com

Create a Translucent Bottom Tab Bar

• 🐙 Repo
• 📝 Blog post

This example uses:

• react-native-cli
• React Navigation Bottom Tabs v5
• BlurView effect
• Images from Unsplash

Shared Element transitions

• 🐙 Repo
• 📝 Blog post

This example uses:

• Expo SDK 40
• React Navigation v5
• react-navigation-shared-element
• react-native-shared-element
• Images from Unsplash
• Delayed loading example using react-native-animatable

Custom Scroll bar indicator in ScrollView

• 🐙 Repo
• 📝 Blog post
• Description: The implementation of a scroll bar indicator is not directly customizable on cross-platforms in React Native. If you are building an app whose screen design depends on displaying a customized scroll bar indicator, then let's build one in this tutorial. This example uses:
  • Expo SDK 40
  • Animated.multiply() from React Native API
  • onScroll prop on ScrollView
  • Example API data from Draftbit's Example Data Service.

Redux Persist

• 🐙 Repo
• 📝 Blog post
• Description: How to configure, integrate and use redux-persist library in a React Native & Expo app and dynamically change the UI based on the state updates. This example uses:
  • Expo SDK 40
  • react-navigation v5 (bottom-tabs)
  • redux, react-redux (with hooks), redux-thunk, redux-persist
  • Example API data from Draftbit's Example Data Service.

Forms with Formik

• 🐙 Repo
• 📝 Blog post
• Description: In this post, let's take a look at how to integrate Formik along with Yup in a React Native app to create forms and validate them. We are also going to cover how to change the focus of one input field to another using a device's keyboard by forwarding the ref created using a useRef hook.

Animated Header View on a Scroll with React Native Animated API

• 🐙 Repo
• 📝 Blog post
• Description: 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. This example uses:
  • Expo SDK 38
  • React Native Animated API

Chat app with Expo + Firebase + Firestore + react-native-gifted-chat + react-native-paper + react-navigation v5

• 🐙 Repo
• 👉 Blog post series: Part1 | Part2 | Part3 | Part4 | Part5 | Part6

Create onBoarding screens with react-native-viewpager

• 🐙 Repo
• 📝 Blog post
• Description: In this tutorial, we’ll look at one of the ways to create onboarding screens in a React Native app. We are going to use a React Native community package, called react-native-viewpager, that allows us to swipe left or right between different pages where each page has some data to display.

Remove Tab bar Border Width

• 🐙 Repo
• 📝 Blog post

This example uses:

• Expo SDK 40
• React Navigation v5

Create Custom Custom Wavy Headers with react-native-svg

• 🐙 Repo
• 👉 Expo Client
• 📝 Blog post

Using Styled Components in React Native and Expo

• 🐙 Repo
• 📝 Blog post

Using react-native-image-picker

• 🐙 Repo
• 📝 Blog post

Handle Navigation in WebViews

• 🐙 Repo
• 📝 Blog post

Getting Started with react-navigation v5

• 🐙 Repo
• 📝 Blog post

Nesting Tab and Stack Navigation Patterns in react-navigation v5

• 🐙 Repo
• 📝 Blog post

Getting Started with Expo and React Native with Hooks & Redux (Hooks!)

• 🐙 Repo
• 👉 Blog post series: Part 1 | Part 2

Create a custom hook to status bar styles with useFocusEffect & react-navigation v5

• 🐙 Repo
• 👉 Blog post series