All Projects โ†’ amandeepmittal โ†’ React Native Examples

amandeepmittal / React Native Examples

A repo that contain React Native examples most related to tutorials I publish

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Examples

Expo Firebase Starter
๐Ÿ”ฅโš›๏ธ๐Ÿ“ฑ Expo + Firebase Starter Kit
Stars: โœญ 199 (-10.36%)
Mutual labels:  firebase, firestore, expo, react-navigation
Firebase Instagram
๐Ÿ“ธ Instagram clone with Firebase Cloud Firestore, Expo, and React Native ๐Ÿ˜๐Ÿ˜
Stars: โœญ 389 (+75.23%)
Mutual labels:  firebase, firestore, expo
Pillar Valley
๐Ÿ‘พA cross-platform video game built with Expo, three.js, and Firebase! ๐ŸŽฎ๐Ÿ•น
Stars: โœญ 242 (+9.01%)
Mutual labels:  firebase, expo, react-navigation
Expo Native Firebase
๐Ÿ”ฅ Native Firebase Expo App (iOS, Android) Demo for Firestore, Notifications, Analytics, Storage, Messaging, Database ๐Ÿšจ
Stars: โœญ 197 (-11.26%)
Mutual labels:  firebase, expo, react-navigation
Firestore Cloud Functions Typescript
Firebase cloud functions in typescript with Firestore. Using a social network as example
Stars: โœญ 171 (-22.97%)
Mutual labels:  firebase, firestore
Google Cloud Firestore modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google's Firestore
Stars: โœญ 163 (-26.58%)
Mutual labels:  firebase, firestore
A sample project entirely written in Kotlin. Backend/Frontend with Ktor and Android app.
Stars: โœญ 221 (-0.45%)
Mutual labels:  firebase, firestore
Node Firestore Backup
Google Firebase Firestore backup tool
Stars: โœญ 192 (-13.51%)
Mutual labels:  firebase, firestore
A fully functional Instagram clone written in Flutter using Firebase / Firestore
Stars: โœญ 1,944 (+775.68%)
Mutual labels:  firebase, firestore
[NOT MAINTAINED]An API integration framework using GraphQL
Stars: โœญ 182 (-18.02%)
Mutual labels:  firebase, firestore
Hooks, Context Providers, and Components that make it easy to interact with Firebase.
Stars: โœญ 2,908 (+1209.91%)
Mutual labels:  firebase, firestore
Firestore Simple
More simple, powerfull and TypeScript friendly Firestore wrapper.
Stars: โœญ 145 (-34.68%)
Mutual labels:  firebase, firestore
Highlight Utils
My tools for converting, importing, and processing Kindle, Instapaper, and Safari Books highlights
Stars: โœญ 143 (-35.59%)
Mutual labels:  firebase, firestore
This is the source code for Make It So, the sample app accompanying my blog post "Replicating the iOS Reminders App Using SwiftUI and Firebase"
Stars: โœญ 181 (-18.47%)
Mutual labels:  firebase, firestore
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: โœญ 137 (-38.29%)
Mutual labels:  expo, animated
Expo Uber
Uber UI Clone with React Native & Expo
Stars: โœญ 186 (-16.22%)
Mutual labels:  expo, react-navigation
Todo Vue
Code for YouTube series on building a Todo App in Vue.js
Stars: โœญ 199 (-10.36%)
Mutual labels:  firebase, firestore
๐Ÿ”ฅGeoFlutterFire๐Ÿ”ฅ is an open-source library that allows you to store and query firestore documents based on their geographic location.
Stars: โœญ 207 (-6.76%)
Mutual labels:  firebase, firestore
Nextjs Vercel Firebase
Next.js app using API routes to connect with Firestore.
Stars: โœญ 133 (-40.09%)
Mutual labels:  firebase, firestore
React Native Boilerplate
A React Native boilerplate with Expo, Redux, React Navigation, Styled Components and some ๐Ÿ’• included.
Stars: โœญ 135 (-39.19%)
Mutual labels:  expo, react-navigation

React Native Examples

made with expo supports iOS and Android follow @amanhimself

๐Ÿ‘‰ Learn about React Native and Expo at my personal blog.

๐Ÿ“ฎ Or join more than 1200+ 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 on my personal blog 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].

Create a custom Image Gallery Preview

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

This example uses:

Convert Reverse Geocode into Postal Address

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

This example uses:

Create a Translucent Bottom Tab Bar

This example uses:

Shared Element transitions

This example uses:

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:

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

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

This example uses:

Create Custom Custom Wavy Headers with react-native-svg

Using Styled Components in React Native and Expo

Using react-native-image-picker

Handle Navigation in WebViews

Getting Started with react-navigation v5

Nesting Tab and Stack Navigation Patterns in react-navigation v5

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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].