Expo React Native, How to pick default local images or user image obtained from expo image picker

Question

I have a form that a user can select a default local image or an image from the user's photo library

Here is an expo snack use android the images can be found in the phone menu in photos

I want to save either the default local image or user's image to the form and to redux, currently able to save default images picked to form and redux.

This is what currently works. I have a component that gets a selected local image and returns an image path witch is a number. That local image gets saved in form and in redux. currently, the user can change the local image in the form.

ImgSelector Component:
    
    import React, { useState } from "react";
    import { List, Selector, View, SelectedImg } from "./styles";
    import { FlatList } from "react-native";
    import { defaultImages } from "../../data/defaultImages";

    const FlatlistItem = ({ image, setImg }) => {
    return (
       <Selector onPress={() => setImg(image)}>
         <View>
           <SelectedImg source={image} />
          </View>
       </Selector>
     );
    };

    const ImgSelector = ({ setImg }) => {
    const [selectedId, setSelectedId] = useState(null);
    const renderItem = ({ item }) => (
      <FlatlistItem setImg={setImg} image={item.image} />
    );

    return (
      <View>
        <FlatList
          horizontal
          data={defaultImages}
          renderItem={renderItem}
          keyExtractor={(item, index) => index.toString()}
          extraData={selectedId}
         />
       </View>
     );
   };

   export default ImgSelector;

Default local images are stored like this and the path is the index which is a number this part works fine.

export const defaultImages = [
    {
      id: “2”,
      image: require("../assets/images/singlepane.png"),
    }
 ]

I have an imagePicker component that asks for permissions and returns a uri string that looks like this:

file:/data/data/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FExpoWcPro-a828b17b-dcd7-4a04-93ca-657c8e4e511d/ImagePicker/6106d73f-c886-457d-abe9-1f1232a0d398.jpg

My form component where images are picked and saved:

    import React, { useState } from "react";

    import { Image } from "react-native";

    const CounterForm = ({ navigation, ...props }) => {
    // This is current state for default images that works
    const [imgUrl, setImgUrl] = useState(props.imgUrl || defaultImage);

    const [userImgUri, setUserImgUri] = useState(null);

    // This gets the local image from a componnet
    const handleEditImg = (newImgUrl) => {
      setImgUrl(newImgUrl);
    };

    // This gets image uri from expo image picker
    const handelUserImg = (userUri) => {
      setUserImgUri(userUri);
    };

    // This sends data to a redux action to save
    const handleSubmit = () => {
      props.onFormSubmit({
        id: props.id,
        imgUrl,
      });
      setImgUrl(defaultImage);
    };

    return (
      <FormWrapper>
        <Row>
          <FormButton onPress={() => handleSubmit()}>
            <StyledText title="Save" color={COLORS.appBlue} />
          </FormButton>
        </Row>
        <TopContent>
          {/* I tried this to get user image and displays in form */}
          <Image
            source={{ uri: userImgUri }}
            style={{ width: 100, height: 100 }}
          />

          {/* This current implementation gets local images
          <Image
            source={imgUrl}
            style={{ width: 100, height: 100 }}
          /> */}

          {/* I tried this only gets local images
          {imgUrl ? (
            <Image source={imgUrl} style={{ width: 100, height: 100 }} />
          ) : (
            <Image
              source={{ uri: userImgUri }}
              style={{ width: 100, height: 100 }}
            />
          )} */}
        </TopContent>
        <Row>
          <ImagePicker getUserImg={handelUserImg} />
        </Row>
        <View>
          <ImgSelector setImg={handleEditImg} />
        </View>
      </FormWrapper>
    );
  };

  export default CounterForm;

victorbalssa · Answer 1 · 2021-02-11T01:54:41.123

0

if you use the last sdk version of Expo (40) and the right package expo-image-picker you need to follow this instructions.

First you need to ask for permissions :

const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
  alert('Sorry, we need camera roll permissions to make this work!');
}

And then call method to select image from library :

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

So you got image uri by accessing result.uri, you need to save this value (e.g in user store) and display it by selecting your store or default value if there is not stored value :

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Button title="Pick an image from camera roll" onPress={pickImage} />

  /** imgUrl = stored image uri, defaultImages[0].image = default image uri */
  <Image source={imgUrl ? { uri: imgUrl } : defaultImages[0].image} />
</View>

edited Feb 11 '21 at 01:54

answered Feb 11 '21 at 00:31

victorbalssa

2,762
2
13
25

thanks for having a go I edited my question to provide more context. What you suggested did not work for me. – Mike Haslam Feb 11 '21 at 01:45
ok you don't need uri for default images from `defaultImages` – victorbalssa Feb 11 '21 at 01:51
I want the user to be able to choose either – Mike Haslam Feb 11 '21 at 01:54
If an image is selected and stored this image will be picked, else default image will be displayed right ? – victorbalssa Feb 11 '21 at 01:56
I edited the question again to try to clarify further – Mike Haslam Feb 11 '21 at 02:07
Ok I didn't understand what's your question ? you have already chosen images from expo-image-picker and if you want to select image from your `assets/` directory you have to create method to display one by one all assets image and store the local uri – victorbalssa Feb 11 '21 at 03:06
1

I added an expo snack here see comments on line 86 https://snack.expo.io/@lorling/pick-images – Mike Haslam Feb 11 '21 at 03:53
Yep it's perfect ! everytime you add one image to asset don't forget to update the `defaultImages` tab – victorbalssa Feb 11 '21 at 04:06
I still want to be able to pick local or user image the snack does only one or the other – Mike Haslam Feb 11 '21 at 04:08
Okkkk I understand, you need to push others images from media library to your `defaultImages` https://docs.expo.io/versions/latest/sdk/media-library/#medialibrarygetassetsasyncoptions – victorbalssa Feb 11 '21 at 04:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228555/discussion-between-mike-haslam-and-victor-bls). – Mike Haslam Feb 11 '21 at 04:17

Mike Haslam · Answer 2 · 2021-02-11T17:05:19.827

I found the answer it's updated in expo snack

import React, { useState } from "react";
import { List, Selector, View, SelectedImg } from "./styles";
import { FlatList } from "react-native";
import { defaultImages } from "../data";


const FlatlistItem = ({ image, setImg }) => {
  return (
    <Selector onPress={() => setImg(image)}>
      <View>
        <SelectedImg source={{uri: image}} />
      </View>
    </Selector>
  );
};

const ImgSelector = ({ setImg }) => {
  const [selectedId, setSelectedId] = useState(null);
  const renderItem = ({ item }) => {
    return (
    <FlatlistItem setImg={setImg} image={item} />
  )
  }

  return (
    <View>
      <FlatList
        horizontal
        data={defaultImages}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        extraData={selectedId}
      />
    </View>
  );
};

export default ImgSelector;

Form

import React, { useState } from "react";
import {Asset} from 'expo-asset';
import StyledText from "../UiComponents/StyledText";
import { TouchableWithoutFeedback, Keyboard } from "react-native";
import {
  FormWrapper,
  TextInputWrapper,
  TopContent,
  NumberWrapper,
  Row,
  FormButton,
  View,
} from "./styles";
import StyledInput from "../UiComponents/StyledInput";
const defaultImage = Asset.fromModule(require('../assets/komloy.jpg')).uri
import WindowSelector from "../ImgSelector";
import StyledButton from "../UiComponents/StyledButton";
import ImagePicker from "../components/imagePicker";
import { Image } from "react-native";

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);

const CounterForm = ({ navigation, ...props }) => {
  const [imgUrl, setImgUrl] = useState(props.imgUrl || defaultImage);
  
  const handleEditImg = (newImgUrl) => {
    setImgUrl(newImgUrl);
  };

  const handelUserImg = (userUri) => {
    setImgUrl(userUri);
  };

  const handleSubmit = () => {
    props.onFormSubmit({
      id: props.id,
      imgUrl
    });
    setImgUrl(defaultImage);
  };

  return (
    <DismissKeyboard>
      <FormWrapper>
        <TopContent>
         <Image
            source={{uri: imgUrl}}
            style={{ width: 100, height: 100 }}
          />
        </TopContent>
        <Row>
          <StyledText title="Select a image" />
          <ImagePicker getUserImg={handelUserImg} />
        </Row>
        <View>
          <WindowSelector setImg={handleEditImg} />
        </View>
      </FormWrapper>
    </DismissKeyboard>
  );
};

export default CounterForm;

Data

 import {Asset} from 'expo-asset';

const imageURI = Asset.fromModule(require('./assets/islands.jpg')).uri
const imageURI2 = Asset.fromModule(require('./assets/maeYai.jpg')).uri

export const defaultImages = [
 imageURI, imageURI2
]

Expo React Native, How to pick default local images or user image obtained from expo image picker

2 Answers2