chore: added map example

example/android/app/src/main/AndroidManifest.xml

@@ -15,13 +15,17 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustPan">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+
+      <meta-data
+        android:name="com.google.android.geo.API_KEY"
+        android:value="AIzaSyBAefhRlXEH3vCko-zZTX6PHllTR6av4WI"/>
     </application>
 
 </manifest>

example/ios/Podfile.lock

@@ -233,6 +233,10 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
   - React-jsinspector (0.62.2)
+  - react-native-blur (0.8.0):
+    - React
+  - react-native-maps (0.27.1):
+    - React
   - react-native-safe-area-context (0.7.3):
     - React
   - React-RCTActionSheet (0.62.2):
@@ -328,6 +332,8 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
+  - react-native-maps (from `../node_modules/react-native-maps`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -390,6 +396,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-blur:
+    :path: "../node_modules/@react-native-community/blur"
+  react-native-maps:
+    :path: "../node_modules/react-native-maps"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
@@ -449,6 +459,8 @@ SPEC CHECKSUMS:
   React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
+  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
+  react-native-maps: f4b89da81626ad7f151a8bfcb79733295d31ce5c
   react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
   React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0

example/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@gorhom/showcase-template": "^0.3.1",
+    "@react-native-community/blur": "^3.6.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
@@ -18,6 +19,7 @@
     "react": "16.11.0",
     "react-native": "0.62.2",
     "react-native-gesture-handler": "^1.7.0",
+    "react-native-maps": "^0.27.1",
     "react-native-reanimated": "^1.11.0",
     "react-native-redash": "^14.2.3",
     "react-native-safe-area-context": "0.7.3",

example/src/App.tsx

@@ -11,6 +11,7 @@ import {
 } from './screens/BasicExamples';
 import CustomHandleExampleScreen from './screens/CustomHandleExample';
 import ShadowOverlayExampleScreen from './screens/ShadowOverlayExample';
+import MapExampleScreen from './screens/MapExample';
 import { AppStackParamsList } from './types';
 
 const Stack = createStackNavigator<AppStackParamsList>();
@@ -50,6 +51,13 @@ function App() {
           name="ShadowOverlayExample"
           component={ShadowOverlayExampleScreen}
         />
+        <Stack.Screen
+          name="MapExample"
+          options={{
+            headerShown: false,
+          }}
+          component={MapExampleScreen}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

example/src/components/contactItem/ContactItem.tsx

@@ -1,18 +1,51 @@
 import React, { memo } from 'react';
-import { Text, StyleSheet, View } from 'react-native';
+// @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 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={styles.title}>{title}</Text>
+        <Text style={titleStyle}>{title}</Text>
         {subTitle && <Text style={styles.subtitle}>{subTitle}</Text>}
       </View>
       <View style={styles.icon} />
@@ -45,14 +78,13 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.125)',
   },
   title: {
-    color: '#111',
     fontSize: 16,
     marginBottom: 4,
     textTransform: 'capitalize',
   },
 
   subtitle: {
-    color: '#444',
+    color: '#666',
     fontSize: 14,
     textTransform: 'capitalize',
   },

example/src/components/contactList/ContactList.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { StyleSheet, Text, Platform, View } from 'react-native';
+import { StyleSheet, Text, Platform, View, ViewStyle } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { useFocusEffect } from '@react-navigation/native';
 import {
@@ -18,9 +18,15 @@ interface ContactListProps {
   type: 'FlatList' | 'SectionList' | 'ScrollView' | 'View';
   count?: number;
   header?: (() => JSX.Element) | null;
+  style?: ViewStyle;
 }
 
-const ContactList = ({ type, count = 50, header = null }: ContactListProps) => {
+const ContactList = ({
+  type,
+  count = 50,
+  header = null,
+  style,
+}: ContactListProps) => {
   // hooks
   const { bottom: bottomSafeArea } = useSafeArea();
 
@@ -32,9 +38,10 @@ const ContactList = ({ type, count = 50, header = null }: ContactListProps) => {
   const contentContainerStyle = useMemo(
     () => ({
       ...styles.contentContainer,
+      ...style,
       paddingBottom: bottomSafeArea,
     }),
-    [bottomSafeArea]
+    [style, bottomSafeArea]
   );
 
   // renders
@@ -85,6 +92,8 @@ const ContactList = ({ type, count = 50, header = null }: ContactListProps) => {
         initialNumToRender={10}
         windowSize={20}
         maxToRenderPerBatch={5}
+        keyboardDismissMode="on-drag"
+        keyboardShouldPersistTaps="never"
         renderItem={renderFlatListItem}
         {...(header && {
           stickyHeaderIndices: [0],

example/src/components/searchHandle/SearchHandle.tsx

@@ -0,0 +1,74 @@
+import React, { memo } from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from 'react-native';
+import { useBottomSheet } from '@gorhom/bottom-sheet';
+import { TextInput } from 'react-native-gesture-handler';
+import isEqual from 'lodash.isequal';
+import { useState } from 'react';
+import { useCallback } from 'react';
+
+const { width: windowWidth } = Dimensions.get('window');
+
+const BottomSheetHandleComponent = () => {
+  // state
+  const [value, setValue] = useState('');
+
+  // hooks
+  const { snapTo } = useBottomSheet();
+
+  // callbacks
+  const handleInputChange = useCallback(
+    ({
+      nativeEvent: { text },
+    }: NativeSyntheticEvent<TextInputChangeEventData>) => {
+      setValue(text);
+    },
+    []
+  );
+  const handleInputFocus = useCallback(() => {
+    snapTo(2);
+  }, [snapTo]);
+
+  // render
+  return (
+    <View style={styles.container}>
+      <View style={styles.indicator} />
+      <TextInput
+        style={styles.input}
+        value={value}
+        onChange={handleInputChange}
+        onFocus={handleInputFocus}
+      />
+    </View>
+  );
+};
+
+const BottomSheetHandle = memo(BottomSheetHandleComponent, isEqual);
+
+export const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 24,
+    paddingVertical: 5,
+  },
+  input: {
+    marginTop: 5,
+    marginBottom: 10,
+    borderRadius: 8,
+    padding: 6,
+    backgroundColor: 'rgba(151, 151, 151, 0.25)',
+  },
+  indicator: {
+    alignSelf: 'center',
+    width: (7.5 * windowWidth) / 100,
+    height: 4,
+    borderRadius: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});
+
+export default BottomSheetHandle;

example/src/components/searchHandle/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchHandle';