jlebensold / peckish Goto Github PK

Hi - Any chance of a tutorial/fork teaching how to intergrate (https://github.com/react-community/react-navigation) with redux in this example?

Hi @jlebensold
I am getting an error when I completed the 4th video, its
Object is not a function(evaluating '(0,_createReducer2.default))')

With your approach of having routes as an array in the navigationState reducer, how would you navigate to two different routes on the same page.
For example, let's say that I have two different TouchableHighlights, with the first navigating forward to Page 1 and the second navigating forward to Page 2.

Hello Jon,

(first of all, thanks a lot for your videos, I've learned a lot).
I'm currently following your "Getting Started with React Native and Redux" videos. (Step 10)
NavigationExperimental has been removed 8 days ago. (facebook/react-native@febf3d0)

Have you planned to fix this problem by replacing the navigation example ?

Meanwhile I'll try to find out other way to implement the tab navigation functionnality.

Thanks by advance,

Regards.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of SceneContainer.
Can you help me? @jlebensold
` import React,{Component} from 'react'
import {connect} from 'react-redux'
import {ActionCreators} from '../actions'
import {bindActionCreators} from 'redux'
import Home from './Home'
import SubCategories from './SubCategories'

import {
Animated,
StyleSheet,
View,
NavigationExperimental
} from 'react-native';

const {
PropTypes: NavigationPropTypes,
StateUtils: NavigationStateUtils,
Card: NavigationCard,
Transitioner: NavigationTransitioner,
} = NavigationExperimental;

const {
PagerPanResponder: NavigationPagerPanResponder,
PagerStyleInterpolator: NavigationPagerStyleInterpolator,
} = NavigationCard;

class AppContainer extends Component{

constructor(props) {
super(props);
this._render = this._render.bind(this);
this._renderScene = this._renderScene.bind(this);
}

render(){
console.log(this.props);
return
}

_render(transitionProps) {
const scenes = transitionProps.scenes.map((scene) => {
const sceneProps = {
...transitionProps,
scene,
};
return this._renderScene(sceneProps);
});
return (
<View style={ { flex: 1 } }>
{scenes}

);
}

 _renderScene(sceneProps){
   return <SceneContainer {...sceneProps} key={sceneProps.scene.key}/>
 }

}
class SceneContainer extends Component {
render(){
const style = [
styles.scene,
NavigationPagerStyleInterpolator.forHorizontal(this.props),
]
let Scene = null;
if(this.props.scene.route.key === 'Home') { Scene = Home }
if(this.props.scene.route.key === 'SubCategories') { Scene = SubCategories }

return(
  <Animated.View style={style}>
      <Scene {...this.props} style={style} />
  </Animated.View>
);

}
}

const styles = StyleSheet.create({
scene:{
flex:1,
position:'absolute',
bottom:0,
top:0,
left:0,
right:0,
}
})

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

function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);
`

After completing the fifth video I am getting an error that says 'undefined is not a function(evaluating 'this.props.addRecipe()')

i run that code:

 import React, { Component } from 'react'
 import ReactNative from 'react-native'
 const {
    View,
    Text,
 } = ReactNative

class AppContainer extends Component{

render(){
	return <View>
		<Text style={{marginTop: 20}}>
		I am app container
		</Text>
	</View>
            }

 } 


  export default AppContainer`

i got this error: ExceptionsManager.js:63 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App.

how can i solve?

I'm trying to implement Redux with react-navigation module, but no matter what I do in the part to implement Provider, it will result in the error.

import React from 'react'
import { AppRegistry } from 'react-native'
import { TabNavigator } from 'react-navigation'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'
import reducer from './app/reducers'
import Routes from './app/config/routes'

const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__ })

function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    )
  )

  return createStore(reducer, initialState, enhancer)
}

const store = configureStore({})

const PrettyPenny = TabNavigator({ ...Routes })

const App = () => {
  <Provider store={store}>
    <PrettyPenny/>
  </Provider>
}

AppRegistry.registerComponent('PrettyPenny', () => App)

Thanks.

{ [SyntaxError: JSON Parse error: Unrecognized token '<']
line: 10658,
column: 14,
sourceURL: 'http://11.0.8.2:8081/index.bundle?platform=android&dev=true&minify=false' }

url: http://www.recipepuppy.com/recipes/findByIngredients//?ingredients=bacon%2C%20cucumber%2C%20banana&fillIngredients=false&limitLicense=false&number=20&ranking=1 giving me 404 page not found

Getting this error in AppContainer.js
After include the redux connect
export default connect(state => { return{} }, mapDispatchToProps )(AppContainer);

Check this screenshot -> https://cloud.githubusercontent.com/assets/16603533/21046818/7af654da-be2c-11e6-9dd8-cc1b6e575325.png

Dependencies are -> "dependencies": {
"react": "15.4.1",
"react-native": "0.39.1",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-jest": "17.0.2",
"babel-preset-react-native": "1.9.0",
"jest": "17.0.3",
"react-test-renderer": "15.4.1"
}

I am getting the error that was initially shown in your tutorial video here :

https://youtu.be/6zVGVHWklg8?t=6m1s

I have named the file correctly "/app/containers/ApplicationTabs/index.ios.js" and the file contents are exactly as shown in the tutorial. However where the app worked in your video once you connected ApplicationTabs I am still getting that error after doing so myself.

I am using a newer version of a lot of the react/react-native/redux modules however.

I am not sure if the convention of exporting with files named with "index.ios.js" has changed or anything? Any help you could provide would be greatly appreciated.

Below is my package.json dependencies :
"dependencies": { "react": "15.4.2", "react-native": "0.40.0", "react-redux": "^5.0.2", "redux": "^3.6.0", "redux-logger": "^2.7.4", "redux-thunk": "^2.2.0" }

And this is my /app/containers/ApplicationTabs/index.ios.js file contents :
import { View, TabBarIOS, TabBarItemIOS } from 'react-native'; import React, { Component } from 'react'; import { connect } from 'react-redux'; class ApplicationTabs extends Component { render() { return ( <View /> ); } } function mapStateToProps(state) { return { }; } export default connect(mapStateToProps)(ApplicationTabs);

And the contents of AppContainer :
import React, {Component} from 'react'; import {connect} from 'react-redux'; import {ActionCreators} from '../actions'; import {bindActionCreators} from 'redux'; import ApplicationTabs from './ApplicationTabs'; class AppContainer extends Component { render() { return ( <ApplicationTabs { ...this.props } /> ) } } function mapDispatchToProps(dispatch) { return bindActionCreators(ActionCreators, dispatch); } export default connect( () => { return {} }, mapDispatchToProps)(AppContainer);