GithubHelp home page GithubHelp logo

chentsulin / react-native-counter-ios-android Goto Github PK

View Code? Open in Web Editor NEW
238.0 10.0 59.0 683 KB

Minimal implement of redux counter example on ReactNative iOS and Android

JavaScript 51.69% Objective-C 28.46% Java 9.16% Python 10.69%

react-native-counter-ios-android's Introduction

react-native-counter-ios-android

Minimal implement of redux counter example on ReactNative iOS and Android

I don't use any syntax out of React Native's enabled transformations, so no any patch on ReactNative is needed.

  • react - v15.4
  • react-native v0.39
  • redux v3
  • react-redux v4
  • redux-thunk v2
  • remote-redux-devtools v0.5

How to run this Porject

Setup iOS and Android env

see

Install npm dependecies

npm i

run iOS

Open ios/ReduxCounterUniversal.xcodeproj and hit run in Xcode.

or

react-native run-ios

run Android

emulator -avd [your_emulator_name] -gpu on &
react-native run-android

On Mac using fn + F2 to open debug panel

Also you can use adb logcat to log some android debug messages.

adb logcat -s 'ReactNative'

Remote devtools

chrome app (recommended)

See remote-redux-devtools for more information

Upgrade Guide

React Native Upgrading

Maintainers

License

MIT ยฉ C. T. Lin

react-native-counter-ios-android's People

Contributors

chentsulin avatar chiara-yen avatar zalmoxisus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-counter-ios-android's Issues

Roadmap

  • React v15 - waiting for react-natvie v0.26
  • HMR
  • Improve UI
  • Testing
  • Run on real device guide

Can't run on Android Phone

When it run on my android Phone . Like this

123

This can be fixed on React Native 0.40.0

Please upgrade React Native Version in package.json

I have a question

At component ,when perform the sync dispatch,use onPress={inCrement},perform the Async dispatch,using onPress={() => decrementAsync()}.What difference two dispatch?

Can't run on ios - ":CFBundleIdentifier", Does Not Exist

I done this steps:
npm i
react-native run-ios

I got this error:
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ReduxCounterUniversal.app/Info.plist Print: Entry, ":CFBundleIdentifier", Does Not Exist
What I'm doing wrong?

Integrate redux with Navigator

Hi,

First, cheers for your great work.

I might no be good using redux well, but I cannot make it work with React Native Router Flux.

I simply connect redux to the router like this :

var { bindActionCreators } = require('redux');
var { connect } = require('react-redux/native');
var Router = require('./Router');
var CounterActions = require('./actions/counter');

function mapStateToProps(state) {
  return {
    counter: state.counter
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(CounterActions, dispatch);
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(Router);

And my Router look like this :

'use strict';

var React = require('react-native');
var {Router, Route, Actions, Animations, Schema} = require('react-native-router-flux');

var Counter = require('./components/Counter');

var RouterModule = React.createClass({
    render: function() {
        console.log('FROM ROUTER  : ',this.props.counter);
        return (
            <Router>
              <Schema name="default" sceneConfig={Animations.FlatFloatFromRight} />
              <Route name="launch" {...this.props} component={Counter} initial={true} hideNavBar={false} title="Launch"/>
            </Router>
        );
    }
});

module.exports = RouterModule;

When I click on the "+", my Router Component updates well and receive the good count value, but the value is not updated in Counter Component.

Please let me know if you need anything.

Finally

Finally, I see a runnable, real Redux-React Native sample application!

Really thanks a lot, @chentsulin . Long live! ๐Ÿ‘

Unhandled js exception

invariant violation:module name prefixes showld've been stripped by the native side but wasn't for rctjscexecutor

Cant get it to work

Don't know what I'm doing wrong.

  1. cloned the project
  2. ran npm i
  3. opened it in xcode and pressed 'run'
  4. got an error in the simulator that it couldn't connect to the development server. So I looked at the terminal and I've got an error
Failed to build DependencyGraph: 
Naming collision detected: 
/Users/dbrowne/Sites/react-native-counter-ios-android/node_modules/remote-redux-devtools/node_modules/react/node_modules/fbjs/lib/warning.js collides with /Users/dbrowne/Sites/react-native-counter-ios-android/node_modules/react-native/node_modules/fbjs/lib/warning.js

Error: 
Naming collision detected: 
/Users/dbrowne/Sites/react-native-counter-ios-android/node_modules/remote-redux-devtools/node_modules/react/node_modules/fbjs/lib/warning.js collides with /Users/dbrowne/Sites/react-native-counter-ios-android/node_modules/react-native/node_modules/fbjs/lib/warning.js

I don't know how the other dude in the closed issue got it to run, but I can't. any suggestions?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.