Simple Free Expo Starter Template with Navigation and Testing
Tags: reactnative, template
Published: 2021-06-09 12:05:40

---
title: Simple Free Expo Starter Template with Navigation and Testing
published: true
description: TA quick overview of a simple to use Expo template for starting a React Native app. 
tags: reactnative, template
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veub77u2l53lztem2x4e.jpg
canonical_url: https://reactnativeschool.com/simple-free-expo-starter-template-with-navigation-and-testing/
---

This is a quick walk through of a [simple starter template for Expo projects](https://www.npmjs.com/package/@react-native-school/expo-template).

> This post was originally publish on [React Native School](https://reactnativeschool.com/simple-free-expo-starter-template-with-navigation-and-testing/).

It **works on iOS, Android, and the web**.

It includes:

- Navigation (with React Navigation v5)
- Testing (with Jest and React Native Testing Library)
- Code Formatting & Linting (with Prettier and ESLint)
- Project Structure

To use it run the following command

```bash
expo init --template @react-native-school/expo-template
```

> Looking for a React Native CLI version with the same features (sans web support)? Checkout [@react-native-school/react-native-template](https://github.com/ReactNativeSchool/simple-react-native-template).

## Why this Template?

I'm not big on large starter apps or templates...

BUT there are a few things that I use every time I create a new React Native/Expo project.

Those those things that I add and setup every time are included in this Expo template.

**And nothing more!**

It's a huge help when creating so many [React Native tutorials](https://www.reactnativeschool.com/tutorials) and I think it will help you start your React Native project while still maintaining full control of the project.

## What's Included in this Expo Template

### Navigation

Basic navigation is installed and configured using [React Navigation](https://reactnavigation.org/). It only includes a stack navigator at this time so you can easily customize it to your needs without having to take out and uninstall unneeded packages.

### Testing

Testing is configured using [Jest](https://jestjs.io/) and [React Native Testing Library](https://testing-library.com/docs/react-native-testing-library/intro/). I've also included sample tests for:

- Components
- Screens
- Hooks

Tests can be run via the `yarn test` script.

### Code Formatting & Linting

Code formatting and linting is accomplished through [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/). They're configured to work seamlessly together and use the `eslint-config-handlebarlabs` rules by default.

Code can be formatted with the `yarn format` script.

Code can be linted with the `yarn lint` script.

### Project Structure

Project structure is a personal thing but I've based it off of the structure I've used in a React Native app I've been working on for years and has scaled well over that time. It's also light enough to remove/change how you want.

All of your app code is located in the `src/` directory with the following structure:

- `components/` - A place store your UI components.
- `constants/` - Keep reusable constant variables here. Colors, URLs, margins, font sizes, etc.
- `navigation/` - Manage all of your navigation related code here.
- `screens/` - These are the screens that you register with your navigator. "Smart" components.
- `util/` - Support functions and hooks to make your components and screens function.
- `index.js` - The entry point to your app. Setup providers, load fonts, hide the splash screen, etc.

### Micro Component Library

Just a few components to help you get started.

- List Item - for lists.
- Text - for consistent text styling.
- TextInput - for building forms.

## Template Screenshots

![List Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdl0cj3m8eunmuaila5e.png)

![Text Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0mtqsnr00thvux0qtzf.png)

![Form Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jgoxayt01tjdbxtsuto.png)

![Button Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tob3j87esvhmab979wg5.png)