I'm creating an app for tourism, and all my data is coming from an API. I'm getting it from the fetch method:
constructor(){
super()
this.state = {
fetching: false,
api: []
}
}
componentWillMount(){
this.setState({ fetching: true })
api.getMonuments().then(res => {
this.setState({
api: res,
fetching: false
})
})
}
but here is a big problem. If the user doesn't have Internet he cant use the app... What I want is to save the data. Everytime the user starts the app if there is internet he fetch the data and save it and if there is no internet he uses the data that were saved on the phone... How can I accomplish that?
I suppose I have to use AsyncStorage but I don't know how. Another problem is that the images that I get from the API is just a path and what I would like to do, is to download them and save them. Basically I want the app to be functional even when the user has no internet.
Here is a sample of the data I'm getting from the API.
Hope you can help me! Thanks in advance 😉
Related
I'm having trouble with my Realtime Database integration inside my React Native project. I'v followed the install guide from here https://rnfirebase.io/database/usage(did the initial getting started install also). I'v tried reading a value from the database but NOTHING gets logged in the console.log.
import database from '#react-native-firebase/database';
function TestComponent( props ) {
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
database().ref('/did').once('value').then(snapshot => {
console.log('DATA: ', snapshot.val());
});
};
return (
<View>
<Button title="DATA" onPress={fetchData} />
</View>
);
}
My database structure looks like this:
I'v tried everything. Made the function async and not async, moved the function inside useEffect(), took out useEffect() and left a normal function that run with a button click. I'v tried to fetch the data using Axios and adding .json to the URL but NOTHING logs data, I don't know if the database doesn't answer or if the code is the problem. My database().ref() is working fine because when I log it points to the reference URL. Also my rules are true for both read and write so no problem there. Used Postman to make a fetch and it worked perfectly.
In my react native (Expo) application the user has the possibility to select images for a group from the gallery to upload them to the server.
When the User selects the images in the Mediapicker Screen i store the list of the uris in the Asyncstorage and navigate back to the "group screen".
Here i read the data from the asyncstorage
_retrieveUpload = async () => {
try {
const value = await AsyncStorage.getItem("upload_que");
if (value !== null) {
this.setState({ uploadQueue: JSON.parse(value) });
}
} catch (error) {
console.log(error);
}
};
in the next step i created a component which takes this.state.uploadQueue as property, iterate over the values and upload them to the server.
This is working as long as the component is mounted and the user does not leave the screen.
I read that there is no possibility for a background-task in expo, but how can i start something like a service which runs independent from the actual mounted component?
First of all, can you post you Upload Component source code for more details.
Also please try in your upload code if you have await syntax, remove it and work with 'promise' and 'then' syntax if you need to do something after upload.
Here's the flow of how my end-product should work:
When the user opens the app for the first time, fetch all the data
i.e., including images(150+) and relevant JSON objects.
On opening the app subsequently, the images and data should load
from local storage i.e., no need for internet at all.
I know it seems weird but this is my use case:
The product is a Wayfinder running on Android Box(55-inch touchscreen TV ) which will be placed in the shopping mall. It will not have access to the internet unless I manually connect it.
Hence it should load the data when opening for the first time i.e. when I'm configuring the application.
Solutions I have come across:
Realm: Local database management with excellent support for react-native - my option right now
Native Async Storage: Not suitable for large data
SQLite: Not comfortable with SQL queries
I'm still looking for options on how differently this problem can be tackled. Also, I'm familiar with Redux.
Thanks.
Check out react-native-fs (or expo-file-system if working with expo).
It is specially designed to store files on the device. In your component, it would look something like this:
const RNFS = require('react-native-fs');
RNFS
.downloadFile({ fromUrl: myURL, toFile: myFilePath })
.promise
.then(res => console.log('Done'));
use pouchDB database , this is work with indexDB local browser database
call XHR request for image and convert response to binary data and store in local database
when need to preview image , get from database and make a blobUrl and show in img tag
axios.get(url, {
progress: false, responseType: 'arraybuffer',
onDownloadProgress: (progressEvent) => {
precent = (100 * progressEvent.loaded / progressEvent.total)
console.log(precent)
}
})
.then(resp => {
//get db
let db = $db.dbModel
//set attach
db.get(doc._id).then((doc) => {
db.putAttachment(doc._id, 'index.mp4', doc._rev, new Blob([new Uint8Array(resp.data)], {type: 'video/mp4'}), 'video/mp4')
.then(res => {
// console.log('success store file')
})
})
})
https://github.com/mohammadnazari110/pwa_offline_video_download
I'm using Dyson to host a little mock server for my React Native app, and trying to fetch from the server. The server appears to be running well and when I visit my desired url, http://localhost:3000/stations, in my browser, I get a nice JSON response.
In my React Native action, though, I get Network request failed:
export function fetchStations() {
return dispatch => {
dispatch({ type: "GET_STATIONS_START" });
fetch("http://localhost:3000/stations")
.then(res => {
return res.json();
})
.then(json => {
dispatch({ type: "GET_STATIONS_SUCCESS", payload: json.stations });
})
.catch(error => {
console.warn(error);
dispatch({ type: "GET_STATIONS_FAILURE", payload: error });
});
};
}
Using a static local URL works, and using, say, the Google Maps API works (even though it's not what I want, it's just a sample API to try).
I would think I may be calling the url wrong but it works in the browser so that seems doubtful. My guess is that is has something to do with iOS not liking http requests (only accepting https), unless you set some setting somewhere (I've been through this in native iOS development).
If this is the problem, how do I fix it from React Native? Or, what is the actual problem?
PS. I'm using dyson rather than json-server because for some reason I can't get json-server to work. See my other post. Somewhere here :)
I figured it out. The device (simulator) doesn't have access to localhost so I had to set my url to http://127.0.0.1:3000/stations and it works like a dream.
I am trying to retrieve the json response from api url using fetch (method : GET) in react-native.
constructor(props){
super(props);
this.state = {jsonData: {}};
}
componentWillMount() {
console.log("inside componentWillMount");
fetch('http://localhost:3000/listData')
.then((response) => {console.log('response: '); return response.json();})
.then((responseJson) => {console.log('responseData: '+JSON.stringify(responseJson)); return this.setState({jsonData: responseJson});})
.catch((err) => {console.log(err)});
}
The api returns data in this format:
{
object: 'list',
data: [...]
}
The api url works via curl. I also tried to run the fetch part of the code standalone using node by installing node-fetch and it printed the responseData properly.
But, in react-native, it doesn't print any of the console log statements inside the then function of fetch nor does it set the state of jsonData.
Could you please tell me what could be the problem? I have been googling around for quite a long time trying to find what could be the issue.
EDIT
I tried the async fetch as follows:
componentWillMount() {
console.log("inside componentWillMount");
this.fetchData().done();
}
async fetchData(){
const response = await fetch('http://localhost:3000/listData')
const json = await response.json();
const data = json.url;
console.log('data'+url);
}
Still, the same issue persists.
I am not able to understand why it works with the facebook url and not my local api url
SOLUTION
Thanks to Michael Cheng for pointing me in the right direction.
I found this link :
https://github.com/react-community/create-react-native-app/issues/154 .
Code Fix:
I just replaced the localhost with my ipv4 address as http://myserveripv4address:3000/listData and it worked.
Version:
react-native#0.50.4
Device : Android
some ideas:
if is iOS, you need the remote url to be https or disable this security feature;
You may need to mark your fetch() as async function;
Try to make an async fetch w/o promise.