wcandillon / react-native-expo-image-cache

React Native Image Cache and Progressive Loading based on Expo
MIT License
672 stars 125 forks source link

Failed prop type: Invalid prop `source` supplied to `Image`. React Native #152

Open kanwar002 opened 4 years ago

kanwar002 commented 4 years ago

Failed prop type: Invalid prop source supplied to Image I'm getting that error while uploading image. I used image picker to pick image and made it component but it's not picking up source below is my code of image picker FormImage.js

class FormImage extends Component { state = { hasCameraPermission: null, };

async componentDidMount() { const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); this.setState({ hasCameraPermission: status === "granted" }); }

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

if (!result.cancelled) {
  this.setState({ image: result.uri });
  this.props.formikProps.setFieldValue("image", result.uri);
}

};

render() { return (

{!this.props.image && ( )} {this.props.image && ( )}
);

} Addpost.js

const validationSchema = Yup.object({ title: Yup.string().required().min(5).max(15).label("Title"), des: Yup.string().required().min(15).max(200).label("Description"), image: Yup.mixed(), });

class AddPost extends Component { render() { return ( <Formik initialValues={{ title: "", des: "", image: null }} onSubmit={(values, actions) => { this.props.addPost(values); console.log(values); }} validationSchema={validationSchema}

{(value) => ( <KeyboardAvoidingView behavior="position" keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 100}

{value.touched.image && value.errors.image}

<TextInput placeholder="Title" onChangeText={value.handleChange("title")} style={styles.input} value={value.values.title} onBlur={value.handleBlur("title")} />

can anyone tell me what's going on?

GwFreak01 commented 3 years ago

I dont think source is a valid prop for this package. It only accepts the following props:

  1. style
  2. defaultSource
  3. preview
  4. options
  5. uri
  6. transitionDuration
  7. tint
  8. onError

You should most likely set the uri prop in the Image component from result.uri

amjed-ali-k commented 3 years ago

Change

<Image style={styles.image} source={{ uri: this.props.image }} />

To

<Image style={styles.image} uri={this.props.image } />