Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on 6801d78181a114f2f352c99eb9e08fb6149a9416
This commit is contained in:
Website Deployment Script
2020-05-07 14:08:23 +00:00
parent 5f628d3d4e
commit 6e12ee1018
2 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/flatlist.html
+19 -13
View File
@@ -111,11 +111,15 @@
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> (
<span class="hljs-keyword">const</span> renderItem = <span class="hljs-function">(<span class="hljs-params">{ item }</span>) =&gt;</span> (
&lt;Item title={item.title} /&gt;
);
return (
&lt;SafeAreaView style={styles.container}&gt;
&lt;FlatList
data={DATA}
renderItem={({ item }) =&gt; &lt;Item title={item.title} /&gt;}
renderItem={renderItem}
keyExtractor={item =&gt; item.id}
/&gt;
&lt;/SafeAreaView&gt;
@@ -140,7 +144,7 @@ const styles = StyleSheet.create({
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="flatlist-simple"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20renderItem%20%3D%20(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7BrenderItem%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"
@@ -210,18 +214,20 @@ const styles = StyleSheet.create({
[selected],
);
<span class="hljs-keyword">return</span> (
<span class="hljs-keyword">const</span> renderItem = <span class="hljs-function">(<span class="hljs-params">{ item }</span>) =&gt;</span> (
&lt;Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/&gt;
);
return (
&lt;SafeAreaView style={styles.container}&gt;
&lt;FlatList
data={DATA}
renderItem={({ item }) =&gt; (
&lt;Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/&gt;
)}
renderItem={renderItem}
keyExtractor={item =&gt; item.id}
extraData={selected}
/&gt;
@@ -247,7 +253,7 @@ const styles = StyleSheet.create({
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="flatlist-selectable"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%3CItem%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20const%20renderItem%20%3D%20(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%3CItem%0A%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7BrenderItem%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"
docs/next/flatlist/index.html
+19 -13
View File
@@ -111,11 +111,15 @@
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> (
<span class="hljs-keyword">const</span> renderItem = <span class="hljs-function">(<span class="hljs-params">{ item }</span>) =&gt;</span> (
&lt;Item title={item.title} /&gt;
);
return (
&lt;SafeAreaView style={styles.container}&gt;
&lt;FlatList
data={DATA}
renderItem={({ item }) =&gt; &lt;Item title={item.title} /&gt;}
renderItem={renderItem}
keyExtractor={item =&gt; item.id}
/&gt;
&lt;/SafeAreaView&gt;
@@ -140,7 +144,7 @@ const styles = StyleSheet.create({
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="flatlist-simple"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20renderItem%20%3D%20(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7BrenderItem%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"
@@ -210,18 +214,20 @@ const styles = StyleSheet.create({
[selected],
);
<span class="hljs-keyword">return</span> (
<span class="hljs-keyword">const</span> renderItem = <span class="hljs-function">(<span class="hljs-params">{ item }</span>) =&gt;</span> (
&lt;Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/&gt;
);
return (
&lt;SafeAreaView style={styles.container}&gt;
&lt;FlatList
data={DATA}
renderItem={({ item }) =&gt; (
&lt;Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/&gt;
)}
renderItem={renderItem}
keyExtractor={item =&gt; item.id}
extraData={selected}
/&gt;
@@ -247,7 +253,7 @@ const styles = StyleSheet.create({
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="flatlist-selectable"
data-snack-description="Example usage"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%3CItem%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20const%20renderItem%20%3D%20(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%3CItem%0A%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7BrenderItem%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"