How to use expo-image-manipulator - 10 common examples

dispatch({
      type: types.SAVING_PHOTO,
      uri: uri
    })
    const id = getRandomId()
    const directoryPath = `${RNFetchBlob.fs.dirs.DocumentDir}/photos`
    const path = `${RNFetchBlob.fs.dirs.DocumentDir}/photos/${id}.jpg`
    try {
      await RNFetchBlob.fs.mkdir(directoryPath)
    } catch (error) {
      if (!error.message.endsWith('already exists')) {
        console.log('directory create failed', error)
      }
    }
    try {
      let manipulatedImage = await ImageManipulator.manipulateAsync(uri, [
        // FIXME: figure out a resizing strategy once API is hooked up
        // { resize: { width: 540, height: 780 } }
      ], { base64: true, compress: 0.2 })
      await RNFetchBlob.fs.createFile(path, manipulatedImage.uri.replace('file://', ''), 'uri')

      const photo = {
        'id': id,
        'path': path,
        'location': location,
        'description': description || null,
        'status': 'pending',
        'featureId': featureId || null,
        'errors': [],
        'base64': manipulatedImage.base64
      }
      dispatch(savedPhoto(photo))

rotate = async (uri, width2, height2) => {
        const { saveOptions } = this.props
        const manipResult = await ImageManipulator.manipulateAsync(uri, [{
            rotate: -90,
        }, {
            resize: {
                width: this.trueWidth || width2,
                // height: this.trueHeight || height2,
            },
        }], saveOptions)
        return manipResult
    }

export default ImgManipulator


ImgManipulator.defaultProps = {
    onPictureChoosed: ({ uri, base64 }) => console.log('URI:', uri, base64),
    btnTexts: {
        crop: 'Crop',
        rotate: 'Rotate',
        done: 'Done',
        processing: 'Processing',
    },
    dragVelocity: 100,
    resizeVelocity: 50,
    saveOptions: {
        compress: 1,
        format: ImageManipulator.SaveFormat.PNG,
        base64: false,
    },
}

ImgManipulator.propTypes = {
    isVisible: PropTypes.bool.isRequired,
    onPictureChoosed: PropTypes.func,
    btnTexts: PropTypes.object,
    saveOptions: PropTypes.object,
    photo: PropTypes.object.isRequired,
    onToggleModal: PropTypes.func.isRequired,
    dragVelocity: PropTypes.number,
    resizeVelocity: PropTypes.number,
}

_manipulate = async (actions: ImageManipulator.Action[], saveOptions?: ImageManipulator.SaveOptions) => {
    const manipResult = await ImageManipulator.manipulateAsync(
      (this.state.image! as Asset).localUri || this.state.image!.uri,
      actions,
      saveOptions
    );
    this.setState({ image: manipResult });
  }
}

const onSave = useCallback(async () => {
    if (state.input.date) {
      const check = (props.calendars || []).find(
        calendar => calendar.date === state.input.date
      );

      if (check) {
        Alert.alert('同じ日にスケジュールが既に登録されています');
        return;
      }
    }

    let image = '';
    if (state.image) {
      const manipResult = await ImageManipulator.manipulateAsync(
        state.image,
        [{ rotate: 0 }, { flip: ImageManipulator.FlipType.Vertical }],
        { compress: 1, format: ImageManipulator.SaveFormat.PNG, base64: true }
      );

      image = manipResult.base64 || '';
    }

    db.transaction((tx: SQLite.Transaction) => {
      const item: Item = {
        title: state.input.title,
        kind: state.kind || getKind(state.input.title),
        image,
      };

      insertItem(tx, item, save);

async onConvertImageToEditableSize() {
        const { photo: { uri: rawUri } } = this.props
        const { uri } = await ImageManipulator.manipulateAsync(rawUri,
            [
                {
                    resize: {
                        width: 1080,
                    },
                },
            ])
        this.setState({
            uri,
        })
    }

              onPress={() => this._flip(ImageManipulator.FlipType.Horizontal)}
            >

              onPress={() => this._flip(ImageManipulator.FlipType.Vertical)}
            >

if (state.input.date) {
      const check = (props.calendars || []).find(
        calendar => calendar.date === state.input.date
      );

      if (check) {
        Alert.alert('同じ日にスケジュールが既に登録されています');
        return;
      }
    }

    let image = '';
    if (state.image) {
      const manipResult = await ImageManipulator.manipulateAsync(
        state.image,
        [{ rotate: 0 }, { flip: ImageManipulator.FlipType.Vertical }],
        { compress: 1, format: ImageManipulator.SaveFormat.PNG, base64: true }
      );

      image = manipResult.base64 || '';
    }

    db.transaction((tx: SQLite.Transaction) => {
      const item: Item = {
        title: state.input.title,
        kind: state.kind || getKind(state.input.title),
        image,
      };

      insertItem(tx, item, save);
    });
  }, [

const check = (props.calendars || []).find(
        calendar => calendar.date === state.input.date
      );

      if (check) {
        Alert.alert('同じ日にスケジュールが既に登録されています');
        return;
      }
    }

    let image = '';
    if (state.image) {
      const manipResult = await ImageManipulator.manipulateAsync(
        state.image,
        [{ rotate: 0 }, { flip: ImageManipulator.FlipType.Vertical }],
        { compress: 1, format: ImageManipulator.SaveFormat.PNG, base64: true }
      );

      image = manipResult.base64 || '';
    }

    db.transaction((tx: SQLite.Transaction) => {
      const item: Item = {
        title: state.input.title,
        kind: state.kind || getKind(state.input.title),
        image,
      };

      insertItem(tx, item, save);
    });
  }, [
    props.calendars,