Liverpool Liverpool - 3 months ago 30
iOS Question

React-Native Navigator: Cannot read property 'push' of undefined

So I'm playing around with React Native, After Succeed with my first Navigator, I make another Navigator to route to another page.

Here's my File structure:

Project

- android/

- backup/

- ios/

- node_modules/

- src/

-- buy.js

-- chat.js

-- main.js

-- nargo.ios.js

-- styles.js

- index.android.js/

- index.ios.js/

- intro.js/

- main.js/

- package.json/




Here's my -index.ios.js:

import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import AppIntro from 'react-native-app-intro';
import Main from './main';


class Project extends Component {

render() {
return (
<Main />
);
}
}

AppRegistry.registerComponent('Project', () => Project);




Here's my -main.js (This code is succeed route to intro.js as an initialRoute):

import React, { Component } from 'react';
import {
Navigator,
View
} from 'react-native';

import mainApp from './src/main';
import intro from './intro';
import buy from './src/buy';

const routes = {
intro,
mainApp,
buy
}

module.exports = React.createClass({
render(){
return (
<Navigator
initialRoute={{name: 'intro'}}
renderScene={this.renderScene}
/>
)
},

renderScene(route, navigator){
let Component = routes[route.name];

return(
<Component
navigator={navigator}
/>
)
}
});





Here's my -intro.js (in this code, once again I succeeded routes to another page (--main.js) when Done Button is clicked):

import React, { Component } from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Image
} from 'react-native';
import AppIntro from 'react-native-app-intro';
import styles from './styles';

const styless = StyleSheet.create({
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
padding: 15,
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
Desc1: {
paddingTop: 20,
color: '#fff',
fontSize: 13,
fontWeight: '500',
textAlign: 'center',
fontFamily: "Raleway-Bold",
},
});


class intro extends Component {
doneBtnHandle = () => {
this.props.navigator.push({name: 'mainApp'})
}
onSlideChangeHandle = (index, total) => {
console.log(index, total);
}
render() {
return (
<AppIntro
onNextBtnClick={this.nextBtnHandle}
onDoneBtnClick={this.doneBtnHandle}
onSlideChange={this.onSlideChangeHandle}
doneBtnLabel='Done'
skipBtnLabel=''
nextBtnLabel='>'
>
<View style={[styless.slide, { backgroundColor: '#555555' }]}>
<View level={-25}>
<Text style={styless.Desc1}>Welcome!</Text>
</View>
</View>
<View style={[styless.slide,{ backgroundColor: '#527bac' }]}>
<View level={-25}>
<Text style={styless.Desc1}>The Answer!</Text>
</View>
</View>
<View style={[styless.slide, { backgroundColor: '#33691e' }]}>
<View level={-25}>
<Text style={styless.Desc1}>The Question!</Text>
</View>
</View>
</AppIntro>

);
}
}

module.exports = intro;





Here's my --main.js (in this code, I am using TabBarIOS and automatically use --nargo.ios.js as an initial page in here):

'use strict';

import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS,
StyleSheet,
Text,
View
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';
import nargo from './nargo.ios';

class Main extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'nargo'
};
}


render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'>
<Icon.TabBarItem
title="nargo"
iconName="ios-home"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'nargo'}
onPress={() => {
this.setState({
selectedTab: 'nargo',
});
}}>
</Icon.TabBarItem>
<Icon.TabBarItem
onPress={() => {
this.setState({
selectedTab: 'chat',
});
}}
selected={this.state.selectedTab === 'chat'}
title="Chat"
iconName="ios-chatbubbles"
selectedIconName="ios-chatbubbles">
</Icon.TabBarItem>
</TabBarIOS>
);
}
}


module.exports = Main;





Here's my --nargo.js (in this code, where the problems come. When buy button is clicked, I want to routes to --buy.js page):

'use strict';

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
ListView,
TouchableHighlight,
AlertIOS,
SwitchIOS,
ScrollView,
TouchableOpacity,
Navigator
} from 'react-native';

const styles = require('./styles.js');

import * as Animatable from 'react-native-animatable';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';


class nargo extends Component {
render() {
var _scrollView: ScrollView;
return (
<View style={styles.container}>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
scrollEventThrottle={200}
style={styles.scrollView}>

<TouchableOpacity
style={styles.buttonContainer}
onPress={() => {
this.props.navigator.push({name: 'buy'})
}}
>
<Text style={styles.buttonText}>Buy !</Text>
</TouchableOpacity>

</ScrollView>

</View>
);
}

}

module.exports = nargo;





Here's my --buy.js

'use strict';

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';

class cak extends Component {
render() {
return (
<View>
<Text>
Holla!
</Text>
</View>
);
}
}

module.exports = cak;





I tried this code and give me this error screen:

Screen Shot 2016-09-06 at 8.04.10 PM.png

Can somebody help me to fix this issues?
Thanks in advance.





========= SOLVED ========

I added
<nargo navigator={this.props.navigator} />
line to first TabBariOS. Thanks for those who help me.

'use strict';

import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS,
StyleSheet,
Text,
View
} from 'react-native';
import buy from './buy';

import Icon from 'react-native-vector-icons/Ionicons';
import nargo from './nargo.ios';


class Main extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'nargo'
};
}


render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'>
<Icon.TabBarItem
title="nargo"
iconName="ios-home"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'nargo'}
onPress={() => {
this.setState({
selectedTab: 'nargo',
});
}}>
<nargo navigator={this.props.navigator} />
</Icon.TabBarItem>
<Icon.TabBarItem
onPress={() => {
this.setState({
selectedTab: 'chat',
});
}}
selected={this.state.selectedTab === 'chat'}
title="Chat"
iconName="ios-chatbubbles"
selectedIconName="ios-chatbubbles">
</Icon.TabBarItem>
</TabBarIOS>
);
}
}


module.exports = Main;

Answer

You should pass the Component inside the tab bar item also pass the navigator if you want to navigate through the component here is example:

  <TabBarIOS selectedTab={this.state.selectedTab}
    barTintColor='#dcdcdc'>
    <Icon.TabBarItem
      title="nargo"
      iconName="ios-home"
      selectedIconName="ios-home"
      selected={this.state.selectedTab === 'nargo'}
      onPress={() => {
          this.setState({
              selectedTab: 'nargo',
          });
      }}>

     //here you should pass the component and the navigator, ex:
     <ComponentName navigator={this.props.navigator} />

    </Icon.TabBarItem>