Skip to content

Commit

Permalink
chore: added map example
Browse files Browse the repository at this point in the history
  • Loading branch information
gorhom committed Aug 11, 2020
1 parent 069fca0 commit 312bcd1
Show file tree
Hide file tree
Showing 12 changed files with 306 additions and 9 deletions.
6 changes: 5 additions & 1 deletion example/android/app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
12 changes: 12 additions & 0 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down Expand Up @@ -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`)
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
8 changes: 8 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand Down Expand Up @@ -50,6 +51,13 @@ function App() {
name="ShadowOverlayExample"
component={ShadowOverlayExampleScreen}
/>
<Stack.Screen
name="MapExample"
options={{
headerShown: false,
}}
component={MapExampleScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
Expand Down
40 changes: 36 additions & 4 deletions example/src/components/contactItem/ContactItem.tsx
Original file line number Diff line number Diff line change
@@ -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} />
Expand Down Expand Up @@ -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',
},
Expand Down
15 changes: 12 additions & 3 deletions example/src/components/contactList/ContactList.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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();

Expand All @@ -32,9 +38,10 @@ const ContactList = ({ type, count = 50, header = null }: ContactListProps) => {
const contentContainerStyle = useMemo(
() => ({
...styles.contentContainer,
...style,
paddingBottom: bottomSafeArea,
}),
[bottomSafeArea]
[style, bottomSafeArea]
);

// renders
Expand Down Expand Up @@ -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],
Expand Down
74 changes: 74 additions & 0 deletions example/src/components/searchHandle/SearchHandle.tsx
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions example/src/components/searchHandle/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './SearchHandle';
Loading

0 comments on commit 312bcd1

Please sign in to comment.