Htykuut

what I'm trying to do is to custom android back buttom, so when I'm in a screen, when I press the back button, the screen must navigate through the MyProducts, but I'm receiving this error

import React, { Component } from 'react';

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

import { Textarea, Form, Item, Input, Label, Button } from 'native-base';

import jwt_decode from 'jwt-decode';



class CreateProduct extends Component {

  constructor(props) {

    super(props);

    this.keyboardHeight = new Animated.Value(0);

    this.imageHeight = new Animated.Value(199);



    this.state = {

      isButtonsHidden: false,

      title: null,

      description: '',

      isDialogVisible: false,

      messageError: '',

    };

  }



  registerProduct = () => {

    const { state } = this.props.navigation;

    const token = state.params ? state.params.token : undefined;

    const user = jwt_decode(token);



    fetch(createProductPath, {

      method: 'POST',

      body: formData,

      headers: {

        'Accept': 'application/json',

        'Content-Type': 'multipart/form-data',

      },

    })

    .then((response) => {

      return response.json();

    })

    .then((responseJson) => {

      if (responseJson.error != null) {

        this.setState({ messageError: responseJson.error })

        this.setState({ isDialogVisible: true })

      }

      else {

        this.props.navigation.navigate('MyProducts', { token: token });

      }

    })

  }



  componentDidMount() {

    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);

  }

  componentWillUnmount() {

    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);

  }



  handleBackButton() {

    this.props.navigation.navigate('MyProducts', { token: token });

    return true;

  }



  render() {

    const { state } = this.props.navigation;

    var token = state.params ? state.params.token : undefined;



    return (

      <Animated.View

        style={[styles.container, { paddingBottom: this.keyboardHeight }]}

      >

        <Form style={styles.description}>

          <Item floatingLabel>

            <Label>Title</Label>

            <Input

              onChangeText={(title) => { this.setState({ title }) }}

            />

          </Item>

          <Textarea

            onChangeText={(description) => { this.setState({ description }) }}

          />

        </Form>

        <ToogleView hide={this.state.isButtonsHidden}>

          <View style={styles.buttonContainer}>

            <Button

              onPress={() => { this.props.navigation.navigate('MyProducts', { token: token }); }}

              danger

            >

              <Text style={{ color: 'white' }}> CANCEL </Text>

            </Button>

            <Button

              onPress={this.registerProduct}

              success

            >

              <Text style={{ color: 'white' }}> SAVE </Text>

            </Button>

          </View>

        </ToogleView>

      </Animated.View>

    );

  }

}

export default CreateProduct;



const styles = StyleSheet.create({

  container: {

    backgroundColor: 'white',

    flex: 1

  },

  description: {

    flex: 1,

    height: '35%',

    width: '95%',

  },

  buttonContainer: {

    flexDirection: 'row',

    justifyContent: 'space-around',

    paddingBottom: 10,

  },

});

For reasons unknown to me, my props is undefined when i saw it with a console.log, so I can't pass throught the

handleBackButton() {
this.props.navigation.navigate('MyProducts', { token: token });
}

Is there a good way to do this? I appreciate.

Make handleBackButton function as arrow function

handleBackButton = () => {

   this.props.navigation.navigate('MyProducts', { token: token });

   return true

 }

Can you try changing your calls to handleBackButton to bind to this?

  componentDidMount() {

    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));

  }

  componentWillUnmount() {

    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton.bind(this));

  }



  handleBackButton() {

    this.props.navigation.navigate('MyProducts', { token: token });

    return true;

  }