shakacode / reactrails-react-native-client Goto Github PK

This repository is for a react-native client to the https://www.reactrails.com/, source at https://github.com/shakacode/react-webpack-rails-tutorial/.

Home Page: http://www.shakacode.com/work

Python 4.67% Java 4.24% JavaScript 78.60% Objective-C 12.49%

reactrails-react-native-client's Introduction

React Native Tutorial

This is a simple mobile app example for posting comments in React Native. It connects the API at https://www.reactrails.com. You can see a web client there, plus links to the source.

Setup

Install the latest version of Xcode from AppStore or https://developer.apple.com/download/ (Apple ID required)
Install the latest version of Android Studio from https://developer.android.com/studio/index.html
Install nvm (Node Version Manager)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

Install NodeJS stable

nvm install node

Install React Native and recommended packages

npm install -g react-native-cli
brew install watchman
brew install flow

Install npm dependencies

npm i

Install Native Dependencies (maybe)

vector-icons

Customization in Native Files

Besides adding vector-icons

App name
Icons, both ios and android

Android

Android Keystore

Edit android/app/src/main/AndroidManifest.xml

Backend API

Currently connecting by default to https://www.reactrails.com/. Be aware of that!
The url can be changed app/api/index.js. Keep in mind, that Android emulator is a separate Virtual Machine with its own localhost binding. To make the api available under that emulator, you will have to use ip address of your computer, which can be seen by running ifconfig in the shell

Running IOS

react-native run-ios

Running Android

Check that installed build tools match gradle config of android project:

In gradle config (app > android > build.gradle), search buildToolsVersion
Run android sdk from bash and find installed build tools version there

Run emulator from Android studio or emulator @<version> from bash (you can find installed version by running emulator -list-avds from bash)
From project folder run

react-native run-android

Testing

Testing framework uses mocha + enzyme, to run tests type

npm test

Linters

This projects uses Eslint with React and React Native rules. To run linters type

npm run lint

Flow

This projects uses Eslint with React and React Native rules. To run linters type

npm run flow

Detailed docs

Can be found in docs folder. See Introduction to start.

reactrails-react-native-client's People

Contributors

Stargazers

Watchers

Forkers

codeponpon jdeppen kaizencodes reinhardt021 raisupdewold swethaudupa wiltonlazary

reactrails-react-native-client's Issues

Add SSL certificate

If we want to ship to App store, then API https connection is required

Need Markdown Support

Not currently handling Markdown.

Usage of Dimensions

https://facebook.github.io/react-native/docs/dimensions.html

@alleycat-at-git I noticed that dimensions are set in style file. Does this work when you move your device from portrait to landscape mode?

Reduce action creator boilerplate

Should we introduce an utils to reduce boilerplate for action creators?

function makeActionCreator(type, ...argNames) {
  return function(...args) {
    let action = { type }
    argNames.forEach((arg, index) => {
      action[argNames[index]] = args[index]
    })
    return action
  }
}

Source: http://redux.js.org/docs/recipes/ReducingBoilerplate.html

Cannot read property style of undefined

I am trying to setup this project on my mac. I ran these commands.

brew install watchman
brew install flow

npm i
react-native run-ios

In my simulator, I am getting this error cannot read property style of undefined.

Add flow

Add basic libraries

Redux
https://github.com/yelouafi/redux-saga ( or https://github.com/gaearon/redux-thunk )
lodash/fp
https://github.com/reactjs/reselect

And let's connect to the same API used by https://github.com/shakacode/react-webpack-rails-tutorial/ for the redux code.

Add absolute path import to app, test and eslint

Add react-native-material-kit

Add https://github.com/xinthink/react-native-material-kit to improve the styling!

Comments

Why not use https://facebook.github.io/react-native/docs/touchableopacity.html#touchableopacity
instead of:

const TouchableElement = Platform.OS === 'android' ?
      TouchableNativeFeedback :
      TouchableHighlight;

Don't you get warnings about missing key?

renderRow={(comment) => <Comment {...comment} />}

Do you normally have actions in Constructor?

constructor(props) {
    super(props);
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = { dataSource: ds.cloneWithRows(this.props.comments) };
    this.props.actions.fetchComments();
  }

I would define dataSource in state like this:

this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) };

ES6 fat arrow functions

I noticed that none of the Redux actions were written with ES6 fat arrow which a more concise syntax. I am updating...

export const setIsFetching = () => ({
  type: actionTypes.SET_IS_FETCHING
});

export function setIsFetching() {
  return {
    type: actionTypes.SET_IS_FETCHING,
  };
}

Explain how initialState is used?

Someone interested to walk me through this and explain it?

import reducers, { initialStates } from '../reducers';

export default () => {
  const { $$commentsState } = initialStates;
  const initialState = {
    $$commentsStore: $$commentsState.merge({
      $$comments: [],
    }),
  };

  const reducer = combineReducers(reducers);
  const composedStore = compose(
    applyMiddleware(thunkMiddleware, loggerMiddleware)
  );

  return composedStore(createStore)(reducer, initialState);
};