-
Notifications
You must be signed in to change notification settings - Fork 14
/
GifPicker.tsx
executable file
·125 lines (118 loc) · 2.86 KB
/
GifPicker.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, {useCallback} from 'react';
import {
StyleSheet,
Modal,
View,
Dimensions,
Text,
TouchableOpacity,
} from 'react-native';
import {GifSearch} from 'react-native-gif-search';
import {Colors} from 'react-native/Libraries/NewAppScreen';
const GIPHY_API_KEY = 'NctafbvmG7x6Z1HyDVsd5gvB5SBf87ZE';
const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;
interface GiphyPickerProps {
showModal: boolean;
handleChangeModal: () => void;
selectGif: (gifUrl?: string) => void;
}
const GiphyPicker = ({
showModal,
handleChangeModal,
selectGif,
}: GiphyPickerProps) => {
const _handleSelectGif = useCallback(
(gifUrl: string) => {
selectGif(gifUrl);
handleChangeModal();
},
[handleChangeModal, selectGif],
);
return (
<Modal visible={showModal} animationType={'fade'} transparent>
<View style={styles.modalDarkBackground} />
<View style={styles.contentContainer}>
<GifSearch
visible
giphyApiKey={GIPHY_API_KEY}
gifsToLoad={10}
maxGifsToLoad={3 * 9}
style={styles.gifContainer}
textInputStyle={styles.searchInputText}
gifListStyle={styles.gifListComponent}
gifStyle={styles.gifComponent}
loadingSpinnerColor={'black'}
placeholderTextColor={'#807E7E'}
placeholderText={'Search a GIF'}
horizontal={false}
numColumns={3}
onGifSelected={_handleSelectGif}
showScrollBar={false}
/>
<TouchableOpacity
onPress={handleChangeModal}
style={styles.giphyPickerHeader}>
<Text style={styles.closeButtonLabel}>Close</Text>
</TouchableOpacity>
</View>
</Modal>
);
};
export default GiphyPicker;
const styles = StyleSheet.create({
modalDarkBackground: {
position: 'absolute',
top: 0,
left: 0,
width: WINDOW_WIDTH,
height: WINDOW_HEIGHT,
backgroundColor: 'rgba(0,0,0,0.5)',
},
contentContainer: {
flex: 1,
paddingTop: WINDOW_HEIGHT / 4,
},
giphyPickerHeader: {
flexDirection: 'row',
justifyContent: 'flex-end',
position: 'absolute',
right: 0,
top: WINDOW_HEIGHT / 4,
},
gifContainer: {
backgroundColor: '#FFF',
paddingTop: 20,
},
gifListComponent: {
width: '100%',
height: 400,
},
gifComponent: {
height: 100,
width: 100,
borderWidth: 0,
borderRadius: 5,
overlayColor: 'white',
},
searchInputText: {
backgroundColor: '#F4EBEC',
color: 'black',
borderRadius: 5,
fontSize: 14,
height: 30,
lineHeight: 15,
paddingLeft: 10,
marginBottom: 10,
maxWidth: '80%',
paddingTop: 0,
paddingBottom: 0,
},
closeButtonLabel: {
color: Colors.dark,
fontSize: 15,
fontWeight: '600',
paddingHorizontal: 20,
paddingTop: 25,
},
});