Hello all,
I am relatively new to app development and therefore also to Expo. I am currently working on a project where customers can order their breakfast and have it delivered to their home. For this, we have a number of different providers offering their products on my platform (sample data only). I have managed to retrieve and display the suppliers from a Firebase. However, I am currently struggling with the filter function. I want to determine that when a customer selects certain categories via the filter function, only the relevant suppliers are displayed accordingly. Below you can see my code implementing the individual checkboxes and other classes for retrieving and displaying the data:
import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, FlatList, TouchableOpacity, CheckBox, Pressable, SafeAreaView, Image, Alert, AsyncStorage, Slider, Button } from 'react-native';
import styles from './styles'
import { MaterialCommunityIcons, Feather, FontAwesome5, Fontisto, Entypo, Ionicons } from '@expo/vector-icons'
import Colors from '../../../constants/Color'
import * as firebase from "firebase"
function MyCheckbox() {
const [checked, onChange] = useState(false);
function onCheckmarkPress() {
onChange(!checked);
}
return (
<Pressable
style={[styles.checkboxBase, checked && styles.checkboxChecked]}
onPress={onCheckmarkPress}>
{checked && <Ionicons name="checkmark" size={18} color="white" />}
</Pressable>
);
}
export default function Anbieter({ route, navigation }) {
const [anbieterList, setAnbieterList] = useState()
const kategorieList = ["Backware", "Bioprodukte", "Feinkost", "Griechische Spezialitäten", "Molkerei", "Türkische Spezialitäten"]
const ListButton = ({ title, data }) => {
return (
<TouchableOpacity onPress={() => { navigation.navigate('Produktubersicht', { data }) }} style={[styles.itemContainer]}>
<Image source={{ uri: data.anbieterImg }} style={{ width: '90%', marginLeft: '5%', height: 160 }} />
<Text style={{ fontSize: 16, fontWeight: "bold", marginLeft: 20 }}>{data.firmenname}</Text>
<Text style={{ fontSize: 16, fontWeight: "bold", marginLeft: 20, width: '90%' }}>Adresse:
<Text style={{ fontSize: 16, fontWeight: 'normal' }}>{data.adresse}</Text>
</Text>
<Text style={{ fontSize: 16, fontWeight: "bold", marginLeft: 20, width: '90%' }}>Kategorie:
<Text style={{ fontSize: 16, fontWeight: 'normal' }}>{data.kategorie}</Text>
</Text>
<View style={{ flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: "bold", marginLeft: 20, width: '40%' }}>Bewertung:
<Text style={{ fontSize: 16, fontWeight: 'normal' }}>{data.bewertung}/5</Text>
</Text>
{(() => {
if (data.bewertung == 1) {
return (
<View style={{ flexDirection: 'row' }}>
<Ionicons name="ios-star-sharp" size={20} color="gold" />
</View>
)
} else if (data.bewertung == 2) {
return (
<View style={{ flexDirection: 'row' }}>
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
</View>
)
} else if (data.bewertung == 3) {
return (
<View style={{ flexDirection: 'row' }}>
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
</View>
)
} else if (data.bewertung == 4) {
return (
<View style={{ flexDirection: 'row' }}>
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
</View>
)
} else if (data.bewertung == 5) {
return (
<View style={{ flexDirection: 'row' }}>
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
<Ionicons name="ios-star-sharp" size={20} color="gold" />
</View>
)
}
return null;
})()}
</View>
</TouchableOpacity>
);
}
// THIS FUNCTION IS USE TO CALL ALL REATAURENT FROM FIREBASE DATABASE
const getAnbieter = async () => {
let arr = []
// THIS IS FIREBASE API ALL DATA IS COMING FROM FIREBASE
var ar = await firebase.database().ref("/anbieter/").once("child_added", snapshot => {
var obj = snapshot.val();
obj.id = snapshot.key;
arr.push(obj);
});
// ALL DATA OF REATAURENT IS STORING IN STATE HERE THEN FROM HERE ALL DATA WILL DISPLAY
setAnbieterList(arr)
}
useEffect(() => {
// WE CALL GET RESTAURENTS API HERE BECAUSE THIS USEEFFECT JUST CALL ONCE WHEN COMPONENT RENDER
getAnbieter()
}, []);
return (
<ScrollView>
{/* THIS IS THE PART OF ICON WHERE LOGIN , SIGNOUT , Bestellverlauf AND Warenkorb ICON ARE HERE */}
<View style={styles.container}>
<View>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<Text style={{ marginLeft: '3%', fontSize: 14, fontWeight: 'bold' }}> Entfernung festlegen!</Text>
<Text style={{ marginLeft: '3%' }}> {Math.round(ranges)} km</Text>
</View>
<Slider maximumValue={100} style={{ width: '90%', marginLeft: '5%', marginTop: 10, }} value={ranges} onValueChange={(e) => setRanges(e)} />
<View style={{ marginTop: 10 }}>
<Text style={{ marginLeft: '3%', fontSize: 14, fontWeight: 'bold', marginBottom: 10, }}>Filterung nach Kategorie</Text>
{kategorieList && kategorieList.map((val, i) => {
return <View style={styles.checkboxContainer} key={i}>
<MyCheckbox />
<Text style={styles.checkboxLabel}>{val}</Text>
</View>
})}
<Button title="Filter anwenden..." color='#5271FF' />
</View>
</View>
: null
}
<Text style={styles.textSecond}>Sie können gerne die Filterfunktion verwenden, indem Sie oben auf den Symbol klicken...</Text>
{anbieterList && anbieterList.map((val, i) => {
return <ListButton key={i} title={val.firmenname} data={val} />
})}
</View>
</ScrollView>
);
}
Here is a screenshot of my app, which I was able to develop by my own. By selecting the categories and clicking on the button “FILTER ANWENDEN” I want to make sure that the list below is filtered.
I would be very grateful if someone here could help me with the implementation of this function.
Thanks in advance 