chore: added flatlist to examples

gorhom · May 24, 2020 · d9fe3bb · d9fe3bb
1 parent b4da482
commit d9fe3bb
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 36 deletions.
diff --git a/example/android/app/app.iml b/example/android/app/app.iml
@@ -138,11 +138,11 @@
     <orderEntry type="library" name="Gradle: com.facebook.fresco:nativeimagetranscoder:2.0.0@aar" level="project" />
     <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-okhttp3:2.0.0@aar" level="project" />
     <orderEntry type="library" name="Gradle: org.webkit:android-jsc:r245459@aar" level="project" />
-    <orderEntry type="module" module-name="react-native-community_masked-view" />
-    <orderEntry type="module" module-name="react-native-gesture-handler" />
-    <orderEntry type="module" module-name="react-native-reanimated" />
-    <orderEntry type="module" module-name="react-native-safe-area-context" />
-    <orderEntry type="module" module-name="react-native-screens" />
+    <orderEntry type="module" module-name="android-react-native-community_masked-view" />
+    <orderEntry type="module" module-name="android-react-native-gesture-handler" />
+    <orderEntry type="module" module-name="android-react-native-reanimated" />
+    <orderEntry type="module" module-name="android-react-native-safe-area-context" />
+    <orderEntry type="module" module-name="android-react-native-screens" />
     <orderEntry type="module" module-name="react-native-svg" />
   </component>
 </module>
diff --git a/example/src/components/button/Button.tsx b/example/src/components/button/Button.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+interface ButtonProps {
+  label: string;
+  onPress: () => void;
+}
+
+const Button = ({ label, onPress }: ButtonProps) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <Text style={styles.label}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 6,
+    borderRadius: 2,
+    backgroundColor: '#eee',
+  },
+  label: {
+    textTransform: 'capitalize',
+  },
+});
+
+export default Button;
diff --git a/example/src/components/button/index.ts b/example/src/components/button/index.ts
@@ -0,0 +1 @@
+export { default } from './Button';
diff --git a/example/src/screens/BubbleStandalone.tsx b/example/src/screens/BubbleStandalone.tsx
@@ -107,22 +107,22 @@ const BubbleStandaloneScreen = () => {
 
       <Button
         title="Set Index to 0"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(0)}
       />
       <Button
         title="Set Index to 1"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(1)}
       />
       <Button
         title="Set Index to 2"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(2)}
       />
       <Button
         title="Set Index to 3"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(3)}
       />
     </View>

diff --git a/example/src/screens/Dummy.tsx b/example/src/screens/Dummy.tsx
@@ -1,19 +1,30 @@
 import React, { useMemo, useRef, useEffect, useCallback } from 'react';
-import { Text, View, StyleSheet, Dimensions, Button } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
+import { Text, View, StyleSheet, Alert } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import {
   useRoute,
   RouteProp,
   useScrollToTop,
   useNavigation,
 } from '@react-navigation/native';
+import Button from '../components/button';
 import { MainTabsParams } from './types';
-import { Alert } from 'react-native';
+import { useSafeArea } from 'react-native-safe-area-context';
+
+const data = Array(20)
+  .fill(0)
+  .map((item, index) => ({
+    id: `item-${index}`,
+    title: `Item ${index}`,
+  }));
 
 const DummyScreen = () => {
+  // safe area
+  const { top } = useSafeArea();
+
   // scroll event
-  const scrollViewRef = useRef(null);
-  useScrollToTop(scrollViewRef);
+  const flatlistRef = useRef(null);
+  useScrollToTop(flatlistRef);
 
   // route name
   const { name, params } = useRoute<RouteProp<MainTabsParams, 'Home'>>();
@@ -31,6 +42,16 @@ const DummyScreen = () => {
     ],
     [params]
   );
+  const headerStyle = useMemo(
+    () => [
+      styles.header,
+      {
+        paddingTop: top,
+        backgroundColor: params?.backgroundColor || 'white',
+      },
+    ],
+    [params, top]
+  );
 
   // effects
   useEffect(() => {
@@ -47,39 +68,60 @@ const DummyScreen = () => {
   const handleNextScreenPress = useCallback(() => {
     navigate(params.nextScreen);
   }, [navigate, params]);
+
+  // renders
+  const renderHeader = () => (
+    <View style={headerStyle}>
+      <Text style={styles.text}>{screeName}</Text>
+      <Button
+        label={`navigate to ${params.nextScreen}`}
+        onPress={handleNextScreenPress}
+      />
+    </View>
+  );
+  const renderItem = ({ item }: any) => (
+    <View key={item.id} style={styles.item}>
+      <Text>{item.title}</Text>
+    </View>
+  );
   return (
-    <ScrollView style={rootStyle} ref={scrollViewRef}>
-      <View style={styles.container}>
-        <Text style={styles.text}>{screeName}</Text>
-        <Button
-          title={`navigate to ${params.nextScreen}`}
-          color="white"
-          onPress={handleNextScreenPress}
-        />
-      </View>
-      <View style={styles.container}>
-        <Text style={styles.text}>{screeName}</Text>
-      </View>
-    </ScrollView>
+    <FlatList
+      ref={flatlistRef}
+      data={data}
+      stickyHeaderIndices={[0]}
+      ListHeaderComponent={renderHeader}
+      renderItem={renderItem}
+      style={rootStyle}
+      contentContainerStyle={styles.flatlistContainer}
+    />
   );
 };
 
 const styles = StyleSheet.create({
   root: {
     flex: 1,
   },
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: Dimensions.get('screen').height,
+  flatlistContainer: {
+    paddingHorizontal: 24,
+    paddingBottom: 24,
+  },
+  header: {
+    paddingVertical: 24,
+    alignItems: 'flex-start',
   },
   text: {
     fontSize: 43,
     fontWeight: '600',
     textTransform: 'uppercase',
     color: 'white',
   },
+  item: {
+    paddingHorizontal: 12,
+    paddingVertical: 24,
+    marginVertical: 6,
+    borderRadius: 2,
+    backgroundColor: '#eee',
+  },
 });
 
 export default DummyScreen;
diff --git a/example/src/screens/FlashyStandalone.tsx b/example/src/screens/FlashyStandalone.tsx
@@ -83,22 +83,22 @@ const FlashyStandaloneScreen = () => {
 
       <Button
         title="Set Index to 0"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(0)}
       />
       <Button
         title="Set Index to 1"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(1)}
       />
       <Button
         title="Set Index to 2"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(2)}
       />
       <Button
         title="Set Index to 3"
-        color={'white'}
+        color="black"
         onPress={() => setIndex(3)}
       />
     </View>