React-native saving image as state not working

Question

First of all, I am using Image Picker to get the image and RNFetchBlob to sending in the API. My problem is that I have some text inputs and in the end pushing a button, I would like to send this inputs with the image at the same time. For that I trying to save the image uri as state to send it after. But appears _this2.setState is not a function. For the moment I don't know how to solve it.

And this is my code simplified.

class Create extends Component{

  constructor(props){
    super(props);
    this.state = {
      foto: '',
    }     
  }

openImagePicker(){
  const options = {
    title: 'Select Avatar',
     storageOptions: {
      skipBackup: true,
      path: 'images'
                     }
  }

  ImagePicker.showImagePicker(options, (imagen) =>{
      if (imagen.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (imagen.error) {
    console.log('ImagePicker Error: ', imagen.error);
  }
  else if (imagen.customButton) {
    console.log('User tapped custom button: ', imagen.customButton);
  }
  else {
    let source = { uri: imagen.uri };
    console.log(source.uri);
    this.setState({
        foto: source.uri
      })    
 }

render(){
        return(     
    <Container>
        <Header><Title>Eat</Title></Header>
        <Content>
            <Text>Título</Text>
            <View>
              <TextInput  
                onChangeText={(text) => this.titulo = text}   
              />
            </View>
            <Text>Personas</Text>
            <View style={styles.container}>
              <TextInput               
                type="number" 
                onChangeText={(text) => this.personas = text}   
              />
            </View>
            <Text>Foto</Text>
            <View>
            <TouchableOpacity activeOpacity={.8} onPress={this.openImagePicker}>
                <View>
                  <Text>Cambiar</Text>
                </View>
            </TouchableOpacity>
            </View>
            <View>
            <ScrollView >
            <TouchableHighlight onPress={(this._create.bind(this))}>
                <Text>Crear Receta</Text>
            </TouchableHighlight>
            </ScrollView>
            </View>
        </Content>
    </Container>
                )
    }

_create () {


 RNFetchBlob.fetch('POST', 'XXXXXXXXXXXX', {
    'Content-Type' : 'multipart/form-data',
    },
   [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'file', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(source.uri)},
    { name : 'info', data : JSON.stringify({
      "titulo": this.titulo,
      "personas": this.personas,
    })} 
  ]).then((resp) => {   
    console.log("ok");
  }).catch((err) => {
    console.log(err);
  })
    }
  })
  }

}

Answer 1

You can either bind your method openImagePicker or call it like this:

onPress={() => this.openImagePicker()}

So that you can access your class context.