React Native Typescript Boilerplate

screenshot of React Native Typescript Boilerplate
react
react-native

React Native Typescript Boilerplate

React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7)

Overview:

The React Native Template - TypeScript is an opinionated starter kit for building iOS and Android apps using React Native and TypeScript. It includes pre-setup tools such as React Native Navigation, Redux, and Airbnb TSLint. The project is based on the React Native Getting Started guide and instructions from Microsoft's Github TypeScript React Native Starter repository. It supports the latest versions of React and React Native, as well as features like Flipper and Hermes integration. The template also provides a built-in splash screen and code linting using Airbnb's JavaScript Linting. Overall, this starter kit aims to provide a solid foundation for building robust apps using React Native and TypeScript.

Features:

  • React Native Navigation v7 for native tabbed navigation
  • Side/Drawer menu support
  • State management using Flux Architecture and Redux
  • Redux-Thunk middleware for handling side effects
  • Atomic Design pattern for structuring the app
  • Typography setup with pre-defined elements for buttons, text, and more
  • Type definitions for actions, reducers, store, and components
  • Built-in splash screen
  • Integration with Hermes and Flipper
  • Code linting using Airbnb's JavaScript Linting

Installation:

  1. Make sure your Node version is >=12.x.x.
  2. Install the template using either Yarn or npm:
yarn install
  1. Start the Metro Bundler:
yarn start
  1. For iOS, navigate to the ios folder and install pods:
cd ios
pod install

Summary:

The React Native Template - TypeScript is an opinionated starter kit for building iOS and Android apps using React Native and TypeScript. It provides a pre-configured setup with tools like React Native Navigation, Redux, and Airbnb TSLint. The template supports the latest versions of React and React Native and includes features like Flipper and Hermes integration. It follows the Atomic Design pattern and offers a built-in splash screen and code linting using Airbnb's JavaScript Linting. Overall, it aims to accelerate the development process of React Native apps by providing a solid foundation and commonly needed tools.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.