ipfs.cat returns "undefined" in React-native

[ZTECH10]

• Version: Ipfs-api 26.1.2

• Platform: React-native-CLI (Android emulator)

• Subsystem:

Severity:

Description:

On React-native: When I add a buffered string(i.e. Buffer(str) ) to IPFS using ipfs.add, the buffered string is added successfully and IPFS returns the hash.

When I try to retrieve the buffered string via ipfs.cat, ipfs.cat returns "undefined".

On Node.jS and ReactJs: I do not have this problem. Both ipfs.add and ipfs.cat works.

Is the problem related to pinning in IPFS? would changing the ipfs-api version in packag.json help? would changing the cat.js help ?

Steps to reproduce the error:

When I run the app.js file, I get the above error (ipfs.cat return "undefined")

import React, {useState, useRef} from 'react';
import {StyleSheet, Text, View, StatusBar, Button} from 'react-native';

const CryptoJS = require('crypto-js');
const ipfsAPI = require('ipfs-api');
// Connceting to the ipfs network via infura gateway
const ipfs = ipfsAPI('ipfs.infura.io', '5001', {protocol: 'https'});

export default function App() {
  const [number, setNumber] = useState(0);
  const [hash, setHash] = useState(' ');
  console.log('printing: ', number);
  //console.log('testing:', ipfs);


  const handleCaseAdd = () => {
    setNumber(1);

    // Encrypt
    const ciphertext = CryptoJS.AES.encrypt(
      JSON.stringify('my message'),
      'secret key 1234',
    ).toString();
    console.log(' Ciphertext: ', ciphertext); // 'ciphertext
    console.log('Buffered ciphertext: ', Buffer(ciphertext));

    // Adding the encrpyted file to IPFS
    ipfs.add(Buffer(ciphertext), {pin: true}, (error, result) => {
      if (error) {
        console.log(error);
        return;
      }
      setHash(result[0].hash);
      console.log('File added succesfully');
      console.log('IPFS result: ', result);

    });
  }; // end of the function

  const handleCaseGet = fileHash => {
    //const fileHash = hash;
    console.log('fileHash (before) :', fileHash);

    ipfs.files.cat(fileHash, function(err, bufferedCiphertext) {
      console.log('fileHash (after) :', fileHash);
      console.log('Getting Buffered ciphertext: ', bufferedCiphertext);


    });
  }; // end of the function

  //let confirmed;
  //confirmed = true;
  return (
    <View style={styles.container}>
      <View style={styles.first}>
        <View style={styles.box1} />
        <View style={styles.box2} />
      </View>
      <View>
        <Button title="Add" onPress={handleCaseAdd} />
      </View>

      <Text> Number: {number} </Text>
      <Text> Hash: {hash} </Text>
      <View>
        <Button title="Get" onPress={handleCaseGet.bind(this, hash)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    //alignItems: "center",
    //justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
  },
  first: {
    backgroundColor: 'green',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
  },

  box1: {
    backgroundColor: 'dodgerblue',
    width: 50,
    height: 50,
    //flex: 1,
  },
  box2: {
    backgroundColor: 'gold',
    width: 50,
    height: 50,

    //alignSelf: "flex-start",
  },
});

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[ZTECH10]

I tried to import and use the "ipfs-http-client" in my react native app.js. However, I got the following error: "error: not implemented" I am using "ipfs-http-client": "^42.0.0", "node-libs-react-native": "^1.2.0", "react": "16.11.0", "react-native": "0.62.2", –

I do not know why I am getting this error. Has anyone got this error before?

[achingbrain]

Please can you post your updated code?

The API has changed significantly between ipfs-api and ipfs-http-api - please see the migration guide for how to upgrade.

Notably in the original example you're using callbacks and the updated version is all async/await.

[acostalima]

@ZTECH10 have a look at https://github.com/ipfs-shipyard/react-native-ipfs-demo. There are instructions over there that go into detail on how to get the HTTP client up and running in a React Native app. Feel free to play around with the demo. If then you still run into issues, please let us know.

[acostalima]

@achingbrain maybe we can close this for the time being? This issue is one year old too.

[achingbrain]

Agreed, I think we're good to close now there's a demo with instructions of how to get the http client working on RN.

Thanks!