Please check the code. I want to retrieve payloadString data from onMessageArrived to constructor. How to do that? Basically, I want to store all the JSON data in Asyncstorage as well as also want to apply some logic within the constructor. That's why I want to retrieve data from onMessageArrived to constructor. Thanks in Advance.
import React, { Component } from 'react';
import init from 'react_native_mqtt';
import { AsyncStorage, StyleSheet, Text, View } from 'react-native';
init({
size: 10000,
storageBackend: AsyncStorage,
defaultExpires: 1000 * 3600 * 24,
enableCache: true,
sync: {},
});
export default class MqttLog extends Component {
constructor(props) {
super(props);
const client = new Paho.MQTT.Client('iot.eclipse.org', 443, 'uname');
client.onConnectionLost = this.onConnectionLost;
client.onMessageArrived = this.onMessageArrived;
client.connect({ onSuccess: this.onConnect, useSSL: true });
this.state = {
text: ['ELOGIC'],
client,
};
this.onMessageArrived.bind(this);
}
onConnect = () => {
const { client } = this.state;
client.subscribe('WORLD');
console.log('connect');
};
onConnectionLost = responseObject => {
if (responseObject.errorCode !== 0) {
var connectionLostMessage = `connection lost: ${responseObject.errorMessage}`;
console.log(connectionLostMessage);
}
};
onMessageArrived = message => {
var msg = message.payloadString;
var messageResult = `${msg}`;
console.log(messageResult);
};
render() {
return (
<View style={styles.container}>
<Text>Hello</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
},
});
Able to solve this by using async storage. When data will come from mqtt, immediately I push the data within async storage and then retrieve from async storage using key-value pair within the constructor.
Related
Here is my code:
const saveImg = async (base64Img: string, success: Function, fail:Function) => {
const isAndroid = Platform.OS === "android"
const isIos = Platform.OS === 'ios'
const dirs = isIos? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath;
const certificateTitle = 'certificate-'+((Math.random() * 10000000) | 0)
const downloadDest = `${dirs}/${certificateTitle}.png`;
const imageDatas = base64Img.split('data:image/png;base64,');
const imageData = imageDatas[1];
try{
await RNFetchBlob.config({
addAndroidDownloads:{
notification:true,
description:'certificate',
mime:'image/png',
title:certificateTitle +'.png',
path:downloadDest
}
}).fs.writeFile(downloadDest, imageData, 'base64')
if (isAndroid) {
} else {
RNFetchBlob.ios.previewDocument(downloadDest);
}
success()
}catch(error:any){
console.log(error)
fail()
}
}
I get this error:
undefined is not an object (near '...}).fs.writeFile(downloadD...')
at node_modules/react-native-webview/lib/WebView.android.js:207:16 in _this.onMessage
When I hit the download button and this runs I get the mentioned Error.
I use to get the download done with the below code modification, but I really need to show the download feedback from both android and IOS.
This works (but without notification)
await RNFetchBlob.fs.writeFile(downloadDest, imageData, 'base64')
I am using expo
I discovered that the react-fetch-blob does not work with expo, to solve it, I used the following libraries:
expo-file-system, expo-media-library, expo-image-picker,expo-notifications
This was the code to convert, download and show the notification of the image in the "expo way":
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';
import * as ImagePicker from 'expo-image-picker';
import * as Notifications from 'expo-notifications';
const saveImg = async (base64Img: string, success: Function, fail:Function) => {
const imageDatas = base64Img.split('data:image/png;base64,');
const imageData = imageDatas[1];
try {
const certificateName = 'certificate-'+((Math.random() * 10000000) | 0) + ".png"
const certificatePathInFileSystem = FileSystem.documentDirectory +certificateName ;
await FileSystem.writeAsStringAsync(certificatePathInFileSystem, imageData, {
encoding: FileSystem.EncodingType.Base64,
});
await MediaLibrary.saveToLibraryAsync(certificatePathInFileSystem);
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: true,
}),
});
await Notifications.scheduleNotificationAsync({
content: {
title: certificateName +' saved !',
body: "Click to show the certificate",
},
trigger: null,
});
setCertificatePath(certificatePathInFileSystem)
success()
} catch (e) {
console.error(e);
fail()
}
}
In order to open the images gallery on click I used this code:
useEffect(()=>{
if(certificatePath){
Notifications.addNotificationResponseReceivedListener( async (event )=> {
await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
})
})
}
},[certificatePath])
Try to call fetch after create RNFetchBlob.config
If you just wanna display an Image and not store you can show image as fallows (https://reactnative.dev/docs/next/images#uri-data-images)
<Image
style={{
width: 51,
height: 51,
resizeMode: 'contain'
}}
source={{
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
}}
/>
Call fetch on config object:
try{
const fetchConfig = await RNFetchBlob.config({
addAndroidDownloads:{
notification:true,
description:'certificate',
mime:'image/png',
title:certificateTitle +'.png',
path:downloadDest
}
})
fetchConfig.fetch('your.domain.com').fs.writeFile(downloadDest, imageData, 'base64')
if (isAndroid) {
} else {
RNFetchBlob.ios.previewDocument(downloadDest);
}
success()
}catch(error:any){
console.log(error)
fail()
}
SOLVED! : Check the reply below, many thanks to the people who helped! I also had to change the storage rules like this. It's in storage>Rules:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
I am doing this only for test purposes though. Don't allow everyone to write when you write a real program!
PROBLEM:
This is my cloud storage, how to show this image in my react native app? I tried to do it like this:
<Image style={styles.stretch} source={{
uri: 'gs://mezuniyet2r.appspot.com/images/erkek.jpg',
}}
/>
What am I missing here? It doesn't work like this. Isn't it supposed to work like this? I can't find anything like this at official documentation. Very bad documentation indeed. It doesn't say much. Can someone please help me? And this is the full code:
import React, {Component} from 'react';
import {
Platform,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
Button,
StatusBar,
} from 'react-native';
import firebase from '#react-native-firebase/app'
import firestore from '#react-native-firebase/firestore'
import { format } from "date-fns";
import storage from '#react-native-firebase/storage';
class App extends Component {
state = {
tablo: {
adSoyad: "",
yas: "",
dogumTarihi: "",
mezunDurumu: "",
}
}
constructor(props) {
super(props);
this.getUser();
this.subscriber=firestore().collection("tablo").doc
('J6mAav1kjkcjrMupeOqX').onSnapshot(doc => {
this.setState({
tablo: {
adSoyad: doc.data().adSoyad,
yas: doc.data().yas,
dogumTarihi: doc.data().dogumTarihi,
mezunDurumu:doc.data().mezunDurumu,
}
}
)
});
}
getParsedDate(date){
date = String(date).split(' ');
var days = String(date[0]).split('-');
var hours = String(date[1]).split(':');
return [parseInt(days[2]), parseInt(days[1])-1, parseInt(days[0]), parseInt(hours[0]), parseInt(hours[1]), parseInt(hours[2])];
}
getUser= async() => {
const userDocument= await firestore().collection("tablolar").doc
("J6mAav1kjkcjrMupeOqX").get()
console.log(userDocument)
}
render() {
var mezund;
var date = new String(this.state.tablo.dogumTarihi);
var date2=this.getParsedDate(date);
//const reference = storage().ref('erkek.jpg');
//var storageRef = firebase.storage().ref();
//var mountainsRef = storageRef.child('erkek.jpg');
//var mountainImagesRef = storageRef.child('images/erkek.jpg');
//mountainsRef.name === mountainImagesRef.name;
console.log(date2);
//this doesn't work though how do we do this??? it gives undefined.
if(this.state.tablo.mezunDurumu==false){mezund="Mezun Değil"}
else if(this.state.tablo.mezunDurumu=true){mezund="mezun"}
// var dtarih= new String(this.state.tablo.dogumTarihi);
return (
<View style={styles.body}>
<Text style={styles.row}>Ad Soyad: {this.state.tablo.adSoyad}</Text>
<Text style={styles.row}>Yaş: {this.state.tablo.yas}</Text>
<Text style={styles.row}>Doğum Tarihi: {date}</Text>
<Text style={styles.row}>Mezun Durumu: {mezund}</Text>
<Image style={styles.stretch} source={{
uri: 'gs://mezuniyet2r.appspot.com/erkek.jpg',
}}
/>
</View>
);
}
}
const styles=StyleSheet.create({
body:{
padding: 25,
margin:25,
backgroundColor:'orange',
flex: 1
},
stretch:{width:50,height:50,
resizeMode:'stretch',},
row:{
backgroundColor:'#fff',
borderBottomWidth:4,
}
})
export default App
The image path has to be converted into a URL that the <Image/> component can fetch and display. This asynchronous operation is best done once in the component lifecycle and stored in the state.
class App extends Component {
state = {
...,
imageUrl: null,
}
...
async componentDidMount() {
var imageRef = firebase.storage().ref('erkek.jpg');
var imageUrl = await imageRef.getDownloadURL();
this.setState({ imageUrl });
}
render() {
...
<Image style={styles.stretch} source={{ uri: this.state.imageUrl }}/>
...
}
}
You should also make sure that the user has read access to the image. You can set read and write permissions in Firebase Security Rules, see https://firebase.google.com/docs/storage/security/start#sample-rules. If you want the image to be readable by everyone set ".read": true in your rules but be careful not to set write public to prevent unwanted tampering with your project!
I am new to React Native and struggling a little to get this working. I have realtime database in Firebase which contains 'mechanic' names. I would like to retrieve these names and display them in a list.
I would like to display this data in a list and then execute some function when the user clicks on either name. I thought adding the database data to an array then looping through the array to add it to my FlatList.
The problem now is that when I execute the code, the this.setState({ mechanicsList: mechanicsTemp }); returns an error.
Error
[Unhandled promise rejection: TypeError: this.setState is not a function.
(In 'this.setState({]
* src\screens\FindMechanics.js:28:30 in <unknown>
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals
Full Code
import React, { Component } from 'react';
import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
import { Card } from 'react-native-elements'
import firebase from "firebase/app";
export default class FindMechanics extends Component {
constructor(props) {
super(props);
this.state = {
mechanicsList: [],
isDataLoaded: false
}
}
componentDidMount() {
var query = firebase.database().ref("MechanicList").orderByKey();
query.once("value")
.then(function (snapshot) {
let mechanicsTemp = [];
snapshot.forEach(function (childSnapshot) {
// key will be the auth ID for each user
var key = childSnapshot.key;
var mechanicName = snapshot.child(key + '/name').val();
mechanicsTemp.push({ _name: mechanicName, _key: key });
});
mechanicsList = mechanicsTemp;
() => this.setState({ mechanicsList: mechanicsTemp }); // This does not execute it seems - main problem I believe
//this.setState({ mechanicsList: mechanicsTemp }); - This return a warning 'this.setState is not a function'
console.log(mechanicsList); //Prints data as expected
mechanicsTemp.forEach((mechanic) => {
console.log( mechanic._name); //Prints data as expected
});
});
}
render() {
//The Card element is empty - nothing shows.
console.log(this.state.mechanicsList) //This return Array [] which indicates it is empty
return (
<SafeAreaView style={styles.container}>
<ScrollView horizontal={true}>
<TouchableOpacity>
<Card style={styles.card}>
{
this.state.mechanicsList.map((u, i) => {
return (
<View key={i}>
<Text>{u._key}</Text>
<Text>{u._name}</Text>
</View>
);
})
}
</Card>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#FFF'
},
paragraph: {
margin: 24,
fontSize: 18,
textAlign: 'center',
},
card: {
flex: 1,
width: '80%',
},
});
Console
Finished building JavaScript bundle in 384ms.
Running application on Android SDK built for x86.
Array []
1st thing, you have mechanics object in state so you need to access it like
console.log(this.state.mechanics)
2nd thing is that you are not updating state variable when you are having data, it should be like following
let mechanicsTemp = [];
snapshot.forEach(function (childSnapshot) {
// key will be the auth ID for each user
var key = childSnapshot.key;
var mechanicName = snapshot.child(key + '/name').val();
mechanicsTemp.push({_name: mechanicName, _key: key});
});
this.setState({ mechanics:mechanicsTemp })
I dunno if you still need help with this or not but I just used your code and I solved this.setState problem with binding. You can either use arrow function or bind your function:
.then(function (snapshot) {
// ..
}.bind(this));
I'm trying to connect to a device using BLE connection in react-Native on Android Device.
I need to connect to a device with a with a specific name: for example "deviceName".
I'm using react-native-ble-plx.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
ScrollView,
FlatList,
TextInput,
Platform,
Alert
} from 'react-native';
import { BleManager } from 'react-native-ble-plx';
export default class Main extends Component {
constructor(props) {
super(props);
this.state={
scaning:false,
isConnected:false,
text:'',
writeData:'',
receiveData:'',
readData:'',
bleManager: new BleManager(),
data:[],
isMonitoring:false,
}
this.bluetoothReceiveData = [];
this.deviceMap = new Map();
}
scan() {
if(!this.state.scaning) {
this.setState({scaning:true});
this.deviceMap.clear();
const { bleManager } = this.state;
bleManager.startDeviceScan(null, null, async (error, device) => {
console.log("scanning bluetooth...")
if (device.name === "Proximity") {
bleManager.connectToDevice(device.id, {
autoconnect: true,
timeout: BLUETOOTH_TIMEOUT,
isConnected: true
})
// ............
}
})
}
}
disconnect(){
bleManager.disconnect()
.then(res=>{
this.setState({data:[...this.deviceMap.values()],isConnected:false});
})
.catch(err=>{
this.setState({data:[...this.deviceMap.values()],isConnected:false});
})
}
render(){
return(
<View>
<TouchableOpacity
activeOpacity={0.7}
style={[styles.buttonView,{marginHorizontal:10,height:40,alignItems:'center'}]}
onPress={this.state.isConnected?this.disconnect.bind(this):this.scan.bind(this)}>
<Text style={styles.buttonText}>{this.state.scaning?'Search':this.state.isConnected?'Disconnect Bluetooth':'Search Bluetooth'}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'white',
marginTop:Platform.OS == 'ios'?20:0,
},
item:{
flexDirection:'column',
borderColor:'rgb(235,235,235)',
borderStyle:'solid',
borderBottomWidth:StyleSheet.hairlineWidth,
paddingLeft:10,
paddingVertical:8,
},
buttonView:{
height:30,
backgroundColor:'rgb(33, 150, 243)',
paddingHorizontal:10,
borderRadius:5,
justifyContent:"center",
alignItems:'center',
alignItems:'flex-start',
marginTop:10
},
buttonText:{
color:"white",
fontSize:12,
},
content:{
marginTop:5,
marginBottom:15,
},
textInput:{
paddingLeft:5,
paddingRight:5,
backgroundColor:'white',
height:50,
fontSize:16,
flex:1,
},
})
At the moment I receive this error: "undefined is not an object (evaluating 'b.default.startDeviceScan').
How can I fix this error? and do you think the code can work to connect directly to a device? thank you
You are exporting BleManager wrong. You have to put it between braces like this:
import { BleManager } from 'react-native-ble-plx';
You are using BleManager wrong too. You have to instantiate it in some place, I use to use it in the state, to ensure that I have only 1 BleManager and make a new Object of BleManager like this:
constructor {
....
this.state = {
....
bleManager: new BleManager(),
....
};
And then use this.state.bleManager instead of BleManager you was using like this:
const { bleManager } = this.state;
bleManager.startDeviceScan(...)
Fairly new to React native and its concepts. I have been playing with RN for a while to create an application to fetch API data from
http://jsonplaceholder.typicode.com/photos
I have been looking into the documentation of AsyncStorage to implement how i can cache the API data so that upon terminating the application, it doesn't have to deal with fetching the data from web again and again, but wasn't successfully able to implement it.
It will be great if you can provide me help/suggestion based on it. I have included my source code for the 2 important files in my application, along with the a Test.js file with how i was trying to achieve.
import React, {Component} from 'react';
import { FlatList, View, Text, AsyncStorage, ActivityIndicator } from 'react-native';
import axios from 'axios';
import GalleryDetail from './GalleryDetail';
class GalleryList extends Component {
state = { photos: []};
componentDidMount() {
axios.get('http://jsonplaceholder.typicode.com/photos')
.then(response => this.setState({ photos: response.data }))
.catch((error)=> console.warn("fetch Error: ", error));
}
getPhotos = async()=> {
try {
photos = await AsyncStorage.getItem('GalleryPhotos');
}
catch (error) {
console.error(error);
}
}
savePhotos(){
AsyncStorage.setItem('GalleryPhotos', this.state.photos);
console.log('works !');
}
renderPhoto = ({item})=> {
return <GalleryDetail photo={item}/>
}
keyExtractor = (photo, index) => photo.id;
render () {
if(!this.state.photos){
return <ActivityIndicator/>;
}
return (
<FlatList
data = {this.state.photos}
keyExtractor={this.keyExtractor}
renderItem={this.renderPhoto}
/>
);
}
}
export default GalleryList;
and GalleryDetail linked with GalleryList-
import React, {Component} from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
const GalleryDetail = (props)=> {
return (
<Card>
<CardSection style = {styles.headerContentStyle}>
<Image
style={styles.thumbnailStyle}
source = {{ uri: props.photo.thumbnailUrl}}/>
<Text style= {styles.textStyle}>{props.photo.title} </Text>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
thumbnailStyle: {
height: 60,
width: 60
},
textStyle: {
fontSize: 12,
//textAlign: 'right',
flexDirection: 'row',
justifyContent: 'flex-end',
flex: 1,
flexWrap: 'wrap',
marginLeft: 5,
marginRight: 5,
}
}
export default GalleryDetail;
My method of trying was that-
Upon launching the application, it will first look in asyncStorage, if it finds the data- it fetches from async otherwise going to the web,fetching and storing again for later use.
I tried to implement somewhat like this in a separate file since i dint wanted to breakdown my already running app. The weird broken syntax is
State = {
photos: []
}
componentDidMount() {
// just a variable acting to fetch data from the stored keyvalue pair
check = AsyncStorage.getItem("PhotosKey").then((response) => {
this.setState({"PhotosKey": response});
}).done();
if(check) {
console.log('Data was fetched!!!!!');
check();
}
else {
console.log("Data was not fetched!");
var Data = axios.get('http://jsonplaceholder.typicode.com/photos').
then(response => this.setState({ photos: response.data })).
catch((error)=> console.warn("fetch Error: ", error));
}
}
Thanks in advance!
async componentDidMount() {
const photoStorage = await AsyncStorage.getItem('GalleryPhotos')
if(photoStorage) {
try {
const photoResp = await axios.get('http://jsonplaceholder.typicode.com/photos')
const photoData = await JSON.stringify(photoResp.data)
await AsyncStorage.setItem('GalleryPhotos', photoData);
} catch(e) {
console.warn("fetch Error: ", error)
}
.then(response => this.setState({ photos: response.data }))
}
}
later
getPhotos = async()=> {
try {
photos = JSON.parse(await AsyncStorage.getItem('GalleryPhotos'));
}
catch (error) {
console.error(error);
}
}
The approach from Subramanya is basically all you need to get started, I'm just going to introduce a state management approach with redux-persist where you can definitely appreciate when your app grows.
Redux Persist is performant, easy to implement, and easy to extend.
Let say you have your app hooked up with redux and implemented a fairly organised state tree, redux-persist stores the entire app state with AsyncStorage or any storage engine of your choice.
For instance, let's assume that your API endpoint returns a collection of photos, all you need to do is update the store, and your users can expect their data is safe and saved with redux-persist.
I have not tested all the code below
Let's define the store first,
import { AsyncStorage } from 'react-native';
import { createStore, compose, applyMiddleware, } from "redux";
import { persistStore } from "redux-persist";
import ReduxThunk from "redux-thunk";
import reducers from "../reducers"
const middleWare = [ReduxThunk]
const store = createStore(
reducers,
{},
compose(applyMiddleware(...middleWare))
)
// you can define more parameters, like blacklist or whitelist a reducer
// also, specify storage engine
persistStore(store, { storage: AsyncStorage });
export default store;
At your app's entry point,
import React, { Component } from "react";
import { Provider } from "react-redux";
import Router from "./Router";
import store from './store';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Provider store={store}>
<Router /> // navigator
</Provider>
);
}
}
Finally, your API logic.
// action creator
export storePhoto = photos => {
return {
type: 'STORE_PHOTOS',
payload: photos
}
}
// photos reducer
import { REHYDRATE } from 'redux-persist/constants';
export default (state = {}, action) => {
switch (action.type) {
case STORE_PHOTOS:
return { ...state, photos: action.payload }
// this is where `redux-persist` handles caching
case REHYDRATE:
var incoming = action.payload;
if(incoming) return { ...state, ...incoming }
return state;
default:
return state;
}
};
To retrieve data, you will see that redux abstracts away all the excess logics and there is no more setItem, getItem because redux-persist does that automagically for your already.
import { connect } from "react-redux";
import { storePhotos } from "./actions";
class GalleryList extends Component {
async componentDidMount() {
const photos = await axios.get('http://jsonplaceholder.typicode.com/photos');
storePhoto(photos)
}
renderPhoto = ({ item }) => <GalleryDetail photo={item}/>
keyExtractor = (photo, index) => photo.id;
render () {
return (
<FlatList
data = {this.props.photos}
keyExtractor={this.keyExtractor}
renderItem={this.renderPhoto}
/>
);
}
}
// pull data from photos reducer
const mapStateToProps = ({ photos }) => {
return {
photos: photos.photos
}
}
export default connect(mapStateToProps, { storePhotos })(GalleryList);
To summarise,
Install redux-persist in you project.
Import persistStore and autoRehydrate form redux-persist.
Add autoRehydrate to your store.
Pass your store to persistStore.
Listen to the persist/REHYDRATE action on your reducer and populate state accordingly.
Hope my answer helps!
Answer
Caching the data for a specific period of time
const cacheIntervaInHours = 24
const cacheExpiryTime = new Date()
cacheExpiryTime.setHours(cacheExpiryTime.getHours() + cacheIntervalInHours)
const lastRequest = await AsyncStorage.getItem("lastRequest")
if (lastRequest == null || lastRequest > cacheExpiryTime) {
fetch(`${apiUrl}/blogPosts/recent`)
.then(async (response) => {
return await response.json()
})
.then(async (json) => {
if (!json || json.length == 0) {
throw new Error()
}
AsyncStorage.setItem("lastRequest", new Date());
return await AsyncStorage.setItem('blogPosts', JSON.stringify(json))
})
.catch(error => {
console.error(error)
})
}