How to get access to assets file (issue opened after trouble shooting read).

[TimeForRelax]

Hello!

Firstly I pay your attention, that this issue about trouble shooting topic "get file from assets".

I need to access a file located in the assets folder on an iOS device. Initially, my file was located in the src/assets/react_image.png folder, but I later moved it to the root of the project at ./assets/react_image.png, which did not help.
I would like to understand how I can access files because after exploring the bundle folder, I did not find anything resembling my image.
I have tried different approaches, both with and without wrap, but nothing has helped. Below, I am attaching all the files that should help to understand the problem.

• please provide the version of installed library and RN project:

• a sample code snippet/repository is very helpful to spotting the problem:

import React, {useState} from 'react';
import {Button, Image, ScrollView, StyleSheet, Text} from 'react-native';
import ReactNativeBlobUtil from 'react-native-blob-util';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#e0e0e0',
  },
  text: {
    fontSize: 20,
    color: '#333333',
  },
  image: {
    width: '80%',
    height: undefined,
    aspectRatio: 3,
    marginTop: 20,
  },
});

export const BlobUtil = () => {
  // const [data, setData] = useState<string | null>(null);

  // const fs = RNFetchBlob.fs;

  // console.log(fs.asset('../../assets/react_image.png'));

  // RNFetchBlob.fs
  //   .readFile(fs.asset('../../assets/react_image.png'), 'base64')
  //   .then(data => {
  //     console.log(data);
  //   })
  //   .catch(e => console.log(e));

  const [blob, setBlob] = useState(null);

  const convertImageToBlob = async () => {
    try {
      const url = ReactNativeBlobUtil.wrap(
        ReactNativeBlobUtil.fs.asset('react_image.png'),
      );
      console.log('jjjjj', url);
      const imagePath = ReactNativeBlobUtil.fs.asset('react_image.png');

      console.log(imagePath);

      const imageBlob = await ReactNativeBlobUtil.fs.ls(
        'ReactNativeBlobUtil-file://',
      );
      console.log('imageBlob', imageBlob);
      // setBlob(imageBlob);
      // console.log('Image converted to Blob:', imageBlob);
    } catch (error) {
      console.error('error:', error);
    }
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.text}>root image:</Text>
      <Image
        source={require('../../../assets/react_image.png')}
        style={styles.image}
      />

      <Button title="Convert Image to Blob" onPress={convertImageToBlob} />
      <Text style={styles.text}>Blob data: {blob}</Text>
      {/* <Image source={{uri: base64Image}} style={styles.image} /> */}
    </ScrollView>
  );
};

[TimeForRelax]

adding my repo here: https://github.com/TimeForRelax/first-react-native-project

[RonRadtke]

You have to use the correct path. You cannot access the files with a relative path.
You will have to use
ReactNativeBlobUtil.fs.dirs.bundleDir + '/path in the app' when using the library.

Not needed for the image source though.