Skip to content

Commit cbb1c24

Browse files
author
stevegalili
committed
example code
1 parent 01d319c commit cbb1c24

File tree

5 files changed

+434
-0
lines changed

5 files changed

+434
-0
lines changed

‎examples/cookbook/network-requests/UsersListFetch.tsx

Lines changed: 391 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,391 @@
1+
import { FlatList, Text, View } from 'react-native';
2+
import React, { useCallback, useEffect, useState } from 'react';
3+
import type { ListRenderItem } from '@react-native/virtualized-lists';
4+
5+
type User = {
6+
name: {
7+
title: string;
8+
first: string;
9+
last: string;
10+
};
11+
email: string;
12+
id: {
13+
name: string;
14+
value: string;
15+
};
16+
};
17+
18+
export default () => {
19+
const [data, setData] = useState<User[]>([]);
20+
useEffect(() => {
21+
const run = async () => {
22+
const _data = await fetchData();
23+
setData(_data);
24+
};
25+
26+
void run();
27+
}, []);
28+
29+
const renderItem: ListRenderItem<User> = useCallback(({ item: { name, email } }) => {
30+
const { title, first, last } = name;
31+
return (
32+
<>
33+
<Text>
34+
Name: {title} {first} {last}
35+
</Text>
36+
<Text>Email: {email}</Text>
37+
</>
38+
);
39+
}, []);
40+
return (
41+
<View>
42+
<FlatList<User> data={data} renderItem={renderItem} keyExtractor={(item) => item.id.value} />
43+
</View>
44+
);
45+
};
46+
47+
const fetchData = async (): Promise<User[]> => {
48+
const res = await fetch('https://randomuser.me/api/?results=10');
49+
return await res.json();
50+
};
51+
52+
export const DATA: { results: User[] } = {
53+
results: [
54+
{
55+
gender: 'female',
56+
name: {
57+
title: 'Mrs',
58+
first: 'Ida',
59+
last: 'Kristensen',
60+
},
61+
location: {
62+
street: {
63+
number: 2949,
64+
name: 'Erantisvej',
65+
},
66+
city: 'Hornbæk',
67+
state: 'Nordjylland',
68+
country: 'Denmark',
69+
postcode: 78056,
70+
coordinates: {
71+
latitude: '-40.8235',
72+
longitude: '163.8050',
73+
},
74+
timezone: {
75+
offset: '+7:00',
76+
description: 'Bangkok, Hanoi, Jakarta',
77+
},
78+
},
79+
email: '[email protected]',
80+
login: {
81+
uuid: '559d4249-cde4-4461-9f9c-8d51401af2b5',
82+
username: 'silverlion833',
83+
password: 'marble',
84+
salt: '24rqAef9',
85+
md5: '6320d32ecfe5e8e5741c2af3922f5a42',
86+
sha1: 'a23ef223661f78700ebd146c1933b18b87d31294',
87+
sha256: '5383017fe686e315e4ebe240128f2c3c168ffeba9ccb3b1fe3ba78f72dad0225',
88+
},
89+
dob: {
90+
date: '1962-05-25T18:38:10.820Z',
91+
age: 62,
92+
},
93+
registered: {
94+
date: '2004-02-02T11:51:23.484Z',
95+
age: 20,
96+
},
97+
phone: '01691638',
98+
cell: '40104495',
99+
id: {
100+
name: 'CPR',
101+
value: '250562-5730',
102+
},
103+
picture: {
104+
large: 'https://randomuser.me/api/portraits/women/26.jpg',
105+
medium: 'https://randomuser.me/api/portraits/med/women/26.jpg',
106+
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/26.jpg',
107+
},
108+
nat: 'DK',
109+
},
110+
{
111+
gender: 'male',
112+
name: {
113+
title: 'Mr',
114+
first: 'Barry',
115+
last: 'Steward',
116+
},
117+
location: {
118+
street: {
119+
number: 1921,
120+
name: 'Locust Rd',
121+
},
122+
city: 'Busselton',
123+
state: 'Western Australia',
124+
country: 'Australia',
125+
postcode: 4999,
126+
coordinates: {
127+
latitude: '63.1959',
128+
longitude: '-2.5579',
129+
},
130+
timezone: {
131+
offset: '+1:00',
132+
description: 'Brussels, Copenhagen, Madrid, Paris',
133+
},
134+
},
135+
email: '[email protected]',
136+
login: {
137+
uuid: '02077f89-b500-431d-b374-e0eb3fca9571',
138+
username: 'bigdog124',
139+
password: 'impreza',
140+
salt: '4Rn9WOJw',
141+
md5: 'a59d5df8a316f0516ac720de70ff9984',
142+
sha1: '2a28929cd277ba2a7aa6af237b5178f981d39a24',
143+
sha256: 'f7e0cab464e6237ab744947a0d81a83eebf5416f5d73e5ebca0034a6c3883abf',
144+
},
145+
dob: {
146+
date: '1952-10-04T23:18:08.221Z',
147+
age: 71,
148+
},
149+
registered: {
150+
date: '2007-07-01T07:28:31.663Z',
151+
age: 17,
152+
},
153+
phone: '01-3956-5636',
154+
cell: '0431-154-199',
155+
id: {
156+
name: 'TFN',
157+
value: '396148093',
158+
},
159+
picture: {
160+
large: 'https://randomuser.me/api/portraits/men/73.jpg',
161+
medium: 'https://randomuser.me/api/portraits/med/men/73.jpg',
162+
thumbnail: 'https://randomuser.me/api/portraits/thumb/men/73.jpg',
163+
},
164+
nat: 'AU',
165+
},
166+
{
167+
gender: 'female',
168+
name: {
169+
title: 'Mrs',
170+
first: 'Nurdan',
171+
last: 'Tanrıkulu',
172+
},
173+
location: {
174+
street: {
175+
number: 1649,
176+
name: 'Abanoz Sk',
177+
},
178+
city: 'İzmir',
179+
state: 'Kastamonu',
180+
country: 'Turkey',
181+
postcode: 12236,
182+
coordinates: {
183+
latitude: '-60.1904',
184+
longitude: '-170.0327',
185+
},
186+
timezone: {
187+
offset: '+3:00',
188+
description: 'Baghdad, Riyadh, Moscow, St. Petersburg',
189+
},
190+
},
191+
email: '[email protected]',
192+
login: {
193+
uuid: '24b26e9a-8a6b-4512-861f-f5f936d0e57e',
194+
username: 'brownpeacock362',
195+
password: 'playtime',
196+
salt: 'OleOXtTP',
197+
md5: 'e6db746d780e15546d056c6cfc3d0596',
198+
sha1: 'f91fd1d1d07d1c1e77ba5e4239d59119e02f0c72',
199+
sha256: '12dc899d99a3e070d624c1425ce162119972eb027629a11a3d57c4731d6f13e0',
200+
},
201+
dob: {
202+
date: '1981-09-06T15:04:24.958Z',
203+
age: 42,
204+
},
205+
registered: {
206+
date: '2010-11-06T07:44:26.522Z',
207+
age: 13,
208+
},
209+
phone: '(216)-483-4039',
210+
cell: '(404)-334-2627',
211+
id: {
212+
name: '',
213+
value: null,
214+
},
215+
picture: {
216+
large: 'https://randomuser.me/api/portraits/women/94.jpg',
217+
medium: 'https://randomuser.me/api/portraits/med/women/94.jpg',
218+
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/94.jpg',
219+
},
220+
nat: 'TR',
221+
},
222+
{
223+
gender: 'male',
224+
name: {
225+
title: 'Mr',
226+
first: 'Elijah',
227+
last: 'Ellis',
228+
},
229+
location: {
230+
street: {
231+
number: 5049,
232+
name: 'Edwards Rd',
233+
},
234+
city: 'Australian Capital Territory',
235+
state: 'Western Australia',
236+
country: 'Australia',
237+
postcode: 2678,
238+
coordinates: {
239+
latitude: '72.7709',
240+
longitude: '92.3434',
241+
},
242+
timezone: {
243+
offset: '-11:00',
244+
description: 'Midway Island, Samoa',
245+
},
246+
},
247+
email: '[email protected]',
248+
login: {
249+
uuid: 'c5826670-a31a-4c5b-ab3b-4a6f42a7e470',
250+
username: 'brownleopard128',
251+
password: 'funny',
252+
salt: '8XFQHn3b',
253+
md5: 'ff79f92e8f590cd0a32b5789a440eab1',
254+
sha1: '6244732c4ea030b901657f2a770e3c64c1882290',
255+
sha256: 'ce00727610927378f84ae32738d3837b0bd326fcabf61483db473f4bb9ca8d13',
256+
},
257+
dob: {
258+
date: '2000-01-19T13:38:11.062Z',
259+
age: 24,
260+
},
261+
registered: {
262+
date: '2014-04-10T00:16:14.729Z',
263+
age: 10,
264+
},
265+
phone: '00-7157-8777',
266+
cell: '0418-427-029',
267+
id: {
268+
name: 'TFN',
269+
value: '138117486',
270+
},
271+
picture: {
272+
large: 'https://randomuser.me/api/portraits/men/53.jpg',
273+
medium: 'https://randomuser.me/api/portraits/med/men/53.jpg',
274+
thumbnail: 'https://randomuser.me/api/portraits/thumb/men/53.jpg',
275+
},
276+
nat: 'AU',
277+
},
278+
{
279+
gender: 'female',
280+
name: {
281+
title: 'Mrs',
282+
first: 'Rianna',
283+
last: 'Cegelskiy',
284+
},
285+
location: {
286+
street: {
287+
number: 5024,
288+
name: 'Magistratska',
289+
},
290+
city: 'Gorlivka',
291+
state: 'Ivano-Frankivska',
292+
country: 'Ukraine',
293+
postcode: 11184,
294+
coordinates: {
295+
latitude: '-34.7506',
296+
longitude: '175.7042',
297+
},
298+
timezone: {
299+
offset: '-9:00',
300+
description: 'Alaska',
301+
},
302+
},
303+
email: '[email protected]',
304+
login: {
305+
uuid: '6074474a-3b03-4430-831e-dfc8b83d0538',
306+
username: 'purplegorilla527',
307+
password: 'bremen',
308+
salt: 'kll5ul1K',
309+
md5: '7c0905f85d9955c39c1dfc4fde758421',
310+
sha1: 'df8a154b09b6bf9d557dea54882fce505e119af1',
311+
sha256: '87c162f5213fb2e949cb0bb609224c053c414e6be0a46a80a9e36e8454754752',
312+
},
313+
dob: {
314+
date: '1977-10-09T20:29:29.511Z',
315+
age: 46,
316+
},
317+
registered: {
318+
date: '2014-06-04T21:40:50.237Z',
319+
age: 10,
320+
},
321+
phone: '(066) V30-8592',
322+
cell: '(096) C21-8101',
323+
id: {
324+
name: '',
325+
value: null,
326+
},
327+
picture: {
328+
large: 'https://randomuser.me/api/portraits/women/68.jpg',
329+
medium: 'https://randomuser.me/api/portraits/med/women/68.jpg',
330+
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/68.jpg',
331+
},
332+
nat: 'UA',
333+
},
334+
{
335+
gender: 'male',
336+
name: {
337+
title: 'Mr',
338+
first: 'Miro',
339+
last: 'Halko',
340+
},
341+
location: {
342+
street: {
343+
number: 4891,
344+
name: 'Hämeenkatu',
345+
},
346+
city: 'Kiikoinen',
347+
state: 'North Karelia',
348+
country: 'Finland',
349+
postcode: 20659,
350+
coordinates: {
351+
latitude: '-84.3128',
352+
longitude: '171.3976',
353+
},
354+
timezone: {
355+
offset: '+2:00',
356+
description: 'Kaliningrad, South Africa',
357+
},
358+
},
359+
email: '[email protected]',
360+
login: {
361+
uuid: '980b28ce-ccc2-4d73-b04e-35d22b7ea4ef',
362+
username: 'heavymeercat231',
363+
password: 'wingman',
364+
salt: '8syuBg1y',
365+
md5: 'ae1cf1e11ab4e70f1a02843b14d85093',
366+
sha1: 'f0f10deae6af9e31abbcd090afdd040174a8d1fa',
367+
sha256: '8e672cfc3a8fde8af41dd48a00d55100630f1d350d7be4546b370e2706050207',
368+
},
369+
dob: {
370+
date: '1960-07-13T10:52:34.013Z',
371+
age: 64,
372+
},
373+
registered: {
374+
date: '2013-07-04T21:31:46.009Z',
375+
age: 11,
376+
},
377+
phone: '03-397-597',
378+
cell: '045-053-53-68',
379+
id: {
380+
name: 'HETU',
381+
value: 'NaNNA945undefined',
382+
},
383+
picture: {
384+
large: 'https://randomuser.me/api/portraits/men/17.jpg',
385+
medium: 'https://randomuser.me/api/portraits/med/men/17.jpg',
386+
thumbnail: 'https://randomuser.me/api/portraits/thumb/men/17.jpg',
387+
},
388+
nat: 'FI',
389+
},
390+
],
391+
};

0 commit comments

Comments
 (0)