From 9a65a7435b97c754c37049c2812c289b1e6453e6 Mon Sep 17 00:00:00 2001 From: Mo Gorhom Date: Tue, 11 Aug 2020 16:46:35 +0200 Subject: [PATCH] chore: updated map example --- .../components/contactItem/ContactItem.tsx | 38 +------- .../components/contactList/ContactList.tsx | 2 - .../components/locationItem/LocationItem.tsx | 94 +++++++++++++++++++ example/src/components/locationItem/index.ts | 1 + .../components/searchHandle/SearchHandle.tsx | 27 ++++-- example/src/screens/MapExample.tsx | 27 +++++- example/src/utils/index.ts | 8 ++ 7 files changed, 146 insertions(+), 51 deletions(-) create mode 100644 example/src/components/locationItem/LocationItem.tsx create mode 100644 example/src/components/locationItem/index.ts diff --git a/example/src/components/contactItem/ContactItem.tsx b/example/src/components/contactItem/ContactItem.tsx index 89101b5e..cf4f4ee1 100644 --- 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 ( - {title} + {title} {subTitle && {subTitle}} @@ -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 index 187b369e..d07e2e64 100644 --- 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 new file mode 100644 index 00000000..b8f621f1 --- /dev/null +++ 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 ( + <> + + + + {title} + {subTitle && {subTitle}} + + + + + ); +}; + +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 new file mode 100644 index 00000000..bb1c3392 --- /dev/null +++ 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 index aa6f1dac..4b25e732 100644 --- a/example/src/components/searchHandle/SearchHandle.tsx +++ b/example/src/components/searchHandle/SearchHandle.tsx @@ -36,15 +36,18 @@ const BottomSheetHandleComponent = () => { // render return ( - - - - + <> + + + + + + ); }; @@ -52,7 +55,7 @@ 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 index d1d514e5..67a14f93 100644 --- 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) => ( + + ), + [] + ); return ( { backgroundComponent={renderBackground} onChange={handleSheetChanges} > - + + {data.map(renderItem)} + ); @@ -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 index eb4434f1..3f61bc94 100644 --- 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: '', + })); +};