Expo Uni Starter

An Expo starter kit for your native and web applications

Expo Uni Starter leverages the awesomeness of Expo and the genius of Tailwind to enable you to target mobile devices as well as web browsers, while keeping the same code base.

Available targets with no code changes:

• iOS Native app
• Android Native app
• Web for mobile
• Web for desktop computer

Table of Contents

1. Prerequisites
2. Installation
3. Usage
4. External Libraries
5. Project Structure
6. Documentation

Prerequisites

Web

A browser

iOS

1. An Apple computer (or anything running macOS)
2. XCode from the Mac App Store

Android

1. Android Studio
2. Follow installation instructions, and download an SDK
3. Create an AVD (emulator)

Installation

1. Install expo-cli globally
2. Clone this repository
3. Remove the origin: git remote rm origin
4. Add your own remote: git remote add origin $YOUR_REMOTE
5. Push to your remote
6. Install dependencies (yarn, npm install, or your favorite package manager)

Usage

yarn start

Then press either:

• w: to start web development in the browser
• i: to start iOS development in a simulator
• a: to start Android development in an emulator (you might need to have it started)

External Libraries

• Expo Web and Native tooling
• React Native
• react-native-tailwindcss Easy styling
• react-navigation Web/Native navigation
• zustand (with immer) Application state management
• react-hook-form Form management for Web and Native

Project Structure

Code that might change depending of the application business or brand goes in src.

TODO: GraphQL/Rest layer ?

.
├── history                 -- web address bar and history management
├── src                     -- actual app code goes here
│   ├── components
│   │   ├── form            -- Form related components (inputs, checkboxes, buttons, etc)
│   │   ├── layout          -- Layout related components (stack)
│   │   ├── portal          -- Portal (see doc), no reason to touch this
│   │   └── typography      -- Typography related components
│   ├── navigators          -- Navigation, see react-navigation documentation
│   └── stores              -- application state management
├── state                   -- core state management
└── tw                      -- tw styling lib

Documentation

• Components
• Styling with tw
• State Management