-
-
Notifications
You must be signed in to change notification settings - Fork 865
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
189 changed files
with
9,952 additions
and
2,724 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
// Use this file as a starting point for your project's .eslintrc. | ||
// Copy this file, and add rule overrides as needed. | ||
{ | ||
"extends": "airbnb", | ||
"parser": "babel-eslint", | ||
"ecmaFeatures": { | ||
"classes": true, | ||
}, | ||
"rules": { | ||
"react/jsx-filename-extension": ["error", { extensions: [".js", ".jsx"] }], | ||
"global-require": "off", | ||
|
||
// Used for debugging | ||
"no-console": "off", | ||
|
||
// Because we're using directory aliases eg. @component, @config | ||
"import/no-extraneous-dependencies": "off", | ||
"import/extensions": "off", | ||
"import/no-unresolved": "off" | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
*.pbxproj -text |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,53 +1,72 @@ | ||
React Native Starter Kit | ||
======= | ||
![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/rnsk-logo.jpg "React Native Starter Kit") | ||
|
||
| | | | | | ||
|---|---|---|---| | ||
| ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native.png "React Native") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/redux-logo.png "Redux") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/apple-logo.jpg "iOS Ready") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/android-logo.jpg "Android Ready") | | ||
| | | | | | ||
# React Native Starter Kit | ||
|
||
### Features | ||
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. | ||
|
||
| Feature | Summary | | ||
|---|---| | ||
| [Redux](https://github.com/reactjs/react-redux) | A predictable state container - Helping you write applications that behave consistently and run in different environments. | | ||
| [Sidebar/Hamburger Menu](https://github.com/Kureev/react-native-side-menu) | ... | | ||
| [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). | | ||
| [Custom Navbar](https://github.com/Kureev/react-native-navbar) | ... | | ||
| [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"} />`. | | ||
| [Form Validation](https://github.com/gcanti/tcomb-form-native) | An example on how to create forms with validation. | | ||
| Data persistence | Shows how to persist data, even after closing/reopening the app. | | ||
| Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. | | ||
| An example directory/file structure I've found useful for scaling apps | ... | | ||
![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/rnsk-v2-screens.jpg "React Native Starter App") | ||
|
||
--- | ||
|
||
## Docs | ||
|
||
### Screenshots | ||
1. [Features](#features) | ||
1. **Before you start** | ||
1. [Getting Started with React Native](/docs/react-native.md) | ||
1. [React Native Quick Tips](/docs/quick-tips.md) | ||
1. [Understanding the File Structure](#understanding-the-file-structure) | ||
1. [Opinions Guiding this Project](/docs/opinions.md) | ||
1. **Using RNSK** | ||
1. [Get Up and Running with RNSK](#getting-started) | ||
1. [Routing / Navigating](/src/navigation/README.md) | ||
1. [Using Google Analytics](/docs/google-analytics.md) | ||
1. [Interacting with a REST API](/docs/api.md) | ||
1. [Testing](/docs/testing.md) | ||
1. [Contributing](/docs/contributing.md) | ||
1. [Licence](LICENSE) | ||
|
||
| | | | | ||
|---|---|---| | ||
| ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app.png "Default Screen w/ tabs") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-open-menu.png "Sidebar Menu open") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-forms.png "Data validation and persistence") | | ||
| ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-listview.png "List View Example") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-listview2.png "List View Example 2") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-style-guide.png "Style Guide") | | ||
| | | | | ||
--- | ||
|
||
### Getting Started | ||
## Features | ||
|
||
| Feature | Summary | | ||
| --- | --- | | ||
| [Redux](https://github.com/reactjs/react-redux) | A predictable state container - Helping you write applications that behave consistently and run in different environments. | | ||
| [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)| | ||
| [API Example](/docs/api.md) | A basic example showing how you can interact with a RESTful API with user authentication (JWT). | | ||
| [Sidebar / Hamburger Menu](https://github.com/react-native-community/react-native-side-menu) | ... | | ||
| [React Native Elements](https://github.com/react-native-community/react-native-elements) | Cross Platform React Native UI Toolkit. | | ||
| [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) | | ||
| [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"} />`. | | ||
| [Tcomb Form Validation](https://github.com/gcanti/tcomb-form-native) | An exmaple on how to create forms with validation. | | ||
| Component Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. | | ||
| 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) | | ||
| Boilerplate | An example directory/file structure I've found useful for scaling apps <br><br>[Learn more →](#understanding-the-file-structure) | | ||
|
||
--- | ||
|
||
## Getting Started | ||
|
||
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 | ||
2. Clone this project | ||
3. Run `npm install` from root directory | ||
1. Clone this project `git clone https://github.com/mcnamee/react-native-starter-app.git` | ||
1. Run `npm install` from root directory | ||
1. Start the app in [an emulator](/docs/quick-tips.md#running-in-an-emulator) | ||
|
||
--- | ||
|
||
### Testing | ||
1. `npm run test` | ||
## Understanding the File Structure | ||
|
||
### Quick Tips | ||
- `/android` - The native Android stuff | ||
- `/ios` - The native iOS stuff | ||
- `/src` - Contains the full React Native App codebase | ||
- `/components` - 'Dumb-components' / presentational. [Read More →](/src/components/README.md) | ||
- `/constants` - App-wide variables and config | ||
- `/containers` - 'Smart-components' / the business logic. [Read More →](/src/containers/README.md) | ||
- `/images` - Self explanatory right? | ||
- `/lib` - Utils, custom libraries, functions | ||
- `/navigation`- Routes - wire up the router with any & all screens. [Read More →](/src/navigation/README.md) | ||
- `/redux` - Redux Reducers & Actions grouped by type. [Read More →](/src/redux/README.md) | ||
- `/theme` - Theme specific styles and variables | ||
|
||
| Function | iOS | Android | | ||
|---|---|---| | ||
| **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> | | ||
| **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) | | ||
| **Opening the Debug Menu** | CMD + D | CMD + M | | ||
| **Reload** | CMD + R | Double tap R on your keyboard | | ||
| **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 | | ||
|
||
### Any advice? | ||
|
||
Love to hear any feedback or tips to improve - submit an issue or PR. |
75 changes: 0 additions & 75 deletions
75
ReactApp/components/__tests__/__snapshots__/alerts-tests.js.snap
This file was deleted.
Oops, something went wrong.
51 changes: 0 additions & 51 deletions
51
ReactApp/components/__tests__/__snapshots__/button-tests.js.snap
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.