chore: updated map example

gorhom · Aug 11, 2020 · 9a65a74 · 9a65a74
1 parent 312bcd1
commit 9a65a74
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 51 deletions.
diff --git a/example/src/components/contactItem/ContactItem.tsx b/example/src/components/contactItem/ContactItem.tsx
@@ -1,51 +1,18 @@
 import React, { memo } from 'react';
-// @ts-ignore
-import { Text, StyleSheet, View, Appearance } from 'react-native';
-import { useEffect } from 'react';
-import { useCallback } from 'react';
-import { useState } from 'react';
-import { useMemo } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
 
 interface ContactItemProps {
   title: string;
   subTitle?: string;
 }
 
-const _colorScheme = Appearance.getColorScheme();
-
 const ContactItemComponent = ({ title, subTitle }: ContactItemProps) => {
-  // state
-  const [appearance, setAppearance] = useState(_colorScheme);
-
-  // styles
-  const titleStyle = useMemo(
-    () => ({
-      ...styles.title,
-      color: appearance === 'dark' ? 'white' : '#111',
-    }),
-    [appearance]
-  );
-
-  // callback
-  const handleAppearanceChange = useCallback(({ colorScheme }) => {
-    setAppearance(colorScheme);
-  }, []);
-
-  // effects
-  useEffect(() => {
-    Appearance.addChangeListener(handleAppearanceChange);
-
-    return () => {
-      Appearance.removeChangeListener(handleAppearanceChange);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   // render
   return (
     <View style={styles.container}>
       <View style={styles.thumbnail} />
       <View style={styles.contentContainer}>
-        <Text style={titleStyle}>{title}</Text>
+        <Text style={styles.title}>{title}</Text>
         {subTitle && <Text style={styles.subtitle}>{subTitle}</Text>}
       </View>
       <View style={styles.icon} />
@@ -78,6 +45,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.125)',
   },
   title: {
+    color: '#111',
     fontSize: 16,
     marginBottom: 4,
     textTransform: 'capitalize',

diff --git a/example/src/components/contactList/ContactList.tsx b/example/src/components/contactList/ContactList.tsx
@@ -92,8 +92,6 @@ const ContactList = ({
         initialNumToRender={10}
         windowSize={20}
         maxToRenderPerBatch={5}
-        keyboardDismissMode="on-drag"
-        keyboardShouldPersistTaps="never"
         renderItem={renderFlatListItem}
         {...(header && {
           stickyHeaderIndices: [0],

diff --git a/example/src/components/locationItem/LocationItem.tsx b/example/src/components/locationItem/LocationItem.tsx
@@ -0,0 +1,94 @@
+import React, { memo } from 'react';
+// @ts-ignore
+import { Text, StyleSheet, View, Appearance } from 'react-native';
+import { useEffect } from 'react';
+import { useCallback } from 'react';
+import { useState } from 'react';
+import { useMemo } from 'react';
+
+interface LocationItemProps {
+  title: string;
+  subTitle?: string;
+}
+
+const _colorScheme = Appearance.getColorScheme();
+
+const LocationItemComponent = ({ title, subTitle }: LocationItemProps) => {
+  // state
+  const [appearance, setAppearance] = useState(_colorScheme);
+
+  // styles
+  const titleStyle = useMemo(
+    () => ({
+      ...styles.title,
+      color: appearance === 'dark' ? 'white' : '#111',
+    }),
+    [appearance]
+  );
+
+  // callback
+  const handleAppearanceChange = useCallback(({ colorScheme }) => {
+    setAppearance(colorScheme);
+  }, []);
+
+  // effects
+  useEffect(() => {
+    Appearance.addChangeListener(handleAppearanceChange);
+
+    return () => {
+      Appearance.removeChangeListener(handleAppearanceChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // render
+  return (
+    <>
+      <View style={styles.container}>
+        <View style={styles.thumbnail} />
+        <View style={styles.contentContainer}>
+          <Text style={titleStyle}>{title}</Text>
+          {subTitle && <Text style={styles.subtitle}>{subTitle}</Text>}
+        </View>
+      </View>
+      <View style={styles.separator} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    marginVertical: 12,
+  },
+  contentContainer: {
+    flex: 1,
+    alignSelf: 'center',
+    marginLeft: 12,
+  },
+  thumbnail: {
+    width: 46,
+    height: 46,
+    borderRadius: 46,
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+  },
+  title: {
+    fontSize: 16,
+    marginBottom: 4,
+    textTransform: 'capitalize',
+  },
+  subtitle: {
+    color: '#666',
+    fontSize: 14,
+    textTransform: 'capitalize',
+  },
+  separator: {
+    flex: 1,
+    height: 1,
+    backgroundColor: 'rgba(255,255,255,0.125)',
+  },
+});
+
+const LocationItem = memo(LocationItemComponent);
+
+export default LocationItem;
diff --git a/example/src/components/locationItem/index.ts b/example/src/components/locationItem/index.ts
@@ -0,0 +1 @@
+export { default } from './LocationItem';
diff --git a/example/src/components/searchHandle/SearchHandle.tsx b/example/src/components/searchHandle/SearchHandle.tsx
@@ -36,23 +36,26 @@ const BottomSheetHandleComponent = () => {
 
   // render
   return (
-    <View style={styles.container}>
-      <View style={styles.indicator} />
-      <TextInput
-        style={styles.input}
-        value={value}
-        onChange={handleInputChange}
-        onFocus={handleInputFocus}
-      />
-    </View>
+    <>
+      <View style={styles.container}>
+        <View style={styles.indicator} />
+        <TextInput
+          style={styles.input}
+          value={value}
+          onChange={handleInputChange}
+          onFocus={handleInputFocus}
+        />
+      </View>
+      <View style={styles.separator} />
+    </>
   );
 };
 
 const BottomSheetHandle = memo(BottomSheetHandleComponent, isEqual);
 
 export const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
     paddingVertical: 5,
   },
   input: {
@@ -69,6 +72,10 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+  separator: {
+    height: 1,
+    backgroundColor: 'rgba(255,255,255,0.125)',
+  },
 });
 
 export default BottomSheetHandle;
diff --git a/example/src/screens/MapExample.tsx b/example/src/screens/MapExample.tsx
@@ -14,9 +14,10 @@ import Animated, {
   Extrapolate,
 } from 'react-native-reanimated';
 import { useSafeArea } from 'react-native-safe-area-context';
-import BottomSheet from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import SearchHandle from '../components/searchHandle';
-import ContactList from '../components/contactList';
+import LocationItem from '../components/locationItem';
+import { createLocationListMockData } from '../utils';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -26,6 +27,7 @@ const MapExample = () => {
   const { top: topSafeArea } = useSafeArea();
 
   // variables
+  const data = useMemo(() => createLocationListMockData(15), []);
   const snapPoints = useMemo(
     () => [
       200,
@@ -82,6 +84,16 @@ const MapExample = () => {
       ),
     []
   );
+  const renderItem = useCallback(
+    (item, index) => (
+      <LocationItem
+        key={`${item.name}.${index}`}
+        title={item.name}
+        subTitle={item.address}
+      />
+    ),
+    []
+  );
   return (
     <View style={styles.container}>
       <MapView
@@ -100,7 +112,13 @@ const MapExample = () => {
         backgroundComponent={renderBackground}
         onChange={handleSheetChanges}
       >
-        <ContactList type="FlatList" style={styles.contentContainerStyle} />
+        <BottomSheetScrollView
+          keyboardDismissMode="on-drag"
+          keyboardShouldPersistTaps="never"
+          style={styles.contentContainerStyle}
+        >
+          {data.map(renderItem)}
+        </BottomSheetScrollView>
       </BottomSheet>
     </View>
   );
@@ -115,7 +133,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
   },
   contentContainerStyle: {
-    backgroundColor: 'transparent',
+    flex: 1,
+    paddingHorizontal: 16,
   },
   blurContainer: {
     ...StyleSheet.absoluteFillObject,

diff --git a/example/src/utils/index.ts b/example/src/utils/index.ts
@@ -24,3 +24,11 @@ export const createContactSectionsMockData = (count: number = 50) => {
     })),
   }));
 };
+
+export const createLocationListMockData = (count: number = 50): Contact[] => {
+  return new Array(count).fill(0).map(() => ({
+    name: `${Faker.company.companyName()}`,
+    address: `${Faker.address.city()}, ${Faker.address.country()}`,
+    jobTitle: '',
+  }));
+};