/
App.tsx
63 lines (58 loc) · 1.66 KB
/
App.tsx
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
import React, { useState } from 'react';
import { FlatList, SafeAreaView, Text, TouchableOpacity } from 'react-native';
import styles from './AppStyles';
import type { ItemData, ListItem } from './Types';
import { listData } from './constant';
import {
HorizontalListExample,
OneColumnExample,
TwoColumnExample,
} from './examples';
const ListItem = ({ item, data, setData }: ListItem) => (
<TouchableOpacity
style={[
styles.touchableStyle,
item.isSelected && styles.activeTouchableStyle,
]}
onPress={() => {
const newData = data.map((oldData: ItemData) => ({
...oldData,
isSelected: oldData.id === item.id,
}));
setData(newData);
}}>
<Text style={[styles.textStyle, item.isSelected && styles.activeTextStyle]}>
{item.title}
</Text>
</TouchableOpacity>
);
const App = () => {
const [data, setData] = useState(listData);
const renderExample = () => {
const { title } = data.find(oldData => oldData.isSelected) || {};
switch (title) {
case 'Two Column List':
return <TwoColumnExample />;
case 'One Column List':
return <OneColumnExample />;
case 'Horizontal List':
return <HorizontalListExample />;
default:
return <TwoColumnExample />;
}
};
return (
<SafeAreaView style={styles.screen}>
<FlatList
data={data}
style={styles.flatListStyle}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => <ListItem {...{ item, setData, data }} />}
keyExtractor={item => item.id.toString()}
/>
{renderExample()}
</SafeAreaView>
);
};
export default App;