Working on a react-native app that records coordinates of where a user walked in a 'memory', and storing the memories (with a description) and a set of coordinates in Realm.
I've used ListView in a project with a different database, but using the realm-listview I'm unable to get the descriptions of the memories rendered on a page.
Storing my realm setup in one file that looks like the below. Main action is storing the data in the Memory/Coordinate Schemas, and getting the data to use in the ListView using the RealObjects.countMemories() function. It is correctly returning an array of realm objects when I look at it in the console.
export default class RealmObjects {}
RealmObjects.MemorySchema = {
name: 'Memory',
properties: {
description: 'string',
coords: {type: 'list', objectType: 'Coordinate'},
}
}
RealmObjects.CoordinateSchema = {
name: 'Coordinate',
properties: {
longitude: 'double',
latitude: 'double',
timeStamp: 'double'
}
}
RealmObjects.saveMemory = function(coordinates, description) {
console.log('---------------realm write-------------')
console.log(description)
console.log(coordinates)
realm.write(() => {
let memory = realm.create('Memory', {
description: description,
id: 1
});
let coordList = memory.coords
for (var i = 0; i < coordinates.length; i++) {
console.log(i)
console.log(coordinates[i].timeStamp)
coordList.push({longitude: coordinates[i].longitude,
latitude: coordinates[i].latitude,
timeStamp: coordinates[i].timeStamp});
console.log(memory.coords[i].timeStamp)
}
});
}
RealmObjects.countMemories = function() {
console.log(realm.objects('Memory'));
return realm.objects('Memory');
}
import Realm from 'realm';
let realm = new Realm({schema: [RealmObjects.MemorySchema, RealmObjects.CoordinateSchema]});
In my component, I'm importing the ListView component like this: import { ListView } from 'realm/react-native';.
Constructor setup like this:
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(RealmObjects.countMemories()),
};
console.log('datasource')
console.log(this.state.dataSource)
}
Render function setup like this:
render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.buttonLeft} onPress={() => this.goBack()}>
<Text>Back</Text>
</TouchableHighlight>
<ListView style={styles.listview}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>something: {rowData.description}</Text>}
/>
</View>
);
}
This render method will not produce anything in the ListView. For now, I'm just trying to get a list of the descriptions of the memories to display on screen.
New to both react-native and realm, so not sure if my problems reside here or somewhere else. Any help is appreciated!
EDIT: Changed the render row and row data items to look like this to log data, which logs the correct descriptions of each row in the console, but still does not display anything on the screen:
renderRow(rowData) {
console.log('my data');
console.log(rowData.description);
return (
<Text>{rowData.description}</Text>
);
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.buttonLeft} onPress={() => this.goBack()}>
<Text>Back</Text>
</TouchableHighlight>
<ListView style={styles.listview}
dataSource={this.state.dataSource}
renderRow={(rowData) => this.renderRow(rowData)}
/>
</View>
);
}
EDIT: Current styles:
const styles = StyleSheet.create({
button: {
paddingHorizontal: 12,
alignItems: 'center',
marginHorizontal: 10,
top: 50,
backgroundColor: 'rgba(236,64,122,0.7)',
paddingVertical: 12,
},
listview: {
top: 100,
backgroundColor: 'rgba(236,64,122,0.7)',
},
container: {
flex: 1,
flexDirection: 'column',
marginTop: 60,
},
buttonRight: {
position: 'absolute',
top: 0,
right: 5,
backgroundColor: 'rgba(236,64,122,0.7)',
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
},
buttonLeft: {
position: 'absolute',
top: 0,
left: 5,
backgroundColor: 'rgba(236,64,122,0.7)',
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
}
});
I too had faced the same problem. But I converted the response from the realm into array and then passed it to flat list and it worked like a charm.
async getAllPrinterArray() {
realm = await this.getRealMObject();
favoritePrinterArray = realm.objects(constants.SCHEMA_SAVE_PRINTERS);
console.log(favoritePrinterArray);
if (favoritePrinterArray.length > 0) {
this.setState({ enable: false });
arr4 = Array.from(favoritePrinterArray);
}
return arr4;
}
<FlatList
data={printerObject}
numColumns={2}
renderItem={({ item }) => this.renderListRow(item)}
/>
Related
I am having 2 problems using React Native and Firebase Real Time Database.
When I add something to the list with the text input, all the list itens are duplicated except the item that I just added, this problem is only solved when I refresh the app screen.
When I remove something from firebase dashboard or other client, the list is not updated real time.
import React, {useState, Component} from 'react';
import {
Text,
View,
Switch,
StyleSheet,
FlatList,
TextInput,
Button,
TouchableOpacity,
SafeAreaView,
VirtualizedList,
} from 'react-native';
import database from '#react-native-firebase/database';
class MenuBreakFastScreen extends React.Component {
state = {newItem: ''};
state = {itens: []};
componentDidMount() {
let dbRef = database().ref('/cafe/itens/');
this.listenerFirebase(dbRef);
}
listenerFirebase(dbRef) {
dbRef.on('value', dataSnapshot => {
const newItens = JSON.parse(JSON.stringify(this.state.itens));
dataSnapshot.forEach(child => {
newItens.push({
name: child.val().name,
key: child.key,
});
this.setState({itens:newItens});
});
});
}
addItem() {
if (this.state.newItem === '') {
return;
}
database().ref('/cafe/itens/').push({
name: this.state.newItem,
});
this.setState({
newItem: '',
});
}
render() {
const {itens} = this.state;
const {newItem} = this.state;
const renderItem = ( {item}) => {
return(
<ItemAsset title={item.name}/>
);
}
return (
<SafeAreaView
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<FlatList
data={itens}
renderItem={renderItem}
keyExtractor={item => item.key}
/>
<SafeAreaView style={{flexDirection: 'row'}}>
<TextInput
style={styles.input}
onChangeText={text =>
this.setState({
newItem: text,
})
}
value={newItem}
/>
<TouchableOpacity style={styles.Botao} onPress={() => this.addItem()}>
<Text style={styles.BotaoTexto}>+</Text>
</TouchableOpacity>
</SafeAreaView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
texto: {
fontSize: 35,
},
input: {
color: '#000',
fontSize: 22,
borderWidth: 1,
flex: 8,
margin: 10,
},
BotaoTexto: {
color: '#fff',
fontSize: 22,
},
Botao: {
backgroundColor: '#000',
marginTop: 10,
padding: 10,
flex: 1,
alignItems: 'center',
margin: 10,
},
ListaContainer: {
flexDirection: 'row',
backgroundColor: '#000',
flex: 1,
},
item: {
backgroundColor: '#000',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
flexDirection: 'row',
},
title: {
color: '#ffff',
fontSize: 32,
},
});
const ItemAsset = ( {title} ) => {
return(
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}
export default MenuBreakFastScreen;
When you are listen for real time changes on real-time database it will send all the items with snapshot when any data is changed. That happens because you are listen for whole list, not only for a single item. Therefore you do not need to get the current list from state. You just have to set the state with retrieved data.
listenerFirebase(dbRef) {
dbRef.on('value', dataSnapshot => {
const newItens = []; // This should be initially empty array. That's all.
dataSnapshot.forEach(child => {
newItens.push({
name: child.val().name,
key: child.key,
});
});
this.setState({itens:newItens});
});
}
After correcting this part the error you got when removing data will be also resolved.
I have this code where I am trying to render an element:
render() {
//console.log('this.state.showRespondTo:',this.state.showRespondTo);
return (
<View style={{flex:1}}>
{this.displayMessage()}
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<MultiSelectList
style={{backgroundColor: '#ffe4c4'}}
data={this.state.items}
renderItem={this.renderListItems}
numColumns={2}
contentContainerStyle={{}}
onEndReachedThreshold={0.5}
maxToRenderPerBatch={2}
initialNumToRender={4}
ListHeaderComponent={this.renderHeader}
getItemLayout={(data, index) => (
{length: Dimensions.get('window').height/2, offset: Dimensions.get('window').height/2 * index, index}
)}
backgroundColor={this.state.backgroundColor}
//contentContainerStyle={{backgroundColor: '#1e4683'}}
/>
</View>
</TouchableWithoutFeedback>
</View>
);
}
displayMessage() {
if(this.state.showRespondTo) {
console.log('this.state.showRespondTo:', this.state.showRespondTo);
return ( <RespondToInquiry/> )
}
}
This is what RespondToInquiry is:
import React, { Component } from 'react'
import {
Text,
TextInput,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
View,
Dimensions,
Keyboard
} from 'react-native'
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
import { Map } from 'immutable';
import Modal from 'react-native-modal';
import firebase from 'react-native-firebase';
export default class RespondToInquiry extends React.PureComponent {
constructor() {
super()
this.state = {
_markedDates: {},
//_selectedDay: new Date().dateString,
modalVisible: false,
message: 'Hi, I would like to rent an item from you.',
rentButtonBackground: '#6de3dc',
datesArray: []
}
this.onDayPress = this.onDayPress.bind(this)
}
/*initialState = {
[new Date()]: { 'selected': false,
customStyles: {
container: {
backgroundColor: '#6de3dc',
},
text: {
color: 'white',
fontWeight: 'bold'
},
},
}
}*/
showCalendar = () => {
return (
<Calendar
style={{
borderWidth: 0,
borderRadius: 4,
}}
theme={{
todayTextColor: '#6de3dc',
selectedDayBackgroundColor: '#6de3dc',
}}
markingType={'custom'}
markedDates={this.state._markedDates}
// Initially visible month. Default = Date()
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={new Date()}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
// Handler which gets executed on day press. Default = undefined
onDayPress={day => this.onDayPress(day)}
// Handler which gets executed on day long press. Default = undefined
onDayLongPress={day => {
console.log('selected day', day)
}}
// Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
monthFormat={'MMM d, yyyy'}
// Handler which gets executed when visible month changes in calendar. Default = undefined
onMonthChange={month => {
console.log('month changed', month)
}}
// Hide month navigation arrows. Default = false
//hideArrows={true}
// Replace default arrows with custom ones (direction can be 'left' or 'right')
//renderArrow={(direction) => (<Arrow />)}
// Do not show days of other months in month page. Default = false
hideExtraDays={true}
// If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
// day from another month that is visible in calendar page. Default = false
//disableMonthChange={true}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={0}
// Hide day names. Default = false
//hideDayNames={true}
// Show week numbers to the left. Default = false
//showWeekNumbers={true}
// Handler which gets executed when press arrow icon left. It receive a callback can go back month
onPressArrowLeft={substractMonth => substractMonth()}
// Handler which gets executed when press arrow icon left. It receive a callback can go next month
onPressArrowRight={addMonth => addMonth()}
/>
)
}
onDayPress = (day) => {
const _selectedDay = day.dateString;
let marked = true;
if (this.state._markedDates[_selectedDay]) {
// Already in marked dates, so reverse current marked state
marked = !this.state._markedDates[_selectedDay].selected;
console.log('marked:', marked);
// Create a new object using object property spread since it should be immutable
// Reading: https://davidwalsh.name/merge-objects
const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: { 'selected': marked,
customStyles: {
container: {
backgroundColor: '#6de3dc',
},
text: {
color: 'white',
fontWeight: 'bold'
},
},
} } }
// Triggers component to render again, picking up the new state
this.setState({ _markedDates: updatedMarkedDates }, () => {
console.log('updatedMarkedDates:', this.state._markedDates);
});
}
else {
// Create a new object using object property spread since it should be immutable
// Reading: https://davidwalsh.name/merge-objects
const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: { 'selected': true,
customStyles: {
container: {
backgroundColor: '#6de3dc',
},
text: {
color: 'white',
fontWeight: 'bold'
},
},
} } }
// Triggers component to render again, picking up the new state
this.setState({ _markedDates: updatedMarkedDates }, () => {
console.log('updatedMarkedDates:', this.state._markedDates);
});
}
}
waitToStoreDates = () => new Promise((resolve) => {
let x = 0;
let datesArray = [];
for(date in this.state._markedDates) {
console.log("Date Object: ",date);
if(this.state._markedDates[date].selected) {
datesArray.push(date);
}
x++;
}
if(x == Object.keys(this.state._markedDates).length) {
console.log("x:",x);
console.log('datesArray in waitToStoreDates:', datesArray);
this.state.datesArray = datesArray;
resolve();
}
})
async processMarkedDates() {
await this.waitToStoreDates();
}
setModalVisible(visible) {
this.setState({ modalVisible: visible })
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('componentDidUpdate in InitiateRent:', this.props, prevProps, prevState, snapshot)
}
_renderModalContent = () => (
<TouchableWithoutFeedback onPress={() => {console.log('tapped')}}>
<View
style={{
paddingTop: 5,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
marginTop: 0,
flex: 1,
width: Dimensions.get('window').width
}}>
<View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text
style={{
flex: 0,
width: Dimensions.get('window').width,
color: 'white',
fontWeight: '700',
marginBottom: 5,
}}>
Date(s) Needed:
</Text>
{this.showCalendar()}
</View>
<View style={{ flexDirection: 'column', flex: 0.2, marginBottom: 10 }}>
<TextInput
style={{
width: 280,
flex: 1,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: '#ffffff',
paddingLeft: 5,
borderRadius: 4,
}}
onChangeText={text => this.setState({ message: text })}
value={this.state.message}
multiline={true}
numberOfLines={2}
/>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
this.setState({ rentButtonBackground: '#94ebe6' })
setTimeout(() => {
this.setState({ rentButtonBackground: '#6de3dc' })
let timestamp = new Date().getTime().toString();
this.processMarkedDates();
console.log("this.state.datesArray", this.state.datesArray);
dataChat = {
"title": "Rental Inquiry",
"lastMessage": this.state.message,
"timestamp": timestamp
}
dataMessage = {}
dataMessage[timestamp] = {
"name": "eamon",
"message": this.state.message,
"timestamp": timestamp,
"dates": JSON.stringify(this.state.datesArray)
};
this.sendRentMessage(dataChat, dataMessage, timestamp)
this.setModalVisible(false)
}, 1)
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
SEND
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
componentDidMount() {
firebase.messaging()
.hasPermission()
.then(enabled => {
if (!enabled) {
console.log('permissions disabled');
this._getPermission();
}
console.log('permissions enabled');
firebase.messaging().subscribeToTopic('all').catch((error) => {alert(error)});
firebase.messaging().getToken()
.then(fcmToken => {
if (fcmToken) {
//USE THIS FOR INDIVIDUAL DEVICE MESSAGES?
console.log(fcmToken);
} else {
alert("User doesn't have a token yet");
}
}).catch((error) => {
alert(error);
});
}).then(() => {
}).catch((error) => {alert(error)});
}
_getPermission = () => {
firebase.messaging()
.requestPermission()
.catch(error => {
// User has rejected permissions
// this._getPermission();
Alert.alert(
'ERROR',
"You must enable push notifications for the messaging system to work! If you don't you won't be able to use SnagIt! Please enable notificaitons in your phone - go to: Settings > Notifications > SnagIt.",
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
});
}
sendRentMessage(dataChat, dataMessage, timestamp) {
// Add a new document with a generated id. //user-user //send generated ID and then change to message id in cloud
/*let addChat = firebase.firestore().collection('chats').doc(timestamp);
// Add a new document with a generated id. //user-user //send generated ID and then change to message id in cloud
let addMessage = firebase.firestore().collection('messages').doc(timestamp);
// Set the 'capital' field of the city
addChat.update(dataChat).then(() => {
// Set the 'capital' field of the city
addMessage.update(dataMessage).catch((error) => {
//alert(error);
addMessage.set(dataMessage).catch((error) => {
alert(error);
});
});
}).catch((error) => {
//alert(error);
addChat.set(dataChat).catch((error) => {
alert(error);
}).then(() => {
addMessage.update(dataMessage).catch((error) => {
//alert(error);
addMessage.set(dataMessage).catch((error) => {
alert(error);
});
});
})
});*/
}
render() {
return (
<View style={{flex: 1}}>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onBackdropPress ={() => {console.log("backdrop pressed"); this.setModalVisible(false)}}>
{this._renderModalContent()}
</Modal>
</View>
)
}
}
For console output I see:
this.state.showRespondTo: – true
So I know that the conditional is changing to the state where it should render the component. I also see half of the screen (where the component should be) as blank/white background. This is because of how I have my flexbox setup, and is the behavior I want. But the element that is supposed to be rendered isn't showing up. The state of the conditional changes on a didFocus listener, like this:
componentDidMount() {
this._sub = this.props.navigation.addListener(
'didFocus',
() => {
if(this.props.navigation.getParam('data', '') != '') {
console.log('showRespondTo fired.');
this.setState({showRespondTo: true});
}
}
);
....
}
Why doesn't my InitiateRent component render where the blank/white area is (see image below)?
Just something silly, this.state.modalVisible is set to false initially so the modal wasn't showing up.
Teaching myself react native by making a chat app, now when someone clicks on a delete button next to the message (not visible in this code as it's irrelevant), it deletes it from the database but I need to make the changes here in the app.
For this I have set a ref one each of the <Message/> components and I have the ref which matches the ref on the component. But i need to target the actual component node which has that ref.
Is refs the way to go about doing this? If not, what else can I do?
Many thanks
edit: Full code:
import React, { Component } from "react"
import { ListView, View, Text, StyleSheet, TextInput, TouchableHighlight } from "react-native"
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/FontAwesome'
import { Hideo } from 'react-native-textinput-effects';
import Message from './Message'
export default class Chat extends Component {
constructor() {
super();
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.onSend = this.onSend.bind(this);
this.state = {
messages: this.ds.cloneWithRows([]),
messageContent: '',
};
}
componentWillMount() {
// Get all of the messages from firebase database and push them into "nodes" array which then gets set in the "messages" state above in handleChat.
const chatRef = firebase.database().ref().child('general');
this.messages = [];
chatRef.on('child_added', snap => {
this.messages.push({user: snap.val().user.name,
text: snap.val().text,
messageId: snap.key
})
this.handleChat(this.messages);
}
).bind(this);
// this is what happens when someone removes a comment
chatRef.on('child_removed', snap => {
const messageId = snap.key; // <- This is the key in the database, for example: '-KVZ_zdbJ0HMNz6lEff'
this.removeMessage(messageId);
})
}
removeMessage(messageId){
let messages = this.messages.filter(message => message.messageId !== messageId);
this.handleChat(messages);
}
handleChat(messages) {
this.setState({messages: this.ds.cloneWithRows(messages)})
}
onSend(messages) {
const generalRef = firebase.database().ref().child('general');
const user = firebase.auth().currentUser;
generalRef.push(
{
_id: 1,
text: this.state.messageContent,
createdAt: new Date().getTime(),
user: {
_id: 2,
name: user.displayName,
avatar: 'http://mdepinet.org/wp-content/uploads/person-placeholder.jpg'
}
});
this.setState({messageContent: ''})
}
removeMessage(messageId){
let messages = this.messages.filter(message => message.messageId !== messageId);
this.handleChat(messages);
}
render() {
return (
<View style={{flex: 1, alignItems: 'flex-end'}}>
<ListView
style={{ marginBottom: 60 }}
enableEmptySections={true}
dataSource={this.state.messages}
renderRow={message => <Message name={message.user} text={message.text}/> }/>
<Hideo
style={{position: 'absolute', bottom: 0}}
onChangeText={messageContent => this.setState({messageContent})} value={this.state.messageContent} placeholder="Name"
iconClass={Icon}
iconName={'envelope'}
iconColor={'white'}
iconBackgroundColor={'#222'}
inputStyle={{ color: '#464949' }}
/>
<TouchableHighlight onPress={this.onSend} style={{position: 'absolute', alignItems: 'center', bottom: 10, right: 10, borderRadius: 10, backgroundColor: '#d4af37'}}>
<Text style={{color: 'whitesmoke', fontSize: 20, padding: 5}}>Send</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
username: {
fontFamily: 'AvenirNext-Bold'
},
comment: {
fontFamily: 'AvenirNext-Regular'
},
bubble: {
flex: 1,
width: 250,
backgroundColor: '#f5f5f5',
margin: 15,
padding: 10,
borderRadius: 20
}
})
Using refs to ListView row items is not a Good idea. As Elmeister told we just need to remove the message elements from array and update the ListView datasource in order to delete a message from ListView.
Here is a sample code which will give you an idea of how you can do the same in your app.
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableHighlight,
} from 'react-native';
class StackOverflow extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.messages = this.getMessages();
this.state = {
dataSource: ds.cloneWithRows(this.messages)
};
}
getMessages() {
let arr = [];
for (let i = 0; i < 100; i++) {
arr.push({
user: 'User ' + i,
text: 'This is a sample user message ' + i,
messageId: 'messageId' + i,
});
}
return arr;
}
onDeletePress(messageId) {
this.messages = this.messages.filter(message => message.messageId !== messageId);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.messages)
});
}
renderRow(rowData) {
return (
<View style={{padding:8}}>
<Text>{rowData.user}</Text>
<Text>{rowData.text}</Text>
<TouchableHighlight
style={{alignSelf :'flex-end',backgroundColor:'red'}}
onPress={this.onDeletePress.bind(this,rowData.messageId)}>
<Text>Delete</Text>
</TouchableHighlight>
</View>
);
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
}
AppRegistry.registerComponent('StackOverflow', () => StackOverflow);
In the above example, We are creating dummy messages and saving them in messages array and updating dataSource with messages.
When onDeletePress is called we pass the messageId to that method, and below line
this.messages = this.messages.filter(message => message.messageId !== messageId);
removes the message from messages array. Then we update the dataSource state which will update the ListView.
In your code probably these changes you will have to make,
Change handleChat
handleChat(messages) {
this.setState({messages: this.ds.cloneWithRows(messages)})
}
Update Chat component like below,
import React, {Component} from "react"
import {ListView, View, Text, StyleSheet, TextInput, TouchableHighlight} from "react-native"
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/FontAwesome'
import {Hideo} from 'react-native-textinput-effects';
import Message from './Message'
export default class Chat extends Component {
constructor() {
super();
this.chatRef = firebase.database().ref().child('general');
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.onSend = this.onSend.bind(this);
this.state = {
messages: this.ds.cloneWithRows([]),
messageContent: '',
};
}
componentWillMount() {
// Get all of the messages from firebase database and push them into "nodes" array which then gets set in the "messages" state above in updateMessageList.
this._messages = [];
this.chatRef.on('child_added', snap => {
this._messages.push({
user: snap.val().user.name,
text: snap.val().text,
messageId: snap.key
});
this.updateMessageList(this._messages);
}
).bind(this);
// this is what happens when someone removes a comment
this.chatRef.on('child_removed', snap => {
const messageId = snap.key; // <- This is the key in the database, for example: '-KVZ_zdbJ0HMNz6lEff'
this.removeMessage(messageId);
}).bind(this);
}
removeMessage(messageId) {
this._messages = this._messages.filter(message => message.messageId !== messageId);
this.updateMessageList(this._messages);
}
updateMessageList(messages) {
this.setState({messages: this.ds.cloneWithRows(messages)})
}
onSend(messages) {
const user = firebase.auth().currentUser;
this.chatRef.push(
{
_id: 1,
text: this.state.messageContent,
createdAt: new Date().getTime(),
user: {
_id: 2,
name: user.displayName,
avatar: 'http://mdepinet.org/wp-content/uploads/person-placeholder.jpg'
}
});
this.setState({messageContent: ''})
}
render() {
return (
<View style={{flex: 1, alignItems: 'flex-end'}}>
<ListView
style={{ marginBottom: 60 }}
enableEmptySections={true}
dataSource={this.state.messages}
renderRow={message => <Message name={message.user} text={message.text}/> }/>
<Hideo
style={{position: 'absolute', bottom: 0}}
onChangeText={messageContent => this.setState({messageContent})} value={this.state.messageContent}
placeholder="Name"
iconClass={Icon}
iconName={'envelope'}
iconColor={'white'}
iconBackgroundColor={'#222'}
inputStyle={{ color: '#464949' }}
/>
<TouchableHighlight onPress={this.onSend}
style={{position: 'absolute', alignItems: 'center', bottom: 10, right: 10, borderRadius: 10, backgroundColor: '#d4af37'}}>
<Text style={{color: 'whitesmoke', fontSize: 20, padding: 5}}>Send</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
username: {
fontFamily: 'AvenirNext-Bold'
},
comment: {
fontFamily: 'AvenirNext-Regular'
},
bubble: {
flex: 1,
width: 250,
backgroundColor: '#f5f5f5',
margin: 15,
padding: 10,
borderRadius: 20
}
});
I am using react native to build an app and the only problem i am having is that i have a progress bar that keeps track of the users progress but when I close the app completely and open it back up everything resets to its original data.So I turned to AsyncStorage to hold my data in but I am having trouble trying to figure out how to use it in my code, if anyone could help that would be great.
*UPDATE:
I tried to implement asyncstorage and the data seems to be sticking when I fully close the app but I have it so every time I press a button the progress bar will go up %20 and for instance if its at %80 and I reload the app it will show it as %60 instead, I was wondering if anyone could help me fix this issue to have the progress bars percentage stay the same after reloading or closing the app.
'use strict';
var React = require('react-native');
var ProgressBar = require('react-native-progress-bar');
var {
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
},
button: {
alignSelf: 'center',
marginTop: 50,
width: 100,
height: 50,
backgroundColor: '#0059FF',
borderRadius: 8,
borderWidth: 2,
borderColor: '#0059FF'
},
buttonClear: {
alignSelf: 'center',
marginTop: 10,
width: 100,
height: 50,
backgroundColor: '#3B3A3A',
borderRadius: 8,
borderWidth: 2,
borderColor: '#3B3A3A'
},
buttonText: {
fontSize: 18,
textAlign: 'center',
lineHeight: 33,
color: '#FFF',
}
});
var PROGRESS = 0;
class BasicStorageExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: PROGRESS
}
}
componentDidMount() {
AsyncStorage.getItem('progressbar')
.then((value) => {
JSON.parse(value);
this.setState({
progress: value
});
console.log('Progress on load: ' + value);
})
.done();
}
onButtonPress() {
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
.then(() => {
JSON.parse(PROGRESS);
this.setState({
progress: PROGRESS += 0.2
});
console.log('Progress on Button Press: ' + PROGRESS);
})
.done();
}
onButtonClearPress() {
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
.then(() => {
JSON.parse(PROGRESS);
PROGRESS = 0;
this.setState({
progress: 0
});
})
.done();
}
render() {
return (
<View style={styles.container}>
<ProgressBar
fillStyle={{}}
backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
style={{marginTop: 10, width: 300}}
progress={this.state.progress} />
<TouchableHighlight
ref="button"
style={styles.button}
underlayColor='#002C7F'
onPress={this.onButtonPress.bind(this)}>
<Text style={styles.buttonText}>Done</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.buttonClear}
underlayColor='#002C7F'
onPress={this.onButtonClearPress.bind(this)}>
<Text style={styles.buttonText}>Clear</Text>
</TouchableHighlight>
</View>
);
}
};
AppRegistry.registerComponent('BasicStorageExample', () => BasicStorageExample);
Just call AsyncStorage.setItem('some-id', someVar) to set it then AsyncStorage.getItem('some-id') to retrieve. It's similar to localStorage. There's a full API and example in the documentation:
https://facebook.github.io/react-native/docs/asyncstorage.html
For store data
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
For getting Data call asynchronously.
async componentWillMount() {
const result = await AsyncStorage.getItem('progressbar');
// you will get value. check your conditions here
}
I'm getting an unexpected identifier error on the line fetchMovies() { in the following program:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native'),
{
StyleSheet,
Component,
AppRegistry,
ListView,
View,
Text,
Image
} = React,
baseUrl = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json',
apiKey = '7waqfqbprs7pajbz28mqf6vz',
pageLimit = 25,
queryString = '?apikey=' + apiKey + '&page_limit=' + pageLimit,
url = baseUrl + queryString,
styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
rightContainer: {
flex: 1,
},
title: {
marginBottom: 8,
textAlign: 'center'
},
year: {
fontSize: 10,
textAlign: 'center'
},
thumbnail: {
width: 53,
height: 81
},
listView: {
paddingTop: 20,
backgroundColor: 'black'
}
})
class movieList extends Component{
getInitialState() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false
}
},
fetchMovies() {
return fetch(url)
.then((response) => response.json())
.then((data) => data.movies)
},
componentDidMount() {
this.fetchMovies()
.then((movies) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(movies),
loaded: true
})
})
.done()
},
getLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading Movies...
</Text>
</View>
)
},
renderMovie(movie) {
if (!this.state.loaded) {
return this.getLoadingView()
}
return (
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
)
},
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
)
}
}
AppRegistry.registerComponent('movieList', () => movieList)
What am I doing wrong?
You're treating the class construct as though it were a series of comma-separated var-like function expressions, but that's not how class works. The method definitions in a class are more like function declarations, and you don't put commas after them, because they're not part of one big expression as the variable list after var is.
class movieList extends Component{
getInitialState() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false
}
} // <=== No comma here
fetchMovies() {
// ...
}
// ...
}