|
1 | | -React Native Starter Kit |
2 | | -======= |
| 1 | + |
3 | 2 |
|
4 | | -| | | | | |
5 | | -|---|---|---|---| |
6 | | -|  |  |  |  | |
7 | | -| | | | | |
| 3 | +# React Native Starter Kit |
8 | 4 |
|
9 | | -### Features |
| 5 | +React Native Starter Kit helps you get started with React Native. It contains a bunch of helpful components, building blocks and basic structure to allow you to jump straight into building an app. |
10 | 6 |
|
11 | | -| Feature | Summary | |
12 | | -|---|---| |
13 | | -| [Redux](https://github.com/reactjs/react-redux) | A predictable state container - Helping you write applications that behave consistently and run in different environments. | |
14 | | -| [Sidebar/Hamburger Menu](https://github.com/Kureev/react-native-side-menu) | ... | |
15 | | -| [Google Analytics](https://github.com/idehub/react-native-google-analytics-bridge) | Shows how to track screen views (includes both a 'debug' mode tracker as well as 'release' mode so that data doesn't get obfuscated). | |
16 | | -| [Custom Navbar](https://github.com/Kureev/react-native-navbar) | ... | |
17 | | -| [Icons](https://github.com/oblador/react-native-vector-icons) | Easily use icons from a wide range of icon libraries, it's as simple as importing the icon font and then `<Icon name={'ios-alert-outline'} size={50} color={"#CCC"} />`. | |
18 | | -| [Form Validation](https://github.com/gcanti/tcomb-form-native) | An example on how to create forms with validation. | |
19 | | -| Data persistence | Shows how to persist data, even after closing/reopening the app. | |
20 | | -| Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. | |
21 | | -| An example directory/file structure I've found useful for scaling apps | ... | |
| 7 | + |
| 8 | + |
| 9 | +--- |
22 | 10 |
|
| 11 | +## Docs |
23 | 12 |
|
24 | | -### Screenshots |
| 13 | +1. [Features](#features) |
| 14 | +1. **Before you start** |
| 15 | + 1. [Getting Started with React Native](/docs/react-native.md) |
| 16 | + 1. [React Native Quick Tips](/docs/quick-tips.md) |
| 17 | + 1. [Understanding the File Structure](#understanding-the-file-structure) |
| 18 | + 1. [Opinions Guiding this Project](/docs/opinions.md) |
| 19 | +1. **Using RNSK** |
| 20 | + 1. [Get Up and Running with RNSK](#getting-started) |
| 21 | + 1. [Routing / Navigating](/src/navigation/README.md) |
| 22 | + 1. [Using Google Analytics](/docs/google-analytics.md) |
| 23 | + 1. [Interacting with a REST API](/docs/api.md) |
| 24 | + 1. [Testing](/docs/testing.md) |
| 25 | +1. [Contributing](/docs/contributing.md) |
| 26 | +1. [Licence](LICENSE) |
25 | 27 |
|
26 | | -| | | | |
27 | | -|---|---|---| |
28 | | -|  |  |  | |
29 | | -|  |  |  | |
30 | | -| | | | |
| 28 | +--- |
31 | 29 |
|
32 | | -### Getting Started |
| 30 | +## Features |
| 31 | + |
| 32 | +| Feature | Summary | |
| 33 | +| --- | --- | |
| 34 | +| [Redux](https://github.com/reactjs/react-redux) | A predictable state container - Helping you write applications that behave consistently and run in different environments. | |
| 35 | +| [React Native Router Flux](https://github.com/aksonov/react-native-router-flux) | Router for React Native based on new React Native Navigation API. <br><br>['How to' Guide →](/src/navigation/README.md)| |
| 36 | +| [API Example](/docs/api.md) | A basic example showing how you can interact with a RESTful API with user authentication (JWT). | |
| 37 | +| [Sidebar / Hamburger Menu](https://github.com/react-native-community/react-native-side-menu) | ... | |
| 38 | +| [React Native Elements](https://github.com/react-native-community/react-native-elements) | Cross Platform React Native UI Toolkit. | |
| 39 | +| [Google Analytics](https://github.com/idehub/react-native-google-analytics-bridge) | Shows how to track screen views (includes both a 'debug' mode tracker as well as 'release' mode so that data doesn't get obfuscated). <br><br>[Setup Guide →](/docs/google-analytics.md) | |
| 40 | +| [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) | Easily use icons from a wide range of icon libraries, it's as simple as importing the icon font and then `<Icon name={'ios-alert-outline'} size={50} color={"#CCC"} />`. | |
| 41 | +| [Tcomb Form Validation](https://github.com/gcanti/tcomb-form-native) | An exmaple on how to create forms with validation. | |
| 42 | +| Component Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. | |
| 43 | +| Code Linting / Code Style Guide | We're using [Airbnb's](https://github.com/airbnb/javascript) JS/React Style Guide with ESLint linting. <br><br>[Get started with linting for React Native →](https://medium.com/pvtl/linting-for-react-native-bdbb586ff694) | |
| 44 | +| Boilerplate | An example directory/file structure I've found useful for scaling apps <br><br>[Learn more →](#understanding-the-file-structure) | |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +## Getting Started |
33 | 49 |
|
34 | 50 | 1. Ensure you've followed the [React Native - Get Started Guide](https://facebook.github.io/react-native/docs/getting-started.html) for the platform/s of choice |
35 | | -2. Clone this project |
36 | | -3. Run `npm install` from root directory |
| 51 | +1. Clone this project `git clone https://github.com/mcnamee/react-native-starter-app.git` |
| 52 | +1. Run `npm install` from root directory |
| 53 | +1. Start the app in [an emulator](/docs/quick-tips.md#running-in-an-emulator) |
| 54 | + |
| 55 | +--- |
37 | 56 |
|
38 | | -### Testing |
39 | | -1. `npm run test` |
| 57 | +## Understanding the File Structure |
40 | 58 |
|
41 | | -### Quick Tips |
| 59 | +- `/android` - The native Android stuff |
| 60 | +- `/ios` - The native iOS stuff |
| 61 | +- `/src` - Contains the full React Native App codebase |
| 62 | + - `/components` - 'Dumb-components' / presentational. [Read More →](/src/components/README.md) |
| 63 | + - `/constants` - App-wide variables and config |
| 64 | + - `/containers` - 'Smart-components' / the business logic. [Read More →](/src/containers/README.md) |
| 65 | + - `/images` - Self explanatory right? |
| 66 | + - `/lib` - Utils, custom libraries, functions |
| 67 | + - `/navigation`- Routes - wire up the router with any & all screens. [Read More →](/src/navigation/README.md) |
| 68 | + - `/redux` - Redux Reducers & Actions grouped by type. [Read More →](/src/redux/README.md) |
| 69 | + - `/theme` - Theme specific styles and variables |
42 | 70 |
|
43 | | -| Function | iOS | Android | |
44 | | -|---|---|---| |
45 | | -| **Testing project in an emulator** | <ol><li>Open the /ios/StarterKit.xcodeproj file in Xcode</li><li>Select the iOS simulator then press the Play (triangle) icon at the top left</li></ul> | <ol><li>From terminal, run `android avd`. This will open the Android Virtual Device Manager. Select a device to open. </li><li>In a new terminal window, enter the root directory of the project, then run: `react-native run-android`</li></ul> | |
46 | | -| **Running on Device** | [iOS Guide](https://facebook.github.io/react-native/docs/running-on-device-ios.html) | [Android Guide](https://facebook.github.io/react-native/docs/running-on-device-android.html) | |
47 | | -| **Opening the Debug Menu** | CMD + D | CMD + M | |
48 | | -| **Reload** | CMD + R | Double tap R on your keyboard | |
49 | | -| **App Icons** [I use this tool to generate](https://makeappicon.com/) | /ios/StarterKit/Images.xcassets/AppIcon.appiconset | /android/app/src/main/res/mipmap-*/ic_launcher.png | |
50 | 71 |
|
51 | | -### Any advice? |
52 | 72 |
|
53 | | -Love to hear any feedback or tips to improve - submit an issue or PR. |
|
0 commit comments