diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..c540a682 --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,18 @@ + + +### Help us reproduce - tell us about your environment + + +1. + +### Steps to reproduce + +1. + +### Expected result + +1. + +### Actual result + +1. [Screenshot, logs] diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..5707a0fb --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Matt Mcnamee + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index e10bdec9..1477237a 100644 --- a/README.md +++ b/README.md @@ -5,130 +5,90 @@ [![GitHub closed issues](https://img.shields.io/github/issues-closed/mcnamee/react-native-starter-app.svg?style=flat-square)](https://github.com/mcnamee/react-native-starter-app/issues-closed) [![GitHub pull requests](https://img.shields.io/github/issues-pr/mcnamee/react-native-starter-app.svg?style=flat-square)](https://github.com/mcnamee/react-native-starter-app/issues-pr) -![alt text](/docs/rnsk-logo.jpg "React Native Starter Kit") +# React (Web + Native) Starter Kit -# React Native Starter Kit +#### For when you're looking to build 'the next big thing' for both web and native mobile. -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. - -What's more, it's now integrated with [Firebase](https://firebase.google.com/), to help you kick start your next full-stack product. - -![alt text](/docs/rnsk-screens.jpg "React Native Starter App") - - -## Available Scripts - -### `npm start` - -Runs your app in development mode - instructions will be provided in the terminal. - -#### `npm test` - -Runs the [jest](https://github.com/facebook/jest) test runner on your tests. - -#### `npm run web` - -Kicks off a webpack server on port 3001, it utilizes hot reloading with some redux-time-machine-magic to have a crazy awesome dev experience where you can rewind and revert actions in your application. - -In your browser, open http://localhost:3001 - -#### `npm run web-bundle` - -Creates a minified JavaScript bundle (that also houses the minified css) and places it next to the index.html in web/public that you can serve with any static file server. +--- -#### `npm run eject` +## 👋 Intro + +This boilerplate launches with a [React web app](https://reactjs.org/) and [React Native app](https://facebook.github.io/react-native/) sharing a single code base. It shares the 'business logic' (_i.e. actions, containers, reducers_) across the platforms, whilst allowing flexibility in View components to ensure your project looks and feels native in each platform. + +The project is _super_ helpful to kick-start your next project, as it provides a lot of the common tools you may reach for, all ready to go. Specifically: + +- A shared React and React Native structure +- __Flux architecture__ + - [Redux](https://redux.js.org/docs/introduction/) +- __Routing and navigation__ + - [React Native Router Flux](https://github.com/aksonov/react-native-router-flux) for native mobile + - [React Router](https://github.com/ReactTraining/react-router) for web +- __Data Caching / Offline__ + - [Redux Persist](https://github.com/rt2zz/redux-persist) +- __UI Toolkit/s__ + - [Native Base](https://nativebase.io/) for native mobile + - [Bootstrap](https://getbootstrap.com/) for web +- __Simpler mobile app development__ through + - [Expo](https://expo.io/) +- __User authentication__ example through + - [Firebase](https://firebase.google.com/) +- __API/Data example__ + - Shows how to read/write data from/to an external API (in our case, [Firebase](https://firebase.google.com/)) +- __Code Linting__ with + - [Airbnb's JS Linting](https://github.com/airbnb/javascript) guidelines -This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project. +--- -**Warning:** Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an [Xcode and/or Android Studio environment](https://facebook.github.io/react-native/docs/getting-started.html) set up. +## 📖 Docs -## Customizing App Display Name and Icon +- [Setup your own Firebase](/docs/firebase.md) +- [Understanding the file structure](/docs/file-structure.md) +- [FAQs & Opinions](/docs/faqs.md) +- [Testing, Deploying & Publishing](/docs/publishing.md) +- [Tests & testing](/docs/testing.md) +- [Contributing to this project](/docs/contributing.md) -You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key. +--- -To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string. +## 🚀 Getting Started -To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency. +#### 1. Clone and Install -## Writing and Running Tests +```bash +# Clone the repo +git clone https://github.com/mcnamee/react-native-starter-app.git -This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test` extension to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/App.test.js) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html). +# Install dependencies +npm i +``` -## Sharing and Deployment +#### 2.1. Run the _React Native_ App -Create React Native App does a lot of work to make app setup and development simple and straightforward, but it's very difficult to do the same for deploying to Apple's App Store or Google's Play Store without relying on a hosted service. +```bash +# Start the React Native packager +npm start +``` -### Publishing to Expo's React Native Community +Instructions are shown in the terminal. You can select to open it in: -Expo provides free hosting for the JS-only apps created by CRNA, allowing you to share your app through the Expo client app. This requires registration for an Expo account. +- An emulator (either iOS or Android) +- Your mobile device with the [Expo app](https://expo.io/). It will reload if you save edits to your files and you will see build errors and logs in the terminal. -Install the `exp` command-line tool, and run the publish command: +#### 2.2. Run the _Web_ App +```bash +# Starts are local live-reload server at: +# http://localhost:3001 +npm run web ``` -$ npm i -g exp -$ exp publish -``` - -### Building an Expo "standalone" app - -You can also use a service like [Expo's standalone builds](https://docs.expo.io/versions/latest/guides/building-standalone-apps.html) if you want to get an IPA/APK for distribution without having to build the native code yourself. -### Ejecting from Create React Native App +Via webpack, starts a localhost server on port 3001 [http://localhost:3001](http://localhost:3001). -If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio. - -This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html). +- Save code and it auto refreshes +- Install [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) into Chrome to see the state of Redux --- -## The API & testing out authentication -We've created a quick little "API server" on [Google's Firebase Platform](https://firebase.google.com/). You can get your own API up and running within minutes too: - -1. Signup for a [Firebase account](https://firebase.google.com/) -1. Create a new project - eg. "React Native Starter App" -1. Turn on email/password __Authentication__ -1. Enable the __Database__ feature, and import the `firebase-sample-data.json` file found in this repo -1. Get the Firebase project's API credentials, and add them to the respective variables in your `/.env` file (eg. `APIKEY=d8f72k10s39djk29js`). You can get your projects details from Firebase, by clicking on the cog icon, next to overview > 'Add Firebase to your web app'. -1. Add the following __rules__ to the Database - -```json -{ - "rules": { - ".read": false, - ".write": false, - - "meals": { - ".read": true - }, - - "recipes": { - ".read": true, - ".indexOn": ["category"] - }, - - "users": { - "$uid": { - ".read": "auth != null && auth.uid == $uid", - ".write": "auth != null && auth.uid == $uid", - - "firstName": { ".validate": "newData.isString() && newData.val().length > 0" }, - "lastName": { ".validate": "newData.isString() && newData.val().length > 0" }, - "lastLoggedIn": { ".validate": "newData.val() <= now" }, - "signedUp": { ".validate": "newData.val() <= now" }, - "role": { - ".validate": "(root.child('users/'+auth.uid+'/role').val() === 'admin' && newData.val() === 'admin') || newData.val() === 'user'" - } - } - }, - - "favourites": { - "$uid": { - ".read": "auth != null && auth.uid == $uid", - ".write": "auth != null && auth.uid == $uid" - } - } - } -} -``` +## 👊 Further Help? -Want to experiment even more with Firebase? Check out the [Firebase Cloud Functions](/docs/README.md) +This repo is a great place to start, but if you'd prefer to sit back and have your new project built for you, [get in touch with me directly](https://mcnam.ee) and I can organise a quote. diff --git a/app.json b/app.json index dc020d30..b51e0c22 100644 --- a/app.json +++ b/app.json @@ -1,5 +1,6 @@ { "expo": { - "sdkVersion": "22.0.0" + "sdkVersion": "22.0.0", + "privacy": "public" } } diff --git a/docs/contributing.md b/docs/contributing.md index 3b691207..e7435d92 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -11,15 +11,15 @@ Please follow [Airbnb's Name Conventions](https://github.com/airbnb/javascript#n ## File Structure & Naming Conventions - __Structure__ - - Follow the file structure [outlined above](#32-file-structure) + - Follow the existing file structure - __Files__ - Should be `lowercase`, with words separated by hyphens (`-`) eg. `logo-cropped.jpg` - With the exception of Containers and Components, which should be `PascalCase` - eg. `RecipeView.js` - __Directories__ - Folder names should be `lowercase,` with words separated by a hyphen (`-`) - eg. `/components/case-studies` - Folders and files can be named singlular or plural - do what sounds right -- If there's more than 1 file in a directory that are related, group them within their own directory - - eg. if I have 2 components: `/components/RecipeListing.js` and `/components/RecipeView.js`, create a new directory within components called `recipes` and put the 2 files within (removing `Recipes`). The result would be: `/components/recipes/Listing.js` and `/components/recipes/View.js` +- If there's more than a few files in a directory that are related, group them within their own directory + - eg. if I have 2 components: `/components/RecipeListing.js` and `/components/RecipeView.js`, I may choose to create a new directory within components called `recipes` and put the 2 files within (removing `Recipes`). The result would be: `/components/recipes/Listing.js` and `/components/recipes/View.js` ## Linting diff --git a/docs/faqs.md b/docs/faqs.md new file mode 100644 index 00000000..c15177d5 --- /dev/null +++ b/docs/faqs.md @@ -0,0 +1,47 @@ +# FAQs + +## Where did you come up with this? + +By no means is this the 'right' or 'only' way to build a React or React Native App. We have however, worked on various apps built with React and React Native, that are 'in the wild' right now. So the ideas presented here are simply based on experience. + +## Code Style Guide? + +We're using [Airbnb's](https://github.com/airbnb/javascript) JS/React Style Guide with ESLint linting. We just like it :) + +## Is this a "Universal" app? + +To be clear, No it isn't. We've tried sharing absolutely everything across web and native mobile apps - and have run into road blocks where we've needed to undo the "universalism". + +Our opinion for performant and maintainable solutions, is to: + +- Share things like data structures, libraries and business logic +- And hand craft optimal user-interfaces for each platform + +## React, hah? How do I? + +[React Native Express](http://www.reactnativeexpress.com/) is a great site to get you started, specifically: + +- [Get your head around ES6](http://www.reactnativeexpress.com/es6) +- [What is JSX?](http://www.reactnativeexpress.com/jsx) +- [What are Components?](http://www.reactnativeexpress.com/components) +- [React State](http://www.reactnativeexpress.com/data_component_state) +- [Redux](http://www.reactnativeexpress.com/redux) + +Once you've got your head around the basics, checkout the [React Native](https://facebook.github.io/react-native/) and [React](https://reactjs.org/) websites, specifically + +- Go through ['The Basics'](https://facebook.github.io/react-native/docs/props.html) +- Gain an understanding of the [components](https://facebook.github.io/react-native/docs/activityindicator.html) React Native provides out of the box + +## How do I customize the App Display Name and Icon? + +You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key. + +To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string. + +To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency. + +## How do I eject from 'Create React Native App' and Expo? + +If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio. + +This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html). diff --git a/docs/file-structure.md b/docs/file-structure.md new file mode 100644 index 00000000..4f751c74 --- /dev/null +++ b/docs/file-structure.md @@ -0,0 +1,20 @@ +# Understanding the File Structure + +- `/docs` - Github Repo Documentation +- `/firebase` - Firebase samples +- `/native-base-theme` - React Native's theme (by NativeBase) +- `/src` - Contains the source code for both web & native + - `/actions` - Redux Actions - payloads of information that send data _from_ your application _to_ your store. [Read More →](https://redux.js.org/docs/basics/Actions.html) + - `/constants` - Shared variables (across platforms) + - `/containers` - 'Smart-components' that connect business logic to presentation [Read More →](https://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components) + - `/lib` - Utils and custom libraries that are shared across platforms + - `/native` - React Native specific code + - `/components` - 'Dumb-components' / presentational. [Read More →](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) + - `/constants` - Native-specific variables and config + - `/routes`- wire up the router with any & all screens [Read More →](https://github.com/aksonov/react-native-router-flux) + - `/reducers`- Redux Reducers - Actions dispatch to reducers, which actually change the state [Read More →](https://redux.js.org/docs/basics/Reducers.html) + - `/store`- Redux Store - hooks up the stores and provides initial/template states [Read More →](https://redux.js.org/docs/basics/Store.html) + - `/web` - React-Web specific code + - `/components` - 'Dumb-components' / presentational. [Read More →](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) + - `/routes`- wire up the router with any & all screens [Read More →](https://github.com/aksonov/react-native-router-flux) + - `/styles`- all the SCSS you could dream of diff --git a/docs/firebase.md b/docs/firebase.md new file mode 100644 index 00000000..c1fdfd31 --- /dev/null +++ b/docs/firebase.md @@ -0,0 +1,52 @@ +# Get Started with Firebase + +We've created a quick little "API server" on [Google's Firebase Platform](https://firebase.google.com/). You can get your own API up and running within minutes too: + +1. Signup for a [Firebase account](https://firebase.google.com/) +1. Create a new project - eg. "React Native Starter App" +1. Turn on email/password __Authentication__ +1. Enable the __Database__ feature, and import the `firebase-sample-data.json` file found in this repo +1. Get the Firebase project's API credentials, and add them to the respective variables in your `/src/constants/firebase.js` file. You can get your projects details from Firebase, by clicking on the cog icon, next to overview > 'Add Firebase to your web app'. +1. Add the following __rules__ to the Database + +```json +{ + "rules": { + ".read": false, + ".write": false, + + "meals": { + ".read": true + }, + + "recipes": { + ".read": true, + ".indexOn": ["category"] + }, + + "users": { + "$uid": { + ".read": "auth != null && auth.uid == $uid", + ".write": "auth != null && auth.uid == $uid", + + "firstName": { ".validate": "newData.isString() && newData.val().length > 0" }, + "lastName": { ".validate": "newData.isString() && newData.val().length > 0" }, + "lastLoggedIn": { ".validate": "newData.val() <= now" }, + "signedUp": { ".validate": "newData.val() <= now" }, + "role": { + ".validate": "(root.child('users/'+auth.uid+'/role').val() === 'admin' && newData.val() === 'admin') || newData.val() === 'user'" + } + } + }, + + "favourites": { + "$uid": { + ".read": "auth != null && auth.uid == $uid", + ".write": "auth != null && auth.uid == $uid" + } + } + } +} +``` + +Want to experiment even more with Firebase? Check out the [Firebase Cloud Functions](/firebase/README.md) diff --git a/docs/opinions.md b/docs/opinions.md deleted file mode 100644 index 0266d158..00000000 --- a/docs/opinions.md +++ /dev/null @@ -1,32 +0,0 @@ -# Opinions Guiding this Project - -By no means is this the 'right' or 'only' way to build a React Native App. We have however, worked on various apps built with React Native, that are 'in the wild' right now. So the ideas presented here are simply based on our experience. - -We hope to explain our opinions here - but keep in mind they may change over time as we learn more. - -## Create wrapper components - -You'll notice in `/src/components/ui/` that we have various UI elements - some of them don't do much more than call the default React Native component and pass in a style. - -We do this: - -- so that we can pass in default props - eg. default styles or perhaps a default activeOpacity -- if an API changes, or perhaps we want to switch out a library, we can do it in one place - not throughout the entire codebase - -## Code Style Guide - -We're using [Airbnb's](https://github.com/airbnb/javascript) JS/React Style Guide with ESLint linting. We just like it :) - -## React Native Directory Aliases - -We import files absolutely like so: - -``` -import Error from '@components/general/Error' -``` - -Because it's: - -- less confusing to write - no more trying to figure out how deeply you're nested when importing files -- simpler to read -- when you move a file, it's easier to find/replace - the imports are always the same diff --git a/docs/publishing.md b/docs/publishing.md new file mode 100644 index 00000000..ef86b457 --- /dev/null +++ b/docs/publishing.md @@ -0,0 +1,34 @@ +# Deploying & Publishing + +## 🖥 Web + +### Packaging for Web + +``` +npm run web-bundle +``` + +Creates a minified JavaScript bundle (that also houses the minified css) and places it next to the index.html in web/public that you can serve with any static file server. + +--- + +## 📱 React Native + +### Publishing to Expo's React Native Community for testing + +Expo provides free hosting for the JS-only apps created by CRNA, allowing you to share your app through the Expo client app. This requires registration for an Expo account. + +Install the `exp` command-line tool, and run the publish command: + +``` +$ npm i -g exp +$ exp publish +``` + +### Deploying to the App / Play Store https://docs.expo.io/versions/latest/introduction/already-used-react-native.html#deploying-to-the-app--play-store + +Check out [Expo's docs](https://docs.expo.io/versions/latest/introduction/already-used-react-native.html#deploying-to-the-app--play-store). + +### Building an Expo "standalone" app for the app store + +You can also use a service like [Expo's standalone builds](https://docs.expo.io/versions/latest/guides/building-standalone-apps.html) if you want to get an IPA/APK for distribution without having to build the native code yourself. diff --git a/docs/quick-tips.md b/docs/quick-tips.md deleted file mode 100644 index d9075e2b..00000000 --- a/docs/quick-tips.md +++ /dev/null @@ -1,34 +0,0 @@ -# React Native Quick Tips - -## Running in an Emulator - -### iOS - -- Open the /ios/StarterKit.xcodeproj file in Xcode -- Select the iOS simulator then press the Play (triangle) icon at the top left - -### Android - -- From terminal, run `android avd`. This will open the Android Virtual Device Manager. Select a device to open. -- In a new terminal window, enter the root directory of the project, then run: `react-native run-android` - -## 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 - -- **iOS** - CMD + D -- **Android** - CMD + M - -## Reload - -- **iOS** - CMD + R -- **Android** - Double tap R on your keyboard - -## App Icons - -- [Generate the Icons](https://makeappicon.com/) - - **iOS** - Place the contents into: `/ios/StarterKit/Images.xcassets/AppIcon.appiconset` - - **Android** - Place the contents into: `/android/app/src/main/res/mipmap-*/ic_launcher.png` diff --git a/docs/react-native.md b/docs/react-native.md deleted file mode 100644 index fb766b70..00000000 --- a/docs/react-native.md +++ /dev/null @@ -1,26 +0,0 @@ -# Getting Started with React Native - -## Setting Up Your Machine for App Development - -- iOS (You require a Mac to develop iOS Apps) Simply download XCode -- [Android on Mac](https://medium.com/pvtl/react-native-android-development-on-mac-ef7481f65e47#.w2hel88zy) -- Android on Windows - coming soon... - -## Install React Native - -[React Native - Get Started Guide](https://facebook.github.io/react-native/docs/getting-started.html) - -## Learn React - -[React Native Express](http://www.reactnativeexpress.com/) is a great site to get you started, specifically: - -- [Get your head around ES6](http://www.reactnativeexpress.com/es6) -- [What is JSX?](http://www.reactnativeexpress.com/jsx) -- [What are Components?](http://www.reactnativeexpress.com/components) -- [React State](http://www.reactnativeexpress.com/data_component_state) -- [Redux](http://www.reactnativeexpress.com/redux) - -Once you've got your head around the basics, checkout the [React Native](https://facebook.github.io/react-native/) website, specifically: - -- Go through ['The Basics'](https://facebook.github.io/react-native/docs/props.html) -- Gain an understanding of the [components](https://facebook.github.io/react-native/docs/activityindicator.html) React Native provides out of the box diff --git a/docs/renaming.md b/docs/renaming.md deleted file mode 100644 index 10140398..00000000 --- a/docs/renaming.md +++ /dev/null @@ -1,18 +0,0 @@ -# Renaming the App from StarterKit - -You've cloned the project and you're wanting to make it your own. But..."StarterKit". -With one command, [React Native Rename](https://github.com/JuneDomingo/react-native-rename) will replace all files, directories and references of 'StarterKit' to what ever you'd like. - -## Install the Package - -``` -npm install react-native-rename -g -``` - -## Rename the App - -``` -react-native-rename YourNewApp -``` - -Piece of :cake: diff --git a/docs/testing.md b/docs/testing.md index 8c60765a..4f5a65a1 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -8,6 +8,14 @@ Want to check if your code is formatted consistently + pick up on any syntax err ./node_modules/.bin/eslint "src/**/*.js" ``` +## Writing and Running Tests + +This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test` extension to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/App.test.js) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html). + +#### `npm test` + +Runs the [jest](https://github.com/facebook/jest) test runner on your tests. + ## Jest Snapshots Run `npm test` to run a test add `-- --watch` to run it in developer mode. diff --git a/firebase-sample-data.json b/firebase-sample-data.json deleted file mode 100644 index 4d32f491..00000000 --- a/firebase-sample-data.json +++ /dev/null @@ -1,282 +0,0 @@ -{ - "users": { - }, - "favourites": { - }, - "meals": [ - { - "id": 1, - "title": "Lunch" - }, - { - "id": 2, - "title": "Dinner" - } - ], - "recipes" : [ - { - "id": 1, - "slug": "this-is-an-article", - "title": "This is an Article", - "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 1, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-1.jpg?alt=media&token=9f7c839b-2d40-4660-a2a0-bf6c2f64a2e5", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 2, - "slug": "dummy-text-of-the-printing", - "title": "Dummy text of the printing", - "body": "Typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "Jane Doe", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-2.jpg?alt=media&token=6ed1740b-529b-4772-9a92-615e92b544b2", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 3, - "slug": "survived-not-only-five", - "title": "Survived not only five", - "body": "Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "Jane Doe", - "category": 1, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-3.jpg?alt=media&token=ad0c1913-fd82-48fa-937c-4298875544fa", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 4, - "slug": "standard-dummy-text-ever", - "title": "Standard dummy text ever", - "body": "Has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-4.jpg?alt=media&token=52d5ab1a-98af-42cb-adaf-da04666a7953", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 5, - "slug": "remaining-essentially-unchanged", - "title": "Remaining essentially unchanged", - "body": "Industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-1.jpg?alt=media&token=9f7c839b-2d40-4660-a2a0-bf6c2f64a2e5", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 6, - "slug": "only-five-centuries", - "title": "Only five centuries", - "body": "Standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-2.jpg?alt=media&token=6ed1740b-529b-4772-9a92-615e92b544b2", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 7, - "slug": "but-also-the-leap-into", - "title": "But also the leap into", - "body": "Dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "Jane Doe", - "category": 1, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-1.jpg?alt=media&token=9f7c839b-2d40-4660-a2a0-bf6c2f64a2e5", - "ingredients": [ - "aute irure dolor in", - "sed do eiusmod tempor incididunt", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "iste natus error sit voluptatem accusantium doloremque laudantium", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 8, - "slug": "electronic-typesetting", - "title": "Electronic typesetting", - "body": "Text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-1.jpg?alt=media&token=9f7c839b-2d40-4660-a2a0-bf6c2f64a2e5", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 9, - "slug": "essentially-unchanged", - "title": "Essentially unchanged", - "body": "Industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-2.jpg?alt=media&token=6ed1740b-529b-4772-9a92-615e92b544b2", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 10, - "slug": "standard-text", - "title": "Standard text", - "body": "Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "Jane Doe", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-1.jpg?alt=media&token=9f7c839b-2d40-4660-a2a0-bf6c2f64a2e5", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 11, - "slug": "but-also", - "title": "But also", - "body": "Industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-3.jpg?alt=media&token=ad0c1913-fd82-48fa-937c-4298875544fa", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - }, - { - "id": 12, - "slug": "text-but-also", - "title": "Text But also", - "body": "Industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.", - "author": "John Smith", - "category": 2, - "image": "https://firebasestorage.googleapis.com/v0/b/react-native-starter-app.appspot.com/o/image-2.jpg?alt=media&token=6ed1740b-529b-4772-9a92-615e92b544b2", - "ingredients": [ - "sed do eiusmod tempor incididunt", - "aute irure dolor in", - "do eiusmod tempor", - "uis aute irure dolor in", - "doloremque laudantium", - "cupidatat non proident" - ], - "method": [ - "iste natus error sit voluptatem accusantium doloremque laudantium", - "magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet", - "sed quia non numquam eius modi tempora incidunt ut labore" - ] - } - ] -} diff --git a/package.json b/package.json index 44aed9db..e7031daa 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js --watch", "web": "webpack-dev-server --content-base src/web/ --config webpack/web.dev.config.js --port 3001 --inline --hot --colors --historyApiFallback", - "web-bundle": "webpack --config webpack/web.prod.config.js --progress --colors --historyApiFallback", + "web-bundle": "webpack --config webpack/web.prod.config.js", "clear-cache": "gulp clear-cache" }, "jest": { diff --git a/src/web/index.js b/src/web/index.js index ecae6e01..5444cf45 100755 --- a/src/web/index.js +++ b/src/web/index.js @@ -6,7 +6,7 @@ import { BrowserRouter as Router } from 'react-router-dom'; import { PersistGate } from 'redux-persist/es/integration/react'; import configureStore from '../store/index'; -import registerServiceWorker from './registerServiceWorker'; +import registerServiceWorker from './register-service-worker'; import Routes from './routes/index'; // Components diff --git a/src/web/registerServiceWorker.js b/src/web/register-service-worker.js similarity index 100% rename from src/web/registerServiceWorker.js rename to src/web/register-service-worker.js