How to upload an image using expo-image-picker in react native

Question

I want to know how to upload an image using expo-image-picker.

Currently my expo project has this warning :

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on android as it keeps the timer module awake, and the timers can only be called when the app is in the foreground.

I'm looking for an answer that describes how to upload an image and fix this warning.

Answer 1

Here you can find answer for your second question about warning "Setting a timer for a long period of time..".

For the your first question the best is to take a look at documentation: https://docs.expo.io/versions/latest/sdk/imagepicker/

Here you can find all possible methods and this example of how to pick the image:

import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

export default class ImagePickerExample extends React.Component {
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  componentDidMount() {
    this.getPermissionAsync();
    console.log('hi');
  }

  getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

Answer 2

It's Just a warning,You can ignore that by following Code

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings(['Setting a timer']);//Add this to constructor 

That's it,Ignore it

it's fixed for me