react-native-template-obytes

📱 A template for your next React Native project: Expo, PNPM, TypeScript, TailwindCSS, Husky, EAS, GitHub Actions, Env Vars, expo-router, react-query, react-hook-form.

2,271

330

2,271

View on GitHub

Top Related Projects

ignite

17,543

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!

react-native-boilerplate

4,809

A React Native template for building solid applications 🐙, using JavaScript 💛 or Typescript 💙 (you choose).

react-native-template-typescript

1,858

👾 Clean and minimalist React Native template for a quick start with TypeScript.

react-native-starter

2,204

🚀A powerful react native starter template that bootstraps development of your mobile application

Quick Overview

The obytes/react-native-template-obytes is a comprehensive and opinionated React Native template designed to kickstart mobile app development. It provides a pre-configured setup with essential tools, best practices, and a modular structure to help developers build scalable and maintainable React Native applications quickly.

Pros

Comes with a well-structured project setup, including TypeScript, ESLint, and Prettier configurations
Includes pre-configured navigation, state management, and API integration solutions
Offers built-in support for dark mode and internationalization
Provides a collection of reusable components and hooks to accelerate development

Cons

The opinionated nature of the template may not suit all project requirements or developer preferences
Learning curve for developers unfamiliar with the included tools and patterns
Regular maintenance required to keep dependencies up-to-date
May include unnecessary features for simpler projects, potentially increasing bundle size

Code Examples

Using the custom useAuth hook for authentication:

import { useAuth } from '@/core';

function ProfileScreen() {
  const { user, logout } = useAuth();

  return (
    <View>
      <Text>Welcome, {user.name}</Text>
      <Button title="Logout" onPress={logout} />
    </View>
  );
}

Implementing a screen with the Screen component:

import { Screen, Text } from '@/ui';

function HomeScreen() {
  return (
    <Screen>
      <Text variant="header">Welcome to the Home Screen</Text>
      {/* Add more content here */}
    </Screen>
  );
}

Using the useAppTheme hook for theming:

import { useAppTheme } from '@/core';

function ThemeAwareComponent() {
  const { colors } = useAppTheme();

  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors.text }}>Themed content</Text>
    </View>
  );
}

Getting Started

To use this template, follow these steps:

Install the React Native CLI if you haven't already:
```
npm install -g react-native-cli
```

Create a new project using the template:

npx react-native init MyApp --template @obytes/react-native-template-obytes

Navigate to the project directory and install dependencies:
```
cd MyApp
yarn install
```
Start the development server:
```
yarn start
```
Run the app on your desired platform:
```
yarn ios
# or
yarn android
```

Competitor Comparisons

ignite

17,543

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!

Pros of Ignite

More comprehensive boilerplate with additional features like state management and navigation
Includes a CLI tool for generating components and screens
Larger community and more frequent updates

Cons of Ignite

Steeper learning curve due to additional complexity
May include unnecessary features for smaller projects
Opinionated structure might not suit all development styles

Code Comparison

Ignite's component generation:

ignite generate component MyComponent

React Native Template Obytes' component creation (manual):

// components/MyComponent.js
import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => (
  <View>
    <Text>My Component</Text>
  </View>
);

export default MyComponent;

Both templates provide a solid foundation for React Native projects, but Ignite offers more out-of-the-box features and tooling at the cost of increased complexity. React Native Template Obytes provides a simpler, more lightweight starting point that may be easier to customize for specific project needs. The choice between the two depends on the project's requirements and the developer's preference for structure and included features.

react-native-boilerplate

4,809

A React Native template for building solid applications 🐙, using JavaScript 💛 or Typescript 💙 (you choose).

Pros of react-native-boilerplate

More comprehensive documentation and setup instructions
Includes built-in support for Flipper debugging tool
Offers a wider range of pre-configured libraries and tools

Cons of react-native-boilerplate

Larger initial project size due to more included dependencies
Potentially steeper learning curve for beginners
Less frequent updates compared to react-native-template-obytes

Code Comparison

react-native-boilerplate:

import { AppRegistry, LogBox } from 'react-native'
import App from './App'
import { name as appName } from './app.json'

if (__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

react-native-template-obytes:

import { AppRegistry } from 'react-native'
import App from './src/app'
import { name as appName } from './app.json'

AppRegistry.registerComponent(appName, () => App)

The react-native-boilerplate example includes additional setup for Reactotron in development mode, while react-native-template-obytes keeps the entry point simpler. This reflects the more comprehensive approach of react-native-boilerplate, which may be beneficial for larger projects but could be overwhelming for simpler applications.

react-native-template-typescript

1,858

👾 Clean and minimalist React Native template for a quick start with TypeScript.

Pros of react-native-template-typescript

Officially maintained by the React Native community, ensuring better long-term support and updates
Focused solely on TypeScript integration, providing a clean and minimal starting point
Widely adopted and well-documented, making it easier for developers to find resources and support

Cons of react-native-template-typescript

Lacks additional features and configurations that may be useful for larger projects
Requires more setup and integration of commonly used libraries and tools
Does not include pre-configured testing or state management solutions

Code Comparison

react-native-template-typescript:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

react-native-template-obytes:

import React from 'react';
import { View } from 'react-native';
import { Text } from '@/ui';
import { useTheme } from '@/ui/theme';

const App = () => {
  const { colors } = useTheme();
  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text>Hello, World!</Text>
    </View>
  );
};

The Obytes template includes more pre-configured features, such as theming and custom UI components, while the TypeScript template provides a simpler starting point with basic TypeScript integration.

react-native-firebase-starter

1,173

DEPRECATED: For RNFB v5 only.

Pros of react-native-firebase-starter

Focused integration with Firebase services, ideal for projects heavily relying on Firebase
Includes pre-configured Firebase modules for quick setup
Provides a solid foundation for building cross-platform apps with Firebase backend

Cons of react-native-firebase-starter

Limited to Firebase ecosystem, potentially less flexible for projects using other backend services
May include unnecessary Firebase modules for projects not utilizing all services
Less emphasis on overall app architecture and state management compared to react-native-template-obytes

Code Comparison

react-native-firebase-starter:

import firebase from '@react-native-firebase/app';
import '@react-native-firebase/auth';
import '@react-native-firebase/firestore';

// Firebase initialization and usage

react-native-template-obytes:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Provider } from 'react-redux';
import { store } from './src/store';

// React Query and Redux setup

The code snippets highlight the different focus areas of each template. react-native-firebase-starter emphasizes Firebase integration, while react-native-template-obytes provides a more general-purpose setup with state management tools like React Query and Redux.

react-native-starter

2,204

🚀A powerful react native starter template that bootstraps development of your mobile application

Pros of react-native-starter

Includes a more comprehensive set of pre-built UI components
Offers multiple theme options out of the box
Provides integration with Firebase for authentication and database

Cons of react-native-starter

Less focus on TypeScript and type safety
May have a steeper learning curve due to additional features
Potentially more opinionated structure, which could be less flexible

Code Comparison

react-native-starter:

import React from 'react';
import { View, Text } from 'react-native';
import { Button } from 'react-native-ui-lib';

const MyComponent = () => (
  <View>
    <Text>Hello from react-native-starter</Text>
    <Button label="Click me" onPress={() => {}} />
  </View>
);

react-native-template-obytes:

import React from 'react';
import { View } from 'react-native';
import { Button, Text } from '@/ui';

const MyComponent = () => (
  <View>
    <Text>Hello from react-native-template-obytes</Text>
    <Button onPress={() => {}}>Click me</Button>
  </View>
);

The code comparison shows that react-native-starter uses the react-native-ui-lib for components, while react-native-template-obytes uses custom UI components. The latter also demonstrates stronger TypeScript integration with its import syntax.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Native Template Obytes

expo react-native GitHub Repo stars GitHub commit activity (branch) GitHub issues GitHub closed issues

ð± A template for your next React Native project ð, Made with developer experience and performance first: Expo, TypeScript, TailwindCSS, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n.

Welcome to the Obytes Mobile Tribe's Expo / React Native Starter Kit!

ð Motivation

Our goal with this starter kit was to streamline the process of building React Native apps, both for our own team and for our clients. We wanted to create a resource that would allow us to create high-quality apps faster and with less effort, while ensuring that all of our projects adhere to the same code standards and architectural principles.

The benefits of using this starter kit are numerous. It helps our team easily switch between projects, as we can rely on a consistent foundation of code. It also allows us to focus on the business logic of each project rather than getting bogged down in boilerplate code. And, because it promotes consistency across projects, it makes it easier to maintain and scale our apps, as well as share code between teams.

Overall, our starter kit is designed to facilitate efficient and effective app development, helping us to bring the best possible products to our clients

âï¸ Philosophy

When creating this starter kit, we had several guiding principles in mind::

ð Production-ready: We wanted to ensure that this starter was ready for real-world use, providing a solid foundation for building production-grade apps.
ð¥· Developer experience and productivity: Our focus was on creating a starter that would enhance the developer experience and increase productivity.
ðª Well-maintained third-party libraries: We included only well-maintained and reliable third-party libraries, to provide stability and support for our projects.

â Key Features

â Latest Expo SDK with Custom Dev Client: Leverage the best of the Expo ecosystem while maintaining full control over your app.
ð TypeScript for enhanced code quality and bug prevention through static type checking.
ð Minimal UI kit built with TailwindCSS, featuring common components essential for your app.
âï¸ Multi-environment build support (Production, Staging, Development) using Expo configuration.
ð¦ Husky for Git Hooks: Automate your git hooks and enforce code standards.
ð¡ Clean project structure with Absolute Imports for easier code navigation and management.
ð« Lint-staged: Run Eslint and TypeScript checks on Git staged files to maintain code quality.
ð VSCode recommended extensions, settings, and snippets for an enhanced developer experience.
âï¸ Pre-installed Expo Router with examples for comprehensive app navigation.
ð« Auth flow implementation using Zustand for state management and react-native-mmkv for secure data storage.
ð 10+ Github Actions workflows for building, releasing, testing, and distributing your app.
ð¥ React Query and axios for efficient data fetching and state management.
ð§µ Robust form handling with react-hook-form and zod for validation, plus keyboard handling.
ð¯ Localization support with i18next, including Eslint for validation.
ð§ª Unit testing setup with Jest and React Testing Library.
ð E2E testing capabilities with Maestro for comprehensive app testing.

ð¤ Is this starter for me?

Yes ð

This starter kit is designed to benefit a wide range of React Native developers, from beginners to experienced professionals. Here's why it might be a good fit for you:

For beginners: It provides a solid foundation with best practices and common solutions, helping you learn industry-standard approaches to React Native development.
For experienced developers: It offers a well-structured, production-ready setup that can save you time and effort in project initialization and configuration.
For teams: It ensures consistency across projects and team members, making it easier to onboard new developers and maintain code quality.
For explorers: Even if you prefer not to use starter kits, this project can serve as a valuable reference. You can explore the codebase, documentation, and architectural decisions to gain insights and potentially adopt specific solutions for your own projects.
For learners: The starter kit incorporates up-to-date libraries and patterns, offering an opportunity to familiarize yourself with current best practices in the React Native ecosystem.
For AI-assisted development: This starter kit works well with AI coding tools. It provides a solid structure and best practices that can guide AI-generated code. This helps ensure that AI assistance leads to high-quality, maintainable code that fits well within your project.

Remember, you don't have to use the entire starter kit as-is. Feel free to cherry-pick ideas, configurations, or code snippets that align with your project needs. Whether you're building a new app from scratch or looking to improve your existing development process, this starter kit can provide valuable insights and practical solutions.

ð Why Expo and not React Native CLI?

We have been using Expo as our main framework since the introduction of Continuous Native Generation (CNG) concept and we are happy with the experience.

I think this question is not valid anymore specially after the last React conference when the core react native team recommended using Expo for new projects.

"As of today, the only recommended community framework for React Native is Expo. Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class." React native core team

Still hesitating? Check out this article or this video, maybe this one video too.

ð§âð» Stay up to date

We are committed to continually improving our starter kit and providing the best possible resources for building React Native apps. To that end, we regularly add new features and fix any bugs that are discovered.

If you want to stay up to date with the latest developments in our starter kit, you can either watch the repository or hit the "star" button. This will allow you to receive notifications whenever new updates are available.

We value the feedback and contributions of our users, and we encourage you to let us know if you have any suggestions for improving our starter kit. We are always looking for ways to make it even more effective and useful for our community. So, please do not hesitate to reach out and share your thoughts with us.

ð Libraries used

Contributors

This starter is maintained by Obytes mobile tribe team and we welcome new contributors to join us in improving it. If you are interested in getting involved in the project, please don't hesitate to open an issue or submit a pull request.

In addition to maintaining this starter kit, we are also available to work on custom projects and help you build your dream app. If you are looking for experienced and reliable developers to bring your app vision to life, please visit our website at obytes.com/contact to get in touch with us. We would be happy to discuss your project in more detail and explore how we can help you achieve your goals.

ð¥ How to contribute?

Thank you for your interest in contributing to our project. Your involvement is greatly appreciated and we welcome your contributions. Here are some ways you can help us improve this project:

Show your support for the project by giving it a ð on Github. This helps us increase visibility and attract more contributors.
Share your thoughts and ideas with us by opening an issue. If you have any suggestions or feedback about any aspect of the project, we are always eager to hear from you and have a discussion.
If you have any questions about the project, please don't hesitate to ask. Simply open an issue and our team will do our best to provide a helpful and informative response.
If you encounter a bug or typo while using the starter kit or reading the documentation, we would be grateful if you could bring it to our attention. You can open an issue to report the issue, or even better, submit a pull request with a fix.

We value the input and contributions of our community and look forward to working with you to improve this project.

â FAQ

If you have any questions about the starter and want answers, please check out the Discussions page.

ð License

This project is MIT licensed.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Ignite

Cons of Ignite

Code Comparison

Pros of react-native-boilerplate

Cons of react-native-boilerplate

Code Comparison

Pros of react-native-template-typescript

Cons of react-native-template-typescript

Code Comparison

Pros of react-native-firebase-starter

Cons of react-native-firebase-starter

Code Comparison

Pros of react-native-starter

Cons of react-native-starter

Code Comparison

Convert designs to code with AI

README

React Native Template Obytes

ð Motivation

âï¸ Philosophy

â­ Key Features

ð¤ Is this starter for me?

ð Why Expo and not React Native CLI?

ð§âð» Stay up to date

ð Libraries used

Contributors

ð¥ How to contribute?

â FAQ

ð License

Top Related Projects

Convert designs to code with AI

ð Motivation

âï¸ Philosophy

â Key Features

ð¤ Is this starter for me?

ð Why Expo and not React Native CLI?

ð§âð» Stay up to date

ð Libraries used

ð¥ How to contribute?

â FAQ

ð License