ipfs.cat returns "undefined" object in React-native - buffer

Question

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 and the hash, 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? or would changing the ipfs-api version in packag.json help?
Any help would be highly appreciated.
Below is the app.js code used for React-Native
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",
},
});

Answer 1

ipfs-api has been deprecated for two years, the replacement is ipfs-http-client - could you please try with that module instead?
https://www.npmjs.com/package/ipfs-http-client