Can we use this.props.map as well as this.props.navigation in single class to navigate to another screen

manpreet Best Answer 2 years ago

I have used this.props.maps as well as this.props.navigation which is showing an error:

this.props.navigation.navigate is undefined object

Trying to navigate to another page by rendering the firebase database but getting error but the same code i tried by simple creating a view and navigating to another page then it is working

export default class ItemComponent extends Component {


  constructor(props) {
    super(props);
    // need to bind `this` to access props in handler
    this._onEditLibrary = this._onEditLibrary.bind(this);
  }

  static propTypes = {
      items: PropTypes.array.isRequired
  };
  _onEditLibrary=()=> {
    this.props.navigation.navigate('EditLibrary');
  };
  render() {
    return (
      <View style={styles.itemsList}>
          <TouchableOpacity  onPress={this._onEditLibrary}>
        {this.props.items.map((item, index) => {
            return (
                <View key={index}>

                <ImageBackground source={item.Image} style={ { height:150, width:150}}>
                    <Text style={styles.itemtext}>{item.Name}Text>
                    ImageBackground>

                View>
            )
        })
        }
        TouchableOpacity>
      View>
    );
  }
}

Need to navigate to another page

manpreet 2 years ago

Try this out

export default class ItemComponent extends Component {


  constructor(props) {
    super(props);
    // need to bind `this` to access props in handler
    this._onEditLibrary = this._onEditLibrary.bind(this);
  }

  static propTypes = {
      items: PropTypes.array.isRequired
  };
  _onEditLibrary=()=> {
    this.props.navigation.navigate('EditLibrary');
  };
  render() {
    return (
      <View style={styles.itemsList}>
        {this.props.items.map((item, index) => {
            return (
                <TouchableOpacity key={index} onPress={this._onEditLibrary}>
                    <ImageBackground source={item.Image} style={ { height:150, width:150}}>
                           <Text style={styles.itemtext}>{item.Name}Text>
                    ImageBackground>
              TouchableOpacity>
            )
        })
        }
      View>
    );
  }
}