react-native-starter

This is a documentation to setup and start your first React Native CLI project.

You can see the official documentation on the website

Requirements

To see the requirements and setup the environment as the official website see the link below:

https://reactnative.dev/docs/environment-setup

Building your first React Native app

After finishing environment setup lets create our first app.

To create react native with javascript template:

npx react-native init myapp

To create react native with typescript template:

npx react-native init myapp --template react-native-template-typescript

This project was created using npx react-native init myapp.

Running the app

Android: npx react-native run-android  or  yarn android

iOS: npx react-native run-ios  or  yarn ios

Folder structure

src
│
└───assets
│   └───fonts
│   └───icons
│   └───images
└───components
│    │   index.js
└───navigation
│    │   index.js
└───screens
│    │   index.js
└───services
│    │   index.js
└───theme
│    │   index.js
└───utils
│    │   index.js

Useful links

Useful libraries

lottie-react-native - Parse Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!
react-native-skia - High-performance 2d Graphics for React Native using Skia!
react-native-linear-gradient - A LinearGradient element for React Native bodymovin and renders them natively on mobile!
react-native-device-info - Get Device Information library for React Native.
react-native-vector-icons - Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling. Choose from 3000+ bundled icons or use your own.
react-native-permissions - A unified permissions API for React Native on iOS, Android and Windows
redux - Redux is a predictable state container for JavaScript apps.
portalize - The simplest way to render anything on top of the rest.
moment - A JavaScript date library for parsing, validating, manipulating, and formatting dates.
axios - Promise based HTTP client
react-native-render-html - An iOS/Android pure javascript react-native component that renders your HTML into 100% native views
react-native-maps - React Native Map components for iOS + Android
react-native-mapbox-gl - A Mapbox GL react native module for creating custom maps
react-native-intersection-observer - React Native implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
react-native-exception-handler – Avoid silent crash and errors on the production build of your app
react-native-swiper - Swiper component for React Native.
react-native-snap-carousel - Swiper component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support
react-native-gifted-chat - The most complete chat UI for React Native (formerly known as Gifted Messenger)
stream-chat-react-native - The official React Native and Expo components for Stream Chat, a service for building chat applications.
react-native-scrollable-tab-view - A scrollable tab-view for React Native
react-native-image-picker - A React Native module that allows you to use the native UIImagePickerController UI to select a photo from the device library or directly from the camera.
react-native-calendars - Calendar Component
react-native-datepicker - React Native date, datetime and time picker for both Android and IOS
react-native-svg - SVG library that works on both iOS & Android
react-native-image-crop-picker - iOS/Android image picker with support for multiple images and cropping
react-native-app-intro - A React Native parallax effect app intro
react-native-fast-image - FastImage, performant React Native image component.
react-native-blurhash - Give your users the loading experience they want.
react-native-modalbox - A component for react-native modal
react-native-chart - React-native-chart is a simple module for adding line charts, area charts, or bar charts to your React Native app.
react-native-offline - Handy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration.
react-native-slider - A pure JavaScript component for react-native
react-native-flash-message - React Native flashbar and top notification alert utility.
react-native-credit-card-input - 💳 Easy (and good looking) credit-card input for your React Native Project
react-native-qrcode - react-native qrcode generator
react-native-easy-toast - A react native module to show toast like android, it works on iOS and Android.
react-native-copilot - Step-by-step walkthrough for your react native app
react-native-star-rating - A React Native component for generating and displaying interactive star ratings
react-native-rating-element - A react native rating system supporting: decimal point's rating, direction aware icons like bottom to top or right to left etc, custom icons from Ionicons, custom images and record rating given by users.
react-native-gesture-password - A gesture password component for React Native
react-native-carousel - Simple carousel component for react-native
react-native-country-picker-modal - Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
react-native-radio-buttons - A react component to implement custom radio buttons-like behaviors: multiple options, only on can be selected at once.
react-native-accordion - An Accordion Component for React Native
react-native-toast - An android like toast for react-native support for iOS and Android
react-native-timer-mixin - TimerMixin provides timer functions for executing code in the future that are safely cleaned up when the component unmounts. This is a fork that includes react-native InteractionManager support.
react-native-progress-bar - An animated progress bar component for React Native
react-native-google-place-picker - React Native Wrapper of Google Place Picker for both Android and iOS.
react-native-offline-mode - Swap your app with an offline version while there's no connectivity
react-native-multi-slider - Pure JS slider component with multiple markers for React Native
react-native-color-picker - React Native implementation of color picker for both Android and iOS.
react-native-zoom-image - An image viewer component for react-native, like twitter's image viewer.
react-native-view-pdf - PDF viewer for React Native
react-native-streetview - Google's Panorama/StreetView component for iOS and Android.
react-native-360-image-viewer - The component helps to simulate 360 degrees image from multiple images.
react-native-progress-circular - A pure React Native Component for circular progress bars for both iOS and Android.
react-native-countdown - react native countdown button
react-native-dashed-border - A element for react-native
react-native-fancy-carousel-viewpager - React Native Designed View Pager Library (pure js)
react-native-svg-transformer - Import SVG files inside React Native components. Uses the react-native-svg library to render SVG images.

Navigation

react-navigation - Easy to use Navigation for React Native
react-native-navigation - App-wide support for 100% native navigation with an easy cross-platform interface.
react-native-router-flux - React Native Router based on new React Native Navigation API
kittenTricks - A react native mobile starter kit with over 40 screens and theme hot reload support

Forms

formik - Forms in React, without tears.
react-hook-form - React hooks for forms validation without the hassle.
redux-form - Redux form state management (Web and Native)
redux-hook-form - React hooks for form validation without the hassle. (Web and Native)
tcomb-form-native - Generate React Native forms

Styling

styled-components - Style React and React Native with utilising tagged template literals.
emotion - Style as a function of state.
react-native-extended-stylesheet - Extend React Native stylesheet with variables, relative units, percents, math operations, scaling and other stuff.

System

react-native-device-info - Get device information using react-native
react-native-fs - Native filesystem access for react-native
react-native-config - Config variables for React Native apps
react-native-ultimate-config - Configure all levels of your react-native app with a single file
react-native-permissions - Check and request all permissions with a single api
react-native-keychain - Keychain Access for React Native
react-native-touch-id - React Native authentication with the native Touch ID popup.
react-native-contacts - React Native Contacts (android & ios)
react-native-communications - Easily call, email, text or iMessage someone in React Native
react-native-in-app-utils - A react-native wrapper for handling in-app payments.
react-native-image-resizer - Rescale local image files with React Native.
react-native-quick-actions - A react-native interface for 3D Touch home screen quick actions
react-native-billing - In-app purchase implementation for React Native on Android.
react-native-barcodescanner - A barcode scanner component for react native - not maintained anymore - use react-native-camera.
react-native-iap - React-native native module for In-App Purchase.
react-native-dotenv - A Babel preset let you import application configs from .env file (zero runtime dependency)
react-native-location - Native GPS location support for React Native.
react-native-background-fetch - iOS BackgroundFetch API implementation. Awakens a suspended iOS app in the background to execute a callbackFn about every 15 min.
react-native-queue - Your swiss army knife for task management in React Native - easily manage background tasks that run periodically when app is closed and dedicated worker threads.
react-native-sensors - Platform independent wrapper for sensors like Gyroscope, Accelerometer and Magnetometer with RxJS interface
react-native-social-share - Use the iOS native Twitter and Facebook share view from react native
react-native-motion-manager - A react-native interface for using the Gyroscope, Accelerometer and Magnetometer
react-native-android-sms-listener - Allows you to listen for incoming SMS messages
react-native-ble - React Native BLE using noble api surface
react-native-haptic - iOS 10 + haptic feedback for React Native applications
react-native-pinch - SSL pinning for react native
react-native-discovery - Discover nearby devics using BLE. Turn iOS and Android devices into beacons
react-native-google-nearby-messages - Communicate with nearby devices using Bluetooth, BLE, WiFi and near-ultrasonic audio by using the Google Nearby Messages API
react-native-haptic-feedback - Trigger Haptic Native Feedback on iOS and Android
react-native-clipboard - React Native component for getting or setting clipboard content
react-native-nfc-ios - Easy to use CoreNFC for React Native
react-native-android-sms - A react native android module to list/send sms.
react-native-voip-push-notification - iOS prioritized VoIP Push Notification
react-native-android-speech - A text-to-speech library for Android React Native.
react-native-carrier-info - React Native module bridge to obtain information about the user’s home cellular service provider.
react-native-device-battery - Observe battery state changes in your react native application
react-native-device-motion - iOS device motion wrapper for React Native.
react-native-wifi-manager - Wifi Connection Manager for React Native on Android
react-native-android-sqlite - A react native android wrapper for SQLite
react-native-ssl-pinning - React Native SSL pinning using OkHttp 3 on Android, and AFNetworking on iOS
rn-secure-storage - Secure Storage for React Native (Android & iOS)
react-native-contacts-rx - react-native-contacts counterpart that include the support of RxJS.
react-native-detect-device - Detect a device on iOS or android in react-native.
react-native-battery-status - A battery-status for react-native
react-native-system-notification - Notification for React Native
react-native-home-pressed - Listen to home and recent app events for Android
react-native-push-with-gcm - Register device for GCM push notifications services (supported only for iOS)
react-native-device-info-pod - Get device information using react-native
react-native-sms-retriever - SMS Retriever API (Android).
react-native-background-downloader - Help you download large files on iOS and Android both in the foreground and most importantly in the background.
react-native-system-setting- Provides some system setting APIs iOS and Android.

Media

react-native-camera - Camera component
react-native-video - A Video component for react-native
react-native-sound - React Native module for playing sound clips
react-native-audio - Record and play back audio in your iOS or Android React Native apps. (no longer maintained)
react-native-audio-toolkit - Audio playback and recording for react-native. In addition to basic functionality, many useful features are implemented such as seeking, looping and streaming audio files over the network.
react-native-camera-kit - Advanced native camera and gallery components and device photos API.
react-native-audio-streaming - iOS & Android module to play an audio stream, with background support and media controls.
react-native-video-processing - Native Video editing/trimming/filtering library for React-Native
react-native-track-player - A fully fledged audio module created for music apps. Provides audio playback, external media controls, chromecast support and background mode for Android, iOS and Windows.
react-native-music-control - React Native module to display Now playing Info on lockscreen and handle control events
react-native-camera-roll-picker - A React Native component providing images selection from camera roll
react-native-incall-manager - Handling media-routes/sensors/events during a audio/video chat like webrtc
react-native-speech - A text-to-speech library for React Native.
react-native-screcorder - Capture pictures and record Video with Vine-like tap to record
react-native-photos-framework - A modern and comprehensive CameraRoll/iCloud-library for React Native
react-native-audioplayer - Small audio player library for react native
react-native-player - Media player for react-native
react-native-vlc-player - VLC Player for react-native
react-native-sound-recorder - No-hassle Sound Recorder for React Native
react-native-photoeditorsdk - React Native module for PhotoEditor SDK (Android & iOS)
react-native-videoeditorsdk - React Native module for VideoEditor SDK (Android & iOS)
react-native-audio-manager - Audio player library for react native Android
react-native-safe-image - Really light React-Native package to handle fallback when image is on error
react-native-audio-player - A React Native module to play audio on Android
react-native-mediaplayer - Simple full screen media player for React Native.
react-native-media-capture - A media-capture for react-native

Storage

react-native-mmkv - The fastest key/value storage for React Native.
react-native-async-storage - Key/value storage for React Native.
RxDB - A realtime Database for JavaScript Applications.
WatermelonDB - 🍉 Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast.
realm - An alternative mobile database to SQLite & key-value stores.
react-native-storage - This is a local storage wrapper for both react-native(AsyncStorage) and browser(localStorage). ES6/babel is needed.
react-native-sqlite-storage - SQLite3 bindings for React Native (Android & iOS)
react-native-simple-store - A minimalistic wrapper around React Native's AsyncStorage.
react-native-store - A simple database base on react-native AsyncStorage.
react-native-db-models - Local DB Models for React Native Apps
react-native-sqlite-2 - SQLite3 Native Plugin for React Native for both Android and iOS
react-native-persistent-job - Run async tasks that retry after a crash, connection loss or exception
react-native-pouchdb - Run pouchdb in React Native!
react-native-level-fs - fs for react-native using level-filesystem and asyncstorage-down
react-native-mongoose - A AsyncStorage based mongoose like storage for react-native React prop-types.

Networking

fetch - The Fetch API provides an interface for fetching resources (Build in JavaScript)
axios - Promise based HTTP client
apisauce - Light-weight and fast HTTP client library that uses Axios

Animation

react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native
react-native-interactable - experimental implementation of high performance interactable views in React Native
react-native-reanimated - React Native's Animated library reimplemented
react-native-spruce - React Native Bridge for Spruce Animation Library
react-native-skia - High-performance 2d Graphics for React Native using Skia!
react-native-magic-move - Create magical move transitions between scenes in react-native 🐰🎩✨ (shared element transitions)
react-native-gl-model-view - Display and animate textured Wavefront .OBJ 3D models with 60fps (iOS)
react-native-animated-sprite - A feature rich declarative component for animation, tweening, and dragging sprites.
react-native-animated-math - An Animated API math extension - implements sin, cos, tan and pow as Animated Nodes with full Native Driver support

Utilities

upgrade-helper - A web interface to support React Native developers in upgrading their apps. Link to tool
rn-diff-purge - The easiest way to upgrade React Native versions. You can find diffs for every React Native version, that are created by diffing the previous version with a newly created app in the new version.
react-native-debugger - The standalone app for React Native Debugger, with React DevTools / Redux DevTools
sentry-react-native - Sentry's React Native SDK enables automatic reporting of errors and exceptions, and identifies performance issues in your application.
generact - CLI that generates components based on existing ones no matter how you structure your app
react-native-rename - Rename react-native app with just one command
Electrode Native - A platform to ease the integration of React Native components in existing mobile applications.
react-native-snippets - A collection of Sublime Text Snippets for react-native
react-native-bundle-visualizer - See what's inside your RN bundle; useful for optimizing the bundle size
AsyncStorage Dev Menu Item - Adds an option to your dev menu to log the content of your AsyncStorage.
rn-nodeify - hack to allow react-native projects to use node core modules
react-native-ruler - A devtool for measuring pixel dimensions on your React Native screens
BuilderX - A design tool which writes React Native code for you , Desktop Mac app to replace your traditional UX design tools.
CodePush - Push code updates to your apps, instantly
Storybook - UI development environment for your React components
BugSnag - A tool that logs native & JS errors. Has a free tier. Includes useful data about the user, environment, session, release, etc.
SimpleLocalize CLI - An open source Localization CLI tool for finding i18n keys in project files.

Dependencies that used in almost every projects

Open Source Apps

Open source React Native apps and other examples.

Artsy - The mobile app for artsy.net. Discover fine Art. The Art world in your Pocket.
f8app - Official F8 (Facebook Developer Conference) app of 2017. See blog post.
30-days-of-react-native - 30 days of React Native examples (inspired by 30DaysofSwift)
react-native-nw-react-calculator - A mobile, desktop and website App with the same code
GitPoint - A mobile GitHub client for both iOS and Android.
Hacker News (iOS & Android)
reading - Reading App Write In React-Native.
Status.im - Ethereum client.
GitHub Popular - This is a GitHub most popular repositories viewer with React Native.
Dribbble React Native
react-native-gitfeed - Yet another Github client written with react-native(iOS & android)
Finance React Native - iOS's stocks app clone written in React Native for demo purpose.
Quirk 🐙 - Cognitive Behavioral Therapy for iOS and Android.
TaskRabbit's Sample App - a testing ground for Task Rabbit's app making
React Weather - A simple weather app built with React Native
Boostnote - Boostnote: open source note taking.
react-native-sudoku - a sudoku game written in React Native
react-native-hiapp - A simple and Twitter like demo app written in react-native
React Native Netflix - A Netflix-like app.
what the thing? - Point camera at things to learn how to say them in a different language.
react-native-basketball - a clone of the Facebook Basketball game
Surmon.me.native A react-native applaction for surmon.me
An example React Native project for client login authentication
GitterMobile - Gitter (chat for github) client for iOS and Android
ReactNativeRedditReader
Assemblies - a Meetup clone
DuckDuckGo App (Unofficial)
Ziliun React Native - Wordpress based article reader built with react native
Luno - A ClojureScript React Native app demonstration
ReactNativeHackerNews
iOS Conference App made with React Native
MagicMirror
Redux Demo - Minimal implement of redux counter example on ReactNative iOS and Android
React Native Embedded App -A collection of examples for using React Native in an existing iOS application
React Native Example, Geo and Location
uestc-bbs-react-native - An iOS client for http://bbs.uestc.edu.cn/ written in React Native with Redux
Sh**t! I Smoke - Know how many cigarettes you smoke based on the pollution of your location.
PxView - An unofficial Pixiv app client for Android and iOS
BBC News (Unofficial) - a BBC news app
HackerBuzz - a Hacker News reader.
Vecihi App – Build your own photo sharing app.
Rocket.Chat - Open Source Team Communication
HackerWeb - A simply readable Hacker News web app for iOS & Android.
Buyscreen sample
NewsWatch video viewer
YouTrack Mobile – a client for YouTrack – issue tracker from JetBrains.
ndash - npm dashboard.
Look Lock - An app for showing photos without worries.
Kakapo - ambient sound mixer
Appointments - Full-fledged ReactNative App for Booking Appointments
Alt/Flux Demo
Buttercup Mobile - Mobile password manager
Insta Snap - Image Sharing App
live translator - An app that translates in real time what you see from your mobile.
Finance MacOS React Native - iOS's Stocks App clone written for MacOS with Touch Bar support. Data is pulled from Yahoo Finance.
NBAreact
Urban Dictionary - Mobile implementation of the popular Urban Dictionary website.
ASOS - E-commerce app for ASOS (clone)
Reddit made with React Native and Redux
react-native-redux-facebook - A simple React Redux Facebook authentication demo app.
Hekla for Hacker News - Hackernews client with TypeScript, mobx-state-tree, native navigation and css modules.
QRCode App - application for scanning and generating QR codes.
Nearby Live - An unofficial NearbyLive app for Android and iOS
SoundcloudMboX SoundcloudMobX is the Soundcloud for iOS, Build with React-Native and MobX.
Native iOS font list
React Native Chromecast App
MoeFM - A light MusicPlayer build with React Native & Redux for both Android and iOS.
iTunesConnect - Unofficial iTunes Connect App
Sequent - short-term memory training game (W/ Redux).
AudienceNetworkReactNative - Facebook Audience Network Performance Tool.
rndrawer-implemented-rnrouter - A react-native-drawer implemented example and scaffolding for react-native-router-flux
Magento 2 Mobile App - Magento 2.x mobile app built with React Native
iOS app that transcript your voice with IBM Watson Cloud
Splitcloud - Share listening to two songs at the same time from Soundcloud (by splitting right/left channels).
ZudVPN - Deploy private VPN on major Cloud Providers with ZudVPN
Todo List - Todo-List app using SwipeView with ES6 standards for iOS and Android.
Paramap - Accessability map. React-native with Redux and Firebase. iOS and Android.
Confreaks
Vocab React Native - Thai Vocabulary Learning App
Premier League
Roxie - Sound processing and bluetooth hardware control.
Roverz - A native mobile chat client library for Rocket.Chat on both iOS and Android.
Text Blast - iOS client for MMS text blasting app with analogous ionic version for comparison
NewYorkTimesTopStories - Read Topstories of NewYorkTimes using its api written for android in react-native.
Quick-Sample - A small and simple example app with navigation, data persistence, redux, listview and animation.
iGap Plus - iGap+ is a cross-platform messaging application (Currently Android , iOS and Windows UWP) and has been created using all latest modern technologies. iGap+ is designed to easily support additional platforms like web, macOS and linux.
Posters_Galore_Android - An experimental Android application using Redux and a REST API
react-native-medium-clap-animation - Medium Clap Animation in React Native
HupuApp - A Third-party Hupu App (http://bbs.hupu.com/) client implemented using React Native (Android and iOS).
react-native-uber-clone - Uber UI Clone with animations in react native
Commit Strip (Unofficial) - A CommitStrip.com reader built in React Native.
react-native-otello - a reversi game written in React Native
GitHub Jobs Search App (Unofficial) - A GitHub Jobs Search App built in React Native.
Minimal Quotes - Mobile app that throws you random quotes in a super clean minimal version.
Hello Bemans - Health Trainer Connection App (Android Version)
RNV2ex - react-native for v2ex
Renote - A simple react-native example app for make notes.
Manyverse – Social network off the grid (a Scuttlebutt Android client)
Bristol Pound - An app for the Bristol Pound, a UK-based local currency.
React Native Showcase
Instagram clone - an Instagram clone
Joplin - A note taking app for desktop, CLI, and mobile (linked here is the mobile app).
Cat-or-dog - Simple game with drag'n'drops and animations.
Forex Rates - Foreign exchange rates. currency rate converter. Historical exchange rates. Android and iOS.
Smog Alert App – provides real-time air pollution data all around the world and shows nearby polluters.
Audio Book App – Completed Audiobook app with some cool animations.
FastBuy - App to manage the products from a dummy Store (built with React Native and Redux).
Hydropuzzle - Stylish puzzle adventure game.
Github-Gist - React native mobile application for github gist
Lyrics King - Minimalist and stylish lyrics search app.
TensorFlow.js Starter - TensorFlow.js starter app using MobileNet to predict image class. Blog post for additional context.
Art Museum - Browse through the endless Harvard's Art Museum collection.
NMF.earth - Calculate, understand and reduce your carbon footprint. Available for Android and iOS, using Expo, Redux Toolkit and Typescript.
Nyxo - Sleep tracker and sleep coaching app. Available for Android and iOS.
Post Card App - Create old style post card and share on whatsapp as image. Built with Expo and available for android.

Tutorials

Walkthroughs and tutorials that help you learn React Native.

Books

Books - free and commercial.

Programming React Native - (Free) An in-depth React Native book that you should read after you've done a couple tutorials of the many out there.
React Native Animation Book - (Free) React Native Animation.
React Native In Action - Learn how to build applications using React Native from the ground up.
Fullstack React Native - The up-to-date, in-depth, complete guide to React Native.

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
.bundle		.bundle
__tests__		__tests__
android		android
ios		ios
src		src
.DS_Store		.DS_Store
.buckconfig		.buckconfig
.eslintrc.js		.eslintrc.js
.flowconfig		.flowconfig
.prettierrc.js		.prettierrc.js
.ruby-version		.ruby-version
.watchmanconfig		.watchmanconfig
Gemfile		Gemfile
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
index.js		index.js
metro.config.js		metro.config.js
package.json		package.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

react-native-starter

Contents

Requirements

Building your first React Native app

Running the app

Folder structure

Useful links

Useful libraries

Navigation

Forms

Styling

System

Media

Storage

Networking

Animation

Utilities

Dependencies that used in almost every projects

Open Source Apps

Tutorials

Books

Support

About

Releases

Packages

Languages

mmsmadi/react-native-starter

Folders and files

Latest commit

History

Repository files navigation

react-native-starter

Contents

Requirements

Building your first React Native app

Running the app

Folder structure

Useful links

Useful libraries

Navigation

Forms

Styling

System

Media

Storage

Networking

Animation

Utilities

Dependencies that used in almost every projects

Open Source Apps

Tutorials

Books

Support

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages