Skip to content

Commit 7084f1d

Browse files
testshallpasstestshallpass
committed
update example
- upgrade react-native and expo - add root component - refactor example to be simple baseball team selection
1 parent a748e7c commit 7084f1d

File tree

9 files changed

+1104
-1866
lines changed

9 files changed

+1104
-1866
lines changed

‎example/App.tsx‎

Lines changed: 186 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,216 @@
1-
/* eslint-disable @typescript-eslint/no-require-imports */
21
import React from 'react';
32
import {
43
StyleSheet,
54
Text,
6-
View,
7-
ImageSize,
85
Image,
9-
Animated,
106
TouchableOpacity,
7+
useWindowDimensions,
118
} from 'react-native';
129
import ThumbnailSelector, {
13-
ThumbnailItem,
10+
type ThumbnailItem,
1411
} from 'react-native-thumbnail-selector';
1512
import { SafeAreaView } from 'react-native-safe-area-context';
1613

14+
const ThumbnailItems: ThumbnailItem[] = [
15+
{
16+
caption: 'Arizona Diamondbacks',
17+
imageSrc: {
18+
uri: 'https://www.mlbstatic.com/team-logos/share/109.jpg',
19+
},
20+
},
21+
{ caption: 'Athletics', imageSrc: require('./assets/oa.png') },
22+
{
23+
caption: 'Atlanta Braves',
24+
imageSrc: {
25+
uri: 'https://www.mlbstatic.com/team-logos/share/144.jpg',
26+
},
27+
},
28+
{
29+
caption: 'Baltimore Orioles',
30+
imageSrc: {
31+
uri: 'https://www.mlbstatic.com/team-logos/share/110.jpg',
32+
},
33+
},
34+
{
35+
caption: 'Boston Red Sox',
36+
imageSrc: {
37+
uri: 'https://www.mlbstatic.com/team-logos/share/111.jpg',
38+
},
39+
},
40+
{
41+
caption: 'Chicago Cubs',
42+
imageSrc: {
43+
uri: 'https://www.mlbstatic.com/team-logos/share/112.jpg',
44+
},
45+
},
46+
{
47+
caption: 'Cincinnati Reds',
48+
imageSrc: {
49+
uri: 'https://www.mlbstatic.com/team-logos/share/113.jpg',
50+
},
51+
},
52+
{ caption: 'Cleveland Guardians', imageSrc: require('./assets/cg.png') },
53+
{
54+
caption: 'Colorado Rockies',
55+
imageSrc: {
56+
uri: 'https://www.mlbstatic.com/team-logos/share/115.jpg',
57+
},
58+
},
59+
{
60+
caption: 'Detroit Tigers',
61+
imageSrc: {
62+
uri: 'https://www.mlbstatic.com/team-logos/share/116.jpg',
63+
},
64+
},
65+
{
66+
caption: 'Houston Astros',
67+
imageSrc: {
68+
uri: 'https://www.mlbstatic.com/team-logos/share/117.jpg',
69+
},
70+
},
71+
{
72+
caption: 'Kansas City Royals',
73+
imageSrc: {
74+
uri: 'https://www.mlbstatic.com/team-logos/share/118.jpg',
75+
},
76+
},
77+
{
78+
caption: 'Los Angeles Angels',
79+
imageSrc: {
80+
uri: 'https://www.mlbstatic.com/team-logos/share/108.jpg',
81+
},
82+
},
83+
{
84+
caption: 'Los Angeles Dodgers',
85+
imageSrc: {
86+
uri: 'https://www.mlbstatic.com/team-logos/share/119.jpg',
87+
},
88+
},
89+
{
90+
caption: 'Miami Marlins',
91+
imageSrc: {
92+
uri: 'https://www.mlbstatic.com/team-logos/share/146.jpg',
93+
},
94+
},
95+
{
96+
caption: 'Milwaukee Brewers',
97+
imageSrc: {
98+
uri: 'https://www.mlbstatic.com/team-logos/share/158.jpg',
99+
},
100+
},
101+
{
102+
caption: 'Minnesota Twins',
103+
imageSrc: {
104+
uri: 'https://www.mlbstatic.com/team-logos/share/142.jpg',
105+
},
106+
},
107+
{ caption: 'New York Mets', imageSrc: require('./assets/nym.png') },
108+
{ caption: 'New York Yankees', imageSrc: require('./assets/nyy.png') },
109+
{
110+
caption: 'Philadelphia Phillies',
111+
imageSrc: {
112+
uri: 'https://www.mlbstatic.com/team-logos/share/143.jpg',
113+
},
114+
},
115+
{
116+
caption: 'Pittsburgh Pirates',
117+
imageSrc: {
118+
uri: 'https://www.mlbstatic.com/team-logos/share/134.jpg',
119+
},
120+
},
121+
{
122+
caption: 'San Diego Padres',
123+
imageSrc: {
124+
uri: 'https://www.mlbstatic.com/team-logos/share/135.jpg',
125+
},
126+
},
127+
{
128+
caption: 'San Francisco Giants',
129+
imageSrc: {
130+
uri: 'https://www.mlbstatic.com/team-logos/share/137.jpg',
131+
},
132+
},
133+
{
134+
caption: 'St. Louis Cardinals',
135+
imageSrc: {
136+
uri: 'https://www.mlbstatic.com/team-logos/share/138.jpg',
137+
},
138+
},
139+
{
140+
caption: 'Tampa Bay Rays',
141+
imageSrc: {
142+
uri: 'https://www.mlbstatic.com/team-logos/share/139.jpg',
143+
},
144+
},
145+
{
146+
caption: 'Texas Rangers',
147+
imageSrc: {
148+
uri: 'https://www.mlbstatic.com/team-logos/share/140.jpg',
149+
},
150+
},
151+
{
152+
caption: 'Toronto Blue Jays',
153+
imageSrc: {
154+
uri: 'https://www.mlbstatic.com/team-logos/share/141.jpg',
155+
},
156+
},
157+
{
158+
caption: 'Washington Nationals',
159+
imageSrc: {
160+
uri: 'https://www.mlbstatic.com/team-logos/share/120.jpg',
161+
},
162+
},
163+
];
164+
17165
export default function App(): React.JSX.Element {
18-
function getThumbnails(): ThumbnailItem[] {
19-
return [
20-
{
21-
caption: 'react-native',
22-
imageSrc: {
23-
uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
24-
},
25-
},
26-
{
27-
caption: 'jest testing',
28-
imageSrc: {
29-
uri: 'https://jestjs.io/img/opengraph.png',
30-
},
31-
},
32-
{
33-
caption: 'prettier',
34-
imageSrc: {
35-
uri: 'https://prettier.io/icon.png',
36-
},
37-
},
38-
{
39-
caption: 'Visual Studio Code',
40-
imageSrc: {
41-
uri: 'https://code.visualstudio.com/apple-touch-icon.png',
42-
},
43-
},
44-
{
45-
caption: 'eslint tool',
46-
imageSrc: {
47-
uri: 'https://eslint.org/icon-512.png',
48-
},
49-
},
50-
{
51-
imageSrc: {
52-
uri: 'https://randomuser.me/api/portraits/women/44.jpg',
53-
},
54-
},
55-
{
56-
caption: 'Do mollit sit nisi elit velit proident pariatur eu occaecat.',
57-
imageSrc: {
58-
uri: 'https://randomuser.me/api/portraits/women/79.jpg',
59-
},
60-
},
61-
{ caption: 'Cleveland Guardians', imageSrc: require('./assets/cg.png') },
62-
{ caption: 'Milwaukee Brewers', imageSrc: require('./assets/mb.png') },
63-
{ caption: 'New York Mets', imageSrc: require('./assets/nym.png') },
64-
{ caption: 'New York Yankees', imageSrc: require('./assets/nyy.png') },
65-
{ caption: "Oakland A's", imageSrc: require('./assets/oa.png') },
66-
{ caption: 'San Diego Padres', imageSrc: require('./assets/sdp.png') },
67-
{ caption: '', imageSrc: require('./assets/nyy.png') },
68-
{
69-
caption:
70-
'Excepteur amet veniam enim sint dolor consequat dolor deserunt.',
71-
imageSrc: require('./assets/nym.png'),
72-
},
73-
];
74-
}
75-
const thumbnails = React.useMemo(() => getThumbnails(), []);
76-
const [thumbnail, setThumbnail] = React.useState<ThumbnailItem>(
77-
thumbnails[0],
166+
const [selected, setSelected] = React.useState<ThumbnailItem>(
167+
ThumbnailItems[0],
78168
);
79-
const [isThumbnailSelectorOpen, setIsThumbnailSelectorOpen] =
80-
React.useState<boolean>(false);
81-
const defaultImageSize = { width: 136, height: 136 };
82-
const [imageSize, setImageSize] = React.useState<ImageSize>(defaultImageSize);
83-
let toggle = () => new Promise<Animated.EndResult | unknown>(res => res);
84-
85-
function _onButtonPress(): void {
86-
toggle();
87-
setIsThumbnailSelectorOpen(!isThumbnailSelectorOpen);
88-
}
89-
90-
async function _onThumbnailSelect(item: ThumbnailItem): Promise<void> {
91-
const resolvedSrc = Image.resolveAssetSource(item.imageSrc);
92-
let size = defaultImageSize;
93-
if (resolvedSrc.uri) {
94-
size = await Image.getSize(resolvedSrc.uri);
95-
}
96-
setImageSize({ width: size.width, height: defaultImageSize.height });
97-
setThumbnail(item);
98-
}
99-
100-
const src = Image.resolveAssetSource(thumbnail.imageSrc);
101-
const buttonText = isThumbnailSelectorOpen
102-
? 'Close ThumbnailSelector'
103-
: 'Open ThumbnailSelector';
104-
const buttonColor = isThumbnailSelectorOpen ? '#61896C' : '#5571F6';
169+
const toggleRef = React.useRef(() => {});
170+
const window = useWindowDimensions();
171+
const imageStyle = { width: window.width, height: window.height - 300 };
105172

106173
return (
107174
<SafeAreaView style={styles.safeAreaView}>
108-
<View style={styles.content}>
109-
<Image
110-
style={[styles.image, { ...imageSize }]}
111-
source={thumbnail.imageSrc}
112-
resizeMode={'contain'}
113-
/>
114-
<View style={styles.item}>
115-
<Text style={styles.key}>{'caption'}</Text>
116-
<Text style={styles.value}>{thumbnail.caption}</Text>
117-
</View>
118-
<View style={styles.item}>
119-
<Text style={styles.key}>{'imageSrc'}</Text>
120-
<Text style={styles.value}>{JSON.stringify(src)}</Text>
121-
</View>
122-
<TouchableOpacity
123-
style={[styles.button, { backgroundColor: buttonColor }]}
124-
onPress={_onButtonPress}
125-
>
126-
<Text style={styles.buttonText}>{buttonText}</Text>
127-
</TouchableOpacity>
128-
</View>
175+
<TouchableOpacity
176+
style={styles.button}
177+
onPress={() => toggleRef.current()}
178+
>
179+
<Text style={styles.buttonText}>{'Toggle ThumbnailSelector'}</Text>
180+
</TouchableOpacity>
181+
<Image
182+
style={imageStyle}
183+
source={selected.imageSrc}
184+
resizeMode={'contain'}
185+
/>
129186
<ThumbnailSelector
130-
thumbnails={thumbnails}
131-
toggle={func => (toggle = func)}
132-
onSelect={_onThumbnailSelect}
187+
thumbnails={ThumbnailItems}
188+
toggle={func => (toggleRef.current = func)}
189+
onSelect={item => setSelected(item)}
133190
/>
134191
</SafeAreaView>
135192
);
136193
}
137194

138195
const styles = StyleSheet.create({
139-
safeAreaView: {
140-
flex: 1,
141-
backgroundColor: '#32302F',
142-
},
143-
content: {
144-
margin: 12,
145-
padding: 12,
146-
borderRadius: 8,
147-
backgroundColor: '#3C3B3A',
148-
},
149-
image: {
150-
width: 136,
151-
height: 136,
152-
alignSelf: 'center',
153-
},
154-
item: {
155-
flexDirection: 'column',
156-
padding: 4,
157-
},
158-
key: {
159-
fontSize: 16,
160-
color: 'whitesmoke',
161-
fontWeight: 'bold',
162-
},
163-
value: {
164-
fontSize: 16,
165-
color: 'whitesmoke',
166-
},
196+
// eslint-disable-next-line react-native/no-color-literals
167197
button: {
168-
borderRadius: 8,
169-
padding: 8,
170-
marginTop: 8,
198+
backgroundColor: 'black',
199+
borderRadius: 6,
200+
borderWidth: 1,
201+
margin: 16,
202+
padding: 16,
171203
},
204+
// eslint-disable-next-line react-native/no-color-literals
172205
buttonText: {
206+
color: 'whitesmoke',
173207
fontSize: 18,
174-
textAlign: 'center',
175208
fontWeight: 'bold',
176-
color: 'whitesmoke',
209+
textAlign: 'center',
210+
},
211+
// eslint-disable-next-line react-native/no-color-literals
212+
safeAreaView: {
213+
backgroundColor: 'whitesmoke',
214+
flex: 1,
177215
},
178216
});

0 commit comments

Comments
 (0)