i am new on expo and i am using firebase database for my project, i have encountered a difficulty and i need urgent help, i have created a firebase database and connected it to my expo application, now i want to enable a flatlist search feature to get data from the firebase database, i dont know how to go about it, i can get data from a static json file with dummy text, but i cant fetch data from firebase.
Bellow is my code for a flatlist with fetch feature from json.
import React from 'react';
import { StyleSheet, Text, View ,Button,AsyncStorage,createDrawerNavigator,Image,TouchableHighlight, FlatList,
ActivityIndicator,
Platform,} from 'react-native';
import {Content,Container,Header,Left,Icon,Footer,Body,Card,CardItem} from 'native-base';
import { SearchBar } from 'react-native-elements';
import * as firebase from 'firebase';
import ApiKeys from '../constants/ApiKeys';
/*THIS IS MEANT FOR THE SEARCH OF PLATE NUMBERS BY INDIVIDUALS NOT AS NOTIFICATIONS*/
export default class RiderNotifications extends React.Component {
static navigationOptions = {
drawerIcon: ({ tintColor }) => (
<Image
source={require('../Images/notification.png')}
style={{width:25,height:25}}
/>
),
};
constructor(props) {
super(props);
//setting default state
this.state = { isLoading: true, text: '' };
this.arrayholder = [];
}
componentDidMount() {
//return fetch('https://jsonplaceholder.typicode.com/photos',
return fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson
},
function() {
this.arrayholder = responseJson;
}
);
})
.catch(error => {
console.error(error);
});
}
SearchFilterFunction(text) {
//passing the inserted text in textinput
const newData = this.arrayholder.filter(function(item) {
//applying filter for the inserted text in search bar
const itemData = item.title ? item.title.toUpperCase() : ''.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
this.setState({
//setting the filtered newData on datasource
//After setting the data it will automatically re-render the view
dataSource: newData,
search: text,
});
}
ListViewItemSeparator = () => {
//Item sparator view
return (
<View
style={{
height: 0.3,
width: '90%',
backgroundColor: '#080808',
}}
/>
);
};
render() {
if (this.state.isLoading) {
// Loading View while data is loading
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
//ListView to show with textinput used as search bar
<View style={styles.viewStyle}>
<Header style={{backgroundColor:'#42A5F5',height:60}}>
<Left>
<TouchableHighlight
style={{width:50,height:50,borderRadius:50,alignItems:'center',justifyContent:'center',marginTop:10}}
onPress={() => this.props.navigation.navigate('Home')}
>
<Icon
name="arrow-back"
style={{color:'#ffffff',}}
/ >
</TouchableHighlight>
</Left>
<Body>
<Text style={{color:'#ffffff',fontSize:20,fontWeight:'bold',marginLeft:5,marginTop:10}}>Search Plate Number</Text>
</Body>
</Header>
<SearchBar
round
searchIcon={{ size: 24 }}
onChangeText={text => this.SearchFilterFunction(text)}
onClear={text => this.SearchFilterFunction('')}
placeholder="Search plate Number..."
value={this.state.search}
/>
<FlatList
data={this.state.dataSource}
ItemSeparatorComponent={this.ListViewItemSeparator}
//Item Separator View
renderItem={({ item }) => (
// Single Comes here which will be repeatative for the FlatListItems
<Text style={styles.textStyle}>{item.title}</Text>
)}
enableEmptySections={true}
style={{ marginTop: 10 }}
keyExtractor={item => item.uid}
/* keyExtractor={(item, index) => index.toString()}*/
/>
</View>
);
}
}
const styles = StyleSheet.create({
viewStyle: {
justifyContent: 'center',
flex: 1,
backgroundColor: 'white',
marginTop: Platform.OS == 'ios' ? 30 : 0,
},
textStyle: {
padding: 10,
},
containerView:{
flex:1,
backgroundColor:'#ffffff'
},
map: {
height: 600,
marginTop:0
},
viewStyle: {
justifyContent: 'center',
flex: 1,
backgroundColor: 'white',
marginTop: Platform.OS == 'ios' ? 30 : 0,
},
textStyle: {
padding: 10,
},
notifyButton:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#42A5F5',
height:50,
width:150,
marginLeft:140
},
});