@@ -4,11 +4,34 @@ import { FlatList, TouchableOpacity, Text, View, StyleSheet } from 'react-native
44
55import { PlatformColor } from '../modules/PlatformColor' ;
66
7+ const SMALL_SQUARE_SIZE = 25 ;
8+ const NUMBER_OF_COLUMNS = 9 ;
9+
710const NativeColorPalette = ( ) => {
811 const [ selectedColor , setSelectedColor ] = useState < string > ( ) ;
912 const [ , setClipboardString ] = useClipboard ( ) ;
1013 return (
1114 < View style = { styles . container } >
15+ < View style = { { alignItems : 'flex-start' } } >
16+ < FlatList
17+ data = { colorsArray }
18+ renderItem = { ( { item } ) => {
19+ return (
20+ < TouchableOpacity
21+ style = { [
22+ styles . smallSquare ,
23+ {
24+ backgroundColor : PlatformColor ( item ) ,
25+ } ,
26+ ] }
27+ onPress = { ( ) => setSelectedColor ( ( prev ) => ( prev !== item ? item : undefined ) ) }
28+ />
29+ ) ;
30+ } }
31+ keyExtractor = { ( item ) => item }
32+ numColumns = { NUMBER_OF_COLUMNS }
33+ />
34+ </ View >
1235 { selectedColor ? (
1336 < View style = { styles . selectedContainer } >
1437 < View
@@ -26,24 +49,6 @@ const NativeColorPalette = () => {
2649 </ TouchableOpacity >
2750 </ View >
2851 ) : null }
29- < FlatList
30- data = { colorsArray }
31- renderItem = { ( { item } ) => {
32- return (
33- < TouchableOpacity
34- style = { [
35- styles . smallSquare ,
36- {
37- backgroundColor : PlatformColor ( item ) ,
38- } ,
39- ] }
40- onPress = { ( ) => setSelectedColor ( ( prev ) => ( prev !== item ? item : undefined ) ) }
41- />
42- ) ;
43- } }
44- keyExtractor = { ( item ) => item }
45- numColumns = { 9 }
46- />
4752 </ View >
4853 ) ;
4954} ;
@@ -52,12 +57,13 @@ export default NativeColorPalette;
5257
5358const styles = StyleSheet . create ( {
5459 container : {
60+ flexDirection : 'row' ,
5561 borderWidth : 2 ,
5662 borderColor : PlatformColor ( 'tertiaryLabelColor' ) ,
5763 } ,
5864 smallSquare : {
59- height : 25 ,
60- width : 25 ,
65+ height : SMALL_SQUARE_SIZE ,
66+ width : SMALL_SQUARE_SIZE ,
6167 } ,
6268 bigSquare : {
6369 height : 40 ,
@@ -71,7 +77,6 @@ const styles = StyleSheet.create({
7177 } ,
7278 selectedColorText : {
7379 margin : 10 ,
74- flex : 1 ,
7580 } ,
7681} ) ;
7782
0 commit comments