strangeluv-native

Notable differences between strangeluv-native and strangeluv

• strangeluv-native is a boilerplate for react-native. strangeluv is a boilerplate for react-web.
• routes in react-web are now referred to as scenes.
• Using react-navigation as prescribed in this project, there is the concept of navigators. You've got StackNavigator, TabNavigator, and DrawerNavigator given by react-navigation. Other libraries like react-native-material-bottom-navigation can integrate with react-navigation. This bottom-navigation library can be used as a TabNavigator in react-navigation. Here's a recipe for strangeluv-native implementing react-native-material-bottom-navigation

Renaming the project: This must be done before any other coding, even before npm install

Note: No spaces or capitals are allowed in the app name

See the Section on #Renaming below

> How I Learned to Stop Worrying and Love React Native

Here you find a fork of this React/Redux starter kit. We've made it our own. We've also stolen most of this README from strangeluv. In here you'll find react-native, Redux, and a well-architected workflow that uses react-native's own Packager instead of Webpack. Follow the file-structure in this boilerplate to profit from well-thought, battle-proven code separation patterns used in strangeluv for react-web.

Table of Contents

1. Toolset
2. Requirements
3. Getting Started
4. Application Structure
5. Development
6. Thank You

Toolset

• react
• react-native
• redux
• react-navigation
• babel
• eslint

Requirements

# Only been used with
* react-native `0.41.2`

Getting Started

Setup your environment (Get ANDROID_HOME var all set, install xCode if ur on a Mac) See this Getting Started guide on Facebook's Github: https://facebook.github.io/react-native/docs/getting-started.html

After that, in terminal:

$ npm install -g react-native
$ git clone https://github.com/wswoodruff/strangeluv-native
$ mv strangeluv-native my-project
$ cd my-project   # Then adjust package.json and readme as necessary

# Rename your project at this point. See [#Renaming](#Renaming)
# ** No uppercase spaces or capitals in your app name **, or Android will give you problems.

$ npm install     # Install project dependencies
$ npm run dev     # Compile and launch to iOS

If all goes well you should see something like this,

| A bunch of lines printing to the console
| The iOS simulator pops up (Assuming you ran `npm run dev`)
| Another console suddenly appears
| Lines run, stuff happens, maybe the whole screen turns red idk figure it out
| You see a duck.

npm run <script>	Description
dev	Starts the app in an iOS simulator

Renaming

$ npm install -g react-native-rename
$ # cd to your app's root directory
$ react-native-rename mynewprojectname # No spaces or capitals are allowed or this won't work on Android!
$ # I previously had this line: grep -e 'strangeluvnative' -rl . | xargs sed -i '' 's/strangeluvnative/mynewprojectname/g'
$ # but it was proven as non-working on another computer, so I can't have you typing it. If you'd like to PR
$ # a better find-and-replace one-liner or short script for this, that'd be welcome. 

Now inside your ios folder, rename all of the top-level files and folders to your project's name.

Now, if you've worked on another react-native project, you may need to clear your watchman cache, and you may be met with a red screen.

If you've been working on other react-native projects, do these steps:

$ # If you ran npm install by this point, go ahead and rm -rf node_modules
$ watchman watch-del-all
$ rm -fr $TMPDIR/react-*

Application Structure

Note the nestable scenes/.

.
├── android/                 # Android app folder project (managed by react-native)
├── config/                  # Project configuration settings
├── ios/                     # Android app folder project (managed by react-native)
├── src/                     # Application source code
│   ├── index.js             # Application bootstrap and rendering
│   ├── action-types/        # Action types
│   ├── actions/             # Action creators
│   ├── reducers/            # Redux reducers
│   ├── components/          # Reusable UI-only (dumb/stateless) components
│   ├── containers/          # Reusable container (smart/stateful) components
│   ├── navigators/          # Contains the app's main navigator
│   ├── static/              # Static assets (not imported anywhere in source code)
│   ├── styles/              # Application-wide styles
│   ├── wiring/              # Wiring between Redux and the app
│   └── scenes/              # Main scene definitions and async split points
│       ├── index.js         # Bootstrap main application scenes with store, connect with app navigator
│       └── home/            # Fractal route
│           ├── index.js     # Route definitions and async split points
│           ├── $$$/         # Any folders you might find under src/ like reducers/, etc.
│           └── scenes/      # Nested scenes
│           └── navigators/  # Nested navigators
│           └── components/  # Nested components
│           └── containers/  # Nested containers
└── tests                    # Unit tests

Reducer wiring

The automatic wiring of reducers found in strangeluv is not yet available in strangeluv-native. This will have to be done via gulp scripts to grab files in the reducers folder and insert them into an array Issue here. Reducers can be injected asynchronously (usually for code-splitting within a child route) as such:

const Reducers = require('wiring/reducers');

// Let store be the app's store and myReducer be a new reducer

Reducers.inject(store, { key: 'reducerName', reducer: myReducer });

You can find an implementation of an async reducer in the app's navigator

Style Guide: A note on file- and directory-naming

Files should be named with dash-case.js except in the case of containers or components, which should use PascalCase.js. This includes reducer, action, and action-type files. Filenames need not repeat information specified by their directory names. For example, containers/Counter.js or containers/Counter/index.js are preferred over containers/CounterContainer.js or containers/CounterContainer/CounterContainer.js. The container may still be required into a file using the "full name" e.g.,

const CounterContainer = require('./containers/Counter');

Omitting the .js extension in calls to require() is preferred, as it allows one to transition a simple module at components/Counter.js to a complex module with its own internals at components/Counter/index.js without affecting how it is referenced.

Development

Style

We favor the hapi style guide. Yes, even when coding for the browser or for react-native! The idea is to maintain fluency for developers who work both on the server, browser, and in react-native. It is supposed to be the same language, after all! Node and V8 move fast enough on their own, so we plan to keep up-to-date with that ecosystem rather than the hyperspeed with which transpilers make available incompletely-spec'd JS features. It's worth noting that for the time being that includes ES6 modules. We additionally have some standard React lint rules. Just npm run lint to see how you're doing!

Developer Tools

Does not yet work with the Redux DevTools Chrome Extension nor React DevTools Chrome Extension, but this is in the works! Issue links, respectively: Redux DevTools and React DevTools.

Routing

We use react-navigation navigator definitions and route definitions (<route>/index.js)

to define units of logic within our application. See the application structure section for more information.

Recipes

• Incorporating bottom navigation using react-native-material-bottom-navigation [here]

Deployment

For development (npm run dev)

Runs a react-native Packager build with HMR currently for views only.

For production

Run react-native commands to publish your apps.

Styles

Styles are currently done using .js files, with react-native StyleSheet settings.

Thank You

• Bigroom Studios, Devin Ivy and contributors - for creating strangeluv
• Dave Zuko - for creating the boilerplate that strangeluv forked (at v3). It contains a huge amount of effort from dozens of collaborators, and made for a fantastic start.