Download Images from URL using React Native and theta-client

Start new React Native Project

npx @react-native-community/cli init ThetaLocalImage

Did not install CocoaPods

:heavy_check_mark: Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … no

  • cd into ios and run pod install
  • npx react-native run-ios

select run on iOS

Delete Most of Boilerplate Code

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

function App(): React.JSX.Element {
  return (
    <SafeAreaView >
      <StatusBar/>
      <ScrollView>

      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
});

export default App;

Simulator is blank

install react-native-blob-util

npm install --save react-native-blob-util
cd ios
pod install
cd ..

...
...
Pod install took 7 [s] to run
Integrating client project
Pod installation complete! There are 65 dependencies from the Podfile and 64 total pods installed.

[!] [Codegen] warn: using experimental new codegen integration
craig@craigs-air ios % 

test blob with lorem picsum

function App(): React.JSX.Element {

  const getRemoteImage = () => {
    ReactNativeBlobUtil.fetch('GET', 'https://picsum.photos/200/100')
    .then((res) => {
      let status = res.info().status;
      console.log('status: ', status.toString());
    })

  }
  return (
    <SafeAreaView >
      <StatusBar/>
      <ScrollView>
        <Button onPress={getRemoteImage} title='Get Image'/> 
      </ScrollView>
    </SafeAreaView>
  );
}

image

test blob with fake-theta


  const remoteImageUrl = 'https://fake-theta.vercel.app/files/150100525831424d42075b53ce68c300/100RICOH/R0010015.JPG';

  const getRemoteImage = () => {
    ReactNativeBlobUtil.fetch('GET', remoteImageUrl)
    .then((res) => {
      let status = res.info().status;
      console.log('status: ', status.toString());
    })

image

cache file to local iOS storage

const getRemoteImage = () => {
  ReactNativeBlobUtil
    .config({
      fileCache:true,
    })
    .fetch('GET', remoteImageUrl)
      .then((res) => {
        let status = res.info().status;
        console.log('status: ', status.toString());
        console.log('file path: ', res.path());
    })

image

add file extension .JPG

    ReactNativeBlobUtil
      .config({
        fileCache:true,
        appendExt: 'JPG',
      })

image

set up useState

import React, {useState} from 'react';
...
...
function App(): React.JSX.Element {

  const [responseStatus, setResponseStatus ] = useState('');
  const [ localFilePath, setLocalFilePath ] = useState('');

...
...
      .then((res) => {
        let status = res.info().status;
        console.log('status: ', status.toString());
        setResponseStatus(status.toString());
        console.log('file path: ', res.path());
        setLocalFilePath(res.path());

After return

      <ScrollView>
        <Button onPress={getRemoteImage} title='Get Image'/> 
        <Text>status: {responseStatus}</Text>
        <Text>local file: {localFilePath}</Text>
      </ScrollView>

Display Local Image

      <ScrollView>
        <Button onPress={getRemoteImage} title='Get Image'/> 
        <Text>status: {responseStatus}</Text>
        <Text>local file: {localFilePath}</Text>
        <Image source={{uri: localFilePath}} 
          style={{width: 400, height: 200}}/>
      </ScrollView>

Simple Text Styling

const styles = StyleSheet.create({
  responseText: {
    padding: 15,
    fontSize: 18,
  },

Will try this next
React Native Series: How to save an image from a remote url in React Native - DEV Community

The article above references camera-roll which is now replaced with GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module that provides access to the local camera roll or photo library.

There’s some additional comments that rn-fetch-blob may be obsolete

Cannot read property 'DocumentDir' of null, js engine: hermes · Issue #832 · joltup/rn-fetch-blob · GitHub


Update: Sat Aug 17 early morning

I wasn’t able to use the article above due outdated packages. I’m now looking at this:

Using react-native-cameraroll to enable camera roll access - LogRocket Blog


Aug 17 late morning after fishing

Tried the dev.to again. Getting a little further, but still getting errors.

[Error: The operation couldn’t be completed. (PHPhotosErrorDomain error -1.)]