expo-bare-template v1.1.5

Expo Template

Bare minimum Expo template to kickstart a React Native app with following features:

• Expo SDK 42.x.x
• React Navigation v6
  • ⚠️ React Navigation v6 library is an upcoming version.
  • Based on Stack and Tab navigators
• Reusable components to get started with:
  • Button
  • IconButton
  • Input
• Define and switch between theme modes
• Asyncstorage to persist theme value
• ESlint and Prettier configured

Usage

With Expo CLI:

expo init -t expo-bare-template

With create-react-native-app:

npx create-react-native-app -t https://github.com/amandeepmittal/react-native-examples/tree/master/expo-template

Commands to trigger an instance of the app in local development mode:

• yarn ios -- open on iOS
• yarn android -- open on Android
• yarn web -- open in the web browser

Screens

• On mobile simulator:

• On web:

File Structure

Expo Template
├── assets ➡️ All static assets
├── components ➡️ All re-suable UI components for screens
│   └── Button.js ➡️ Button component
│   └── Input.js ➡️ TextInput component
│   └── IconButton.js ➡️ Button with icon only component, support different variants from @expo/vector-icons
├── constants ➡️ Color and theme values
│   └── colors.js ➡️ Contain pre-defined color values
│   └── theme.js ➡️ Contain pre-defined custom themes
├── contexts ➡️ Collection of Providers
│   └── ThemeProver.js ➡️ Provider to change theme and persist it with Asyncstorage
├── hooks ➡️ Collection of custom hooks
│   └── useAppearance.js ➡️ Provides access to the theme object across screens
├── navigation
│   └── HomeStack.js ➡️ Routes such as Home & Detail screen
│   └── MainTabs.js ➡️ Routes such as HomeStack & Demo screen
│   └── RootNavigator.js ➡️ Routes wrapped by NavigationContainer
├── screens
│   └── DemoScreen.js ➡️ Screen that hows a little demo of reusable components
│   └── HomeScreen.js ➡️ Home screen
│   └── DetailScreen.js ➡️ Detail screen
│   └── SettingScreen.js ➡️ Screen that allows to switch theme
├── App.js ➡️ Entry Point for Mobile apps
├── app.json ➡️ Expo config file
└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)

Authors

• @amanhimself