-
Notifications
You must be signed in to change notification settings - Fork 13
/
App.js
85 lines (81 loc) · 2.9 KB
/
App.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, { useState, useMemo } from 'react';
import { Animated, SafeAreaView, StatusBar, View, Platform, Text } from 'react-native';
import NameListItem, { deviceWidth } from './src/NameListItem';
import SearchComponent from './src/SearchComponent';
import { deviceHeight } from './src/LoaderComponent';
import mockList from './src/helpers/mockList';
import 'react-native-gesture-handler';
console.disableYellowBox = true;
const App = () => {
const [scrollYValue, setScrollYValue] = useState(new Animated.Value(0));
const [searchedTerm, setSearchedTerm] = useState('');
const clampedScroll = Animated.diffClamp(
Animated.add(
scrollYValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolateLeft: 'clamp',
}),
new Animated.Value(0),
),
0,
50,
)
const usersList = useMemo(() => {
if (searchedTerm.length === 0) {
return mockList;
}
const list = mockList.filter((name) => {
return name.includes(searchedTerm)
});
return list;
}, [searchedTerm])
return (
<Animated.View style={{
backgroundColor: 'white',
flex: 1,
}}>
<StatusBar barStyle="dark-content" backgroundColor='white' translucent={true} />
<View style={{ height: Platform.OS === 'ios' ? StatusBar.currentHeight + 50 : 30 }}></View>
<View style={{ position: 'relative' }}>
{Platform.OS === 'ios' && (
<SearchComponent searchedTerm={searchedTerm} setSearchedTerm={setSearchedTerm} clampedScroll={clampedScroll} />
)}
<Animated.ScrollView
stickyHeaderIndices={Platform.OS === 'android' ? [0] : []}
showsVerticalScrollIndicator={false}
style={{
backgroundColor: 'white',
paddingTop: Platform.OS === 'ios' ? 70 : 0
}}
contentContainerStyle={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
backgroundColor: 'white',
}}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollYValue } } }],
{ useNativeDriver: true },
() => { }, // Optional async listener
)}>
{Platform.OS === 'android' && (
<SearchComponent searchedTerm={searchedTerm} setSearchedTerm={setSearchedTerm} clampedScroll={clampedScroll} />
)}
{usersList.length === 0 && <Text style={{ textAlign: 'center', width: deviceWidth, fontSize: 18, paddingTop: 20 }}>No results for {searchedTerm}</Text>}
{usersList.map((name, index) => <NameListItem key={index} name={name} />)}
<View style={{ height: deviceHeight * 0.5 }}></View>
</Animated.ScrollView>
</View>
</Animated.View>
);
};
export default App;