I'm trying to get a value from a component that I have pressed but I could not pass it.
My Welcome class is using Menu component while this component has 4 MenuItem components.
Where it would be my problem? I couldn't get itemOnPress value into Welcome screen.
Welcome:
class Welcome extends React.Component {
menuItemOnPress = (item) => {
console.log('ITEM', item);
};
render() {
return (
<Modal animationType={'fade'}
transparent={true}
visible={this.state.modalVisible}>
<View style={styles.modal}>
<Menu itemOnPress={(item) => this.menuItemOnPress(item)}/>
</View>
</Modal>
);
}
Menu:
class Menu extends React.Component {
render() {
const {closeOnPress, itemOnPress} = this.props;
return (
<SafeAreaView style={styles.container}>
<MenuItem titleText={'XYZ'} onPress={itemOnPress(0)}/>
<MenuItem titleText={'XYZ'} onPress={itemOnPress(1)}/>
</SafeAreaView>
);
}
Switch your Menu component onPress functions to arrow function
class Menu extends React.Component {
render() {
const {closeOnPress, itemOnPress} = this.props;
return (
<SafeAreaView style={styles.container}>
<MenuItem titleText={'XYZ'} onPress={() => itemOnPress(0)}/>
<MenuItem titleText={'XYZ'} onPress={() => itemOnPress(1)}/>
</SafeAreaView>
);
}
Related
I have Main component and Bar component. I want to send some info to Bar component.
This is my code:
render() {
<View>
<View>
<Bar />
</View>
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Bar', { Info:'test' }) }>
</TouchableOpacity>
</View>
<View/>
}
I cant send like this because Bar component is in this component. How Can I fix this.
Since your're in the same component ... setState is your answer
class Comp extends React.Component {
state = {
info: '',
};
render() {
const { info } = this.state;
return (
<View>
<View>
<Bar info={info} />
</View>
<View>
<TouchableOpacity
onPress={() => {
this.setState({ info: 'test' });
}}
/>
</View>
</View>
);
}
}
State There are two types of data that control a component: props and
state. props are set by the parent and they are fixed throughout the
lifetime of a component. For data that is going to change, we have to
use state.
I am doing stack navigation but I can't seem to be able to navigate I will get this error "Can't find variable: navigate" Here is the screenshot of my android emulator
This is my App class(main)
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Header/>
<AppNavigator/>
</View>
);
}
}
const AppNavigator = StackNavigator({
Cluster1: {
screen: Cluster1,
},
Play: {
screen: Play,
},
});
This is my Cluster1 class
export default class Cluster1 extends Component{
render(){
return(
<View>
<SectionList
renderSectionHeader={({ section }) => {
return (<SectionHeader section={section} />);
}}
sections={ClusterData}
keyExtractor={(item, index) => item.name}
>
</SectionList>
</View>
);
}
}
class SectionHeader extends Component {
render() {
return (
<View style={styles.header}>
<Text style={styles.headertext}>
{this.props.section.title}
</Text>
<TouchableOpacity onPress={() => { navigate("Play");}}>
<Text style ={styles.Play}>Play
</Text>
</TouchableOpacity>
</View>
);
}
}
navigation object only exist in the screen component. (not exist in the nested components). you can pass it into the nested component using props
export default class Cluster1 extends Component{
render(){
return(
<View>
<SectionList
renderSectionHeader={({ section }) => {
return (<SectionHeader navigation={this.props.navigation} section={section} />);
}}
sections={ClusterData}
keyExtractor={(item, index) => item.name}
>
</SectionList>
</View>
);
}
}
class SectionHeader extends Component {
render() {
return (
<View style={styles.header}>
<Text style={styles.headertext}>
{this.props.section.title}
</Text>
<TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>
<Text style ={styles.Play}>Play
</Text>
</TouchableOpacity>
</View>
);
}
}
Include on your SectionHeader the this.props.navigation something like this:
<SectionHeader navigation={this.props.navigation}/>
because the props.navigation are by default on your parent component
and on SectionHeader component you will access to navition like:
..
goToSignUp() {
this.props.navigation.navigate('SignUp');
}
..
For me also was confusing before. Cheers!
You can use this rather than navigate :
this.props.navigation.navigate('Play')
Hope this is helpful.
I am building a POC application in react-native and trying to implement react-navigation
import {StackNavigator, DrawerNavigator} from 'react-navigation';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props)
this.clicked = this.clicked.bind(this)
}
static navigationOptions = {
drawerLabel: 'Home',
};
clicked = ()=> {
this.props.navigator.navigate('DrawerOpen'); // open drawer
}
render() {
// const {navigate} = this.props.navigation;
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.header}>
<View style={{width: 50}}>
<TouchableHighlight onPress={()=> {
this.clicked("DrawerOpen")
}}>
<Image source={require('./img/hamburger_icon.png')}/>
</TouchableHighlight>
</View>
</View>
</View>
</ScrollView >
)
}
}
Now whenever I am clicking on touchable highlight, clicked function gets called and it shows error:
undefined is not an object (evaluating '_this.props.navigator.navigate')
clicked
You try it :)
import {StackNavigator, DrawerNavigator} from 'react-navigation';
export default class HomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
};
clicked = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
}
render() {
// const {navigate} = this.props.navigation;
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.header}>
<View style={{width: 50}}>
<TouchableHighlight onPress={()=>
this.clicked()
}>
<Image source={require('./img/hamburger_icon.png')}/>
</TouchableHighlight>
</View>
</View>
</View>
</ScrollView >
)
}
}
Try this , May be this can help you, Inside the clicked
clicked = ()=> {
this.props.navigation.navigate('DrawerOpen');
}
This just happened to me. Only the top level components get the this.props.navigation.
Probably you have to call this component like this:
<HomeScreen navigation=this.props.navigation />
I want to set up a sidebar menu with Drawer (Native Base).
I have a App.js :
export default class ReactProject extends Component {
renderScene (route, navigator) {
return <route.component navigator={navigator} />
}
render() {
return (
<Navigator
style={styles.container}
renderScene={this.renderScene.bind(this)}
initialRoute={{component: Home}}
/>
);
}
}
A Home.js with the drawer :
export default class Home extends Component {
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />} navigator={this.props.navigator}>
<Container>
</Container>
</Drawer>
);
}
}
And sidebar.js which is loaded into the drawer :
export default class SideBar extends Component {
constructor(props) {
super(props);
}
redirect(routeName){
this.props.navigator.push({
component: routeName
});
}
render() {
return (
<Content style={styles.sidebar}>
<ListItem button >
<Text>Home</Text>
</ListItem>
<ListItem button >
<Text>Test</Text>
</ListItem>
<ListItem button onPress={this.redirect.bind('Blank')}>
<Text>Blank Page</Text>
</ListItem>
</Content>
);
}
}
But when I click i have this error:
Undefined is not an object (evaluating 'this.props.navigator.push')
I do not have this problem when the button is in the page but only in the sidebar.js
Could someone help me?
thank you,
Thomas.
I think you have to change little bit code of your Home.js as per mentioned below:
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar navigator={this.props.navigator} />}
<Container>
</Container>
</Drawer>
);
And add this lines of code in your sidebar.js file:
static propTypes = {
navigator: React.PropTypes.object,
}
I am able to define the initial route(Home) and the app navigates to that route. Inside Home I am calling another component called BoxLists which is displayed as expected. The issue I am having is when calling another component called StationOne from inside BoxLists.
I am getting the following error: uncaught error: undefined is not an object (evaluating 'this.props.navigator.push'
So the question is: How can I navigate from BoxLists to StationOne?
Note: I am planning to navigate to additional components(StationOne, StationTwo, StationN+1) from BoxLists.
Here is the code although you can go to RNPlayground at https://rnplay.org/apps/rLB5HQ. Thanks!
class App extends React.Component {
navigatorRenderScene(route,navigator){
if (route.title == "Home")
{
return( <Home navigator={navigator} /> );
}
if (route.title == "StationOne")
{
return( <StationOne navigator={navigator} /> );
}
}
render() {
return (
<Navigator
initialRoute = {{ title: "Home" }}
renderScene = {this.navigatorRenderScene.bind(this)}
/>
);
}
}
class Home extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<View style={styles.header}>
<Text style={styles.headerText}>AdView</Text>
</View>
<BoxLists author="station one" navigator={navigator} />
</View>
);
}
}
class BoxLists extends React.Component {
_goToStation(){
this.props.navigator.push({
title: 'StationOne'
});
}
render() {
return (
<View>
<Text>You are in BoxList. The passed prop is: {this.props.author}</Text>
<TouchableHighlight onPress={this._goToStation.bind(this)}>
<Text>Press here to go to StationOne</Text>
</TouchableHighlight>
</View>
);
}
}
class StationOne extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<Text> This is station one </Text>
</View>
);
}
}
class Home extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<View style={styles.header}>
<Text style={styles.headerText}>AdView</Text>
</View>
<BoxLists author="station one" navigator={this.props.navigator} />
</View>
);
}
}
You need to pass this.props.navigator for the BoxLists component as shown above