Question 33387 in React native Question posted in
The official React Native documentation can be found here.

React Native – How to rename camera roll image file name

I’m having a problem using @react-native-community/cameraroll.

Here’s my code:

const handleSaveImageToDevice = async () => {
    try {
      const uri = await captureRef(viewRef, {
        format: 'jpg',
        quality: 0.8,
      });

      const image = CameraRoll.save(uri, {
        type: 'photo',
        album: 'Generated Image',
      });
    } catch (e) {
      return e;
    }
  };

As seen in the code I used captureRef to save react elements with ref as image.

The behavior is working as expected. If the user clicks the save button the image will be saved to the designated folder. But the problem is it saves random file name. I want to rename it like for example "generated_image".

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I forgot to update this but I already found a way to fix my problem using third party library react-native-fs

    viewShot?.current?.capture().then((data) => {
        RNFS.writeFile(
          RNFS.CachesDirectoryPath +
            `/generated-image.jpg`,
          data,
          'base64',
        ).then((success) => {
          return CameraRoll.save(
            RNFS.CachesDirectoryPath +
              `/generated-image.jpg`,
            {
              type: 'photo',
              album: 'testing',
            },
          );
        });
      });

  2. 0

    When you are capturing there is option for image file name:

    const uri = await captureRef(viewRef, {
        format: 'jpg',
        quality: 0.8,
        fileName: 'generated_image'
      });

    Refer below link:
    https://github.com/gre/react-native-view-shot/issues/116#issuecomment-1155523609

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search