A React Native starter with TypeScript / No Redux repo with the aim to implement scalable gold star standards from the get go

Overview

React Native Starter v2 🚀

Now with TypeScript & Contexts

A React Native starter repo with the aim to implement "scalable gold star" standards from the get go giving some examples with a couple of screens.

Intro / Motivation

This hopefully exists as a "living document" in the sense that as popular patterns change and packages update, this starter app will also update.

To be honest it exists to fill that gap when you want to start a new side project / hobby project where you have that cracking idea but you say: "I really can't be bothered setting everything up and putting boilerplate in... "

Getting Started

For the love of god, follow everything here: https://facebook.github.io/react-native/docs/getting-started

Some helpful things you might forget to do:

  • iOS: cd ios, pod install - get your ios pods installed - sometimes pod repo update is required too.
  • Android: cd android, ./gradlew clean - these are useful when Android bricks

You should be able to follow the getting started documents and then run the commands from the package.json to get going.

A nice workflow would be: yarn ios or yarn android in one terminal tab and then another tab running the packager yarn packager.

Sometimes the simulators don't automatically start, so make sure they're definitely open!

You can also run the app through the respective IDEs in Android Studio and XCode which will look after the bundler, but they're both resource hogs for processing power.

For debugging life is going to be harder without Flipper

There's no extra plugins enabled / added for Flipper in this repo, that's for your to decide!

There's an basic auth server (no database, just JSON) in server/ which is it's own express app (no TS here). To get that running it's the usual:

cd server && yarn
yarn dev

Outline

This starter will setup you up with a project has:

  1. Structure/Architecture with Prettier and ESLint and TSConfig
  2. React Native (from TypeScript Template.)
  3. React Context
  4. Flipper
  5. React Navigation
  6. Axios
  7. React Hook Form
  8. Basic screens / Navigation
  9. TypeScript (Nothing too scary)

In the future maybe? 🤔

  • Jest (Unit & Integration Tests) / ts-jest too.
  • Detox/Appium (E2E tests)
  • Fastlane?
  • Analytics?
  • Crashes? Sentry?
  • Deeplinks?
  • Firebase? Push Notifications?
  • React-Query / More complex opinionated state management.

Reccomended VS Code Extensions

These are the ones that I've found help with the dev workflow - you might equally find them not so helpful.

  • Auto Close Tag (Essential)
  • Auto Rename Tag (Essential)
  • Babel JavaScript (Essential)
  • ESLint (Essential)
  • Prettier (Essential)
  • Code Spell Checker (Handy)
  • Color Highlight (Handy)
  • Partial Diff (Handy allows selection of text CTRL+C and then right click on another selection to - get a git like compare view)
  • Path Intellisense (Handy)
  • Rainbow Brackets (Depends on how much you like colours - but it's quicker nested function identification)
  • vscode-icons (VSCode's icons have come along way but these are still a litle better)
  • GitLens (This can be a bit resource intensive)

Assumptions

  • You enjoy single line quotes, no semi-colon enforcement and pretty much all the auto-formatting from Prettier out of the box.
  • You agree with the current ESLint ruling for both React / React Native / React Hooks / TypeScript
  • You're ok with having a font added by default, as it can be a quirk to setup and it'll show you where it needs to go.
  • You're ok with TypeScript / React Hook Form -> These are probably the most opinionated parts. TS is in here for a laundry list of reasons.
    • React Hook Form however is a lighter alternative to Formik which is kinda heavy - but has it's own downsides, this at the least makes it functional for basic forms.

Generating screenshots?

https://help.apple.com/app-store-connect/#/devd274dd925 Is useful for screenshot sizing

https://facebook.design/devices Is useful for getting device frames for the screenshots

Want a splash screen?

It's worth looking at: https://github.com/zoontek/react-native-bootsplash, there's some good guides knocking about Medium

You might also like...
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

A Supabase starter kit for React Native (TS) with authentication ready
A Supabase starter kit for React Native (TS) with authentication ready

A Supabase starter kit for React Native (TS) with authentication ready. Add your env variables and your ready. (note: /src can be use without Expo, just one line to change in i18next)

:iphone: An iOS client for https://bbs.uestc.edu.cn/ written in react-native, redux and redux-observable.
:iphone: An iOS client for https://bbs.uestc.edu.cn/ written in react-native, redux and redux-observable.

What An iOS client for https://bbs.uestc.edu.cn/ written in react-native, redux and redux-observable, which has been recommended officially as one of

A V2EX client built with React Native and Typescript and Redux
A V2EX client built with React Native and Typescript and Redux

A V2EX client built with React Native and Typescript and Redux

Sweet React Native is a template for react native featuring Multi-language, Dark-Light Themes, Typescript, Context, Styled Components, Jest, Detox, Eslint, Husky, Prettier, and more.
Sweet React Native is a template for react native featuring Multi-language, Dark-Light Themes, Typescript, Context, Styled Components, Jest, Detox, Eslint, Husky, Prettier, and more.

Sweet React Native is a template for react native featuring Multi-language, Dark-Light Themes, Typescript, Context, Styled Components, Jest, Detox, Eslint, Husky, Prettier, and more.

App to manage the products of the FastBuy Store (built with React Native and Redux).
App to manage the products of the FastBuy Store (built with React Native and Redux).

Click to view a video demonstration Requirements Mandatory MacOS. Xcode and Android Studio. Homebrew. Node, Watchman and React Native. Optional Atom,

Short-term memory training game (mobile). Built with React Native and Redux.
Short-term memory training game (mobile). Built with React Native and Redux.

sequent Short-term memory training game. Remember the sequential order of numbers displaying on your screen. Free, no ads, open source. Created in Rea

:musical_note:A light MusicPlayer build with React Native & Redux for both Android and iOS
:musical_note:A light MusicPlayer build with React Native & Redux for both Android and iOS

MoeFM MoeFM, A light MusicPlayer build with React Native & Redux for both Android and iOS MoeFM,一个由ReactNative和Redux构筑的轻量级音乐播放器,支持Android和iOS双平台 React

React Native Todo List example app which uses Redux for managing app state
React Native Todo List example app which uses Redux for managing app state

react-native-redux-todo-list A sample todo list app developed by using React Native and Redux. How to run the app Install react-native If you don't ha

Owner
Kenneth*
Senior Software Engineer > React, React Native, JavaScript 💪 > *Not Hank Scorpio 🔥
Kenneth*
Spaceship - a React Native template with the aim of speeding up your development and increasing your productivity

Spaceship is a React Native template with the aim of speeding up your development and increasing your productivity. This template may receive new updates in the future.

Lucas Augusto 3 Mar 23, 2022
Urban Eatery: An app which is made with an aim of bringing back traditional food

Urban Eatery "Good Food for Good Moments" Urban Eatery is an app where you can o

Yash Shukla 3 Apr 20, 2022
Minimal implement of redux counter example on ReactNative iOS and Android

react-native-counter-ios-android Minimal implement of redux counter example on ReactNative iOS and Android I don't use any syntax out of React Native'

C. T. Lin 238 Nov 25, 2022
Create scalable, robust and enterprise level React Native Typescript applications 🚀

This is a starter project along with boilerplate code which aims to create scalable, robust and enterprise level React Native Typescript applications ??

Tarık 40 Dec 1, 2022
React Native App Boilerplate using React Query, Zustand (un-opinionated small, fast and scalable solution)

?? React Native Query Boilerplate with Zustand Built using Features Typescript support. React Hooks React Query Zustand React Navigation with Authenti

Victor K Varghese 107 Dec 29, 2022
Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.

Jitsi Meet - Secure, Simple and Scalable Video Conferences Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses Jitsi Videobr

Jitsi 19.1k Jan 4, 2023
A social network off the grid (real repo at https://gitlab.com/staltz/manyverse)

Manyverse A social network off the grid (Android) Homepage Install the Android app From F-Droid From Google Play From Dat Installer (input dat://manyv

André Staltz 890 Dec 17, 2022
This is the repo for the legacy SplitCloud for iOS app built with ReactNative and a fork of StreamingKit project.

SplitCloud App This is the repo for the iOS SplitCloud app built with ReactNative and a fork of StreamingKit project. SplitCloud allows you to share y

Giulio Dellorbo 61 Dec 3, 2022
Barton Hammond 4.6k Dec 29, 2022
Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg

Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg, @react-navigation/native, @react-navigation/stack, expo-constants, expo-font, expo-location and expo-mail-composer consuming the features of the Node.js - Ecoleta API

Osvaldo Kalvaitir Filho 7 Oct 28, 2022