-
Notifications
You must be signed in to change notification settings - Fork 0
/
Main.js
64 lines (62 loc) · 2.02 KB
/
Main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// Overall - 1
import React, { useEffect, useState } from 'react';
import { SafeAreaView, View, Text, FlatList, StyleSheet, Alert, TextInput } from 'react-native';
import proudctData from './product_data.json'
import ProductCard from './components/ProductCard'
let originalproudctData= [];
const App = () => {
// const [searchValue, setSearchValue] = useState("");
const [displayList, setDisplayList] = useState([])
const renderListItem = ({ item }) => <ProductCard product={item} />
useEffect(() => {
// Alert.alert("Clarushop", "Hoşgeldiniz, keyifli alışverişler..");
setDisplayList(proudctData)
originalproudctData=[...proudctData]
}, [])
function search(input) {
const filteredValue = originalproudctData.filter(item => {
const text = input.toUpperCase();
const productTitle = item.title.toUpperCase();
return productTitle.indexOf(text) > -1;
})
setDisplayList(filteredValue)
};
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Text style={styles.banner}>Clarushop</Text>
<View style={styles.searchBar}>
<TextInput
placeholder="Ürün ara..."
onChangeText={(value) => search(value)}
/>
</View>
<FlatList
keyExtractor={(_, index) => index.toString()}
data={displayList}
renderItem={renderListItem}
numColumns={2}
/>
</View>
</SafeAreaView>
)
}
/**
* 1) Stok durumunu belirtmeniz
* 2) <SearchBar onSearch={...} />
*/
export default App;
const styles = StyleSheet.create({
banner: {
color: 'purple',
fontWeight: 'bold',
fontSize: 40,
textAlign: 'center'
},
searchBar: {
backgroundColor: "#eceff1",
padding: 8,
margin: 5,
borderRadius: 10
}
})