Skip to content

Commit

Permalink
chore: updated map exmaple
Browse files Browse the repository at this point in the history
  • Loading branch information
@gorhom
gorhom committed Dec 22, 2020
1 parent 4e15615 commit d26ab34
Show file tree
Hide file tree
Showing 24 changed files with 980 additions and 413 deletions.
253 changes: 130 additions & 123 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,141 @@
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppearanceProvider from './components/appearanceProvider';
import { AppStackParamsList } from './types';

const Stack = createStackNavigator<AppStackParamsList>();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Root">
<Stack.Screen
name="Root"
getComponent={() => require('./screens/Root').default}
options={{ headerShown: false }}
/>
{/* static examples */}
<Stack.Screen
name="Basic/FlatListExample"
options={{
title: 'FlatList Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').FlatListExampleScreen
}
/>
<Stack.Screen
name="Basic/SectionListExample"
options={{
title: 'SectionList Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').SectionListExampleScreen
}
/>
<Stack.Screen
name="Basic/ScrollViewExample"
options={{
title: 'ScrollView Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').ScrollViewExampleScreen
}
/>
<Stack.Screen
name="Basic/ViewExample"
options={{
title: 'View Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').ViewExampleScreen
}
/>
{/* modal examples */}
<Stack.Screen
name="Modal/SimpleExample"
options={{
title: 'Modal Simple Example',
}}
getComponent={() => require('./screens/modal/SimpleExample').default}
/>
<Stack.Screen
name="Modal/BackdropExample"
options={{
title: 'Modal Backdrop Example',
}}
getComponent={() =>
require('./screens/modal/BackdropExample').default
}
/>
<Stack.Screen
name="Modal/StackExample"
options={{
title: 'Stack Modals Example',
}}
getComponent={() => require('./screens/modal/StackExample').default}
/>
<Stack.Screen
name="Modal/DynamicSnapPointExample"
options={{
title: 'Dynamic Snap Point',
}}
getComponent={() =>
require('./screens/modal/DynamicSnapPointExample').default
}
/>
{/* advanced examples */}
<Stack.Screen
name="Advanced/NavigatorExample"
options={{
title: 'Navigator Example',
}}
getComponent={() =>
require('./screens/advanced/NavigatorExample').default
}
/>
<Stack.Screen
name="Advanced/CustomHandleExample"
options={{
title: 'Custom Handle Example',
}}
getComponent={() =>
require('./screens/advanced/CustomHandleExample').default
}
/>
<Stack.Screen
name="Advanced/BackdropExample"
options={{
title: 'Backdrop Example',
}}
getComponent={() =>
require('./screens/advanced/BackdropExample').default
}
/>
<Stack.Screen
name="Advanced/MapExample"
options={{
headerShown: false,
}}
getComponent={() => require('./screens/advanced/MapExample').default}
/>
<Stack.Screen
name="Advanced/DynamicSnapPointExample"
options={{
title: 'Dynamic Snap Point',
}}
getComponent={() =>
require('./screens/advanced/DynamicSnapPointExample').default
}
/>
</Stack.Navigator>
</NavigationContainer>
<AppearanceProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Root">
<Stack.Screen
name="Root"
getComponent={() => require('./screens/Root').default}
options={{ headerShown: false }}
/>
{/* static examples */}
<Stack.Screen
name="Basic/FlatListExample"
options={{
title: 'FlatList Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').FlatListExampleScreen
}
/>
<Stack.Screen
name="Basic/SectionListExample"
options={{
title: 'SectionList Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').SectionListExampleScreen
}
/>
<Stack.Screen
name="Basic/ScrollViewExample"
options={{
title: 'ScrollView Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').ScrollViewExampleScreen
}
/>
<Stack.Screen
name="Basic/ViewExample"
options={{
title: 'View Example',
}}
getComponent={() =>
require('./screens/basic/BasicExamples').ViewExampleScreen
}
/>
{/* modal examples */}
<Stack.Screen
name="Modal/SimpleExample"
options={{
title: 'Modal Simple Example',
}}
getComponent={() =>
require('./screens/modal/SimpleExample').default
}
/>
<Stack.Screen
name="Modal/BackdropExample"
options={{
title: 'Modal Backdrop Example',
}}
getComponent={() =>
require('./screens/modal/BackdropExample').default
}
/>
<Stack.Screen
name="Modal/StackExample"
options={{
title: 'Stack Modals Example',
}}
getComponent={() => require('./screens/modal/StackExample').default}
/>
<Stack.Screen
name="Modal/DynamicSnapPointExample"
options={{
title: 'Dynamic Snap Point',
}}
getComponent={() =>
require('./screens/modal/DynamicSnapPointExample').default
}
/>
{/* advanced examples */}
<Stack.Screen
name="Advanced/NavigatorExample"
options={{
title: 'Navigator Example',
}}
getComponent={() =>
require('./screens/advanced/NavigatorExample').default
}
/>
<Stack.Screen
name="Advanced/CustomHandleExample"
options={{
title: 'Custom Handle Example',
}}
getComponent={() =>
require('./screens/advanced/CustomHandleExample').default
}
/>
<Stack.Screen
name="Advanced/BackdropExample"
options={{
title: 'Backdrop Example',
}}
getComponent={() =>
require('./screens/advanced/BackdropExample').default
}
/>
<Stack.Screen
name="Advanced/MapExample"
options={{
headerShown: false,
}}
getComponent={() =>
require('./screens/advanced/MapExample').default
}
/>
<Stack.Screen
name="Advanced/DynamicSnapPointExample"
options={{
title: 'Dynamic Snap Point',
}}
getComponent={() =>
require('./screens/advanced/DynamicSnapPointExample').default
}
/>
</Stack.Navigator>
</NavigationContainer>
</AppearanceProvider>
);
}

Expand Down
45 changes: 45 additions & 0 deletions example/src/components/appearanceProvider/AppearanceProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, {
ReactNode,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
// @ts-ignore
import { Appearance } from 'react-native';
import { AppearanceContext } from '../../contexts';

interface AppearanceProviderProps {
children?: ReactNode;
}

const _colorScheme = Appearance.getColorScheme();

const AppearanceProvider = ({ children }: AppearanceProviderProps) => {
// state
const [appearance, setAppearance] = useState(_colorScheme);

// variables
const contextValue = useMemo(() => ({ appearance }), [appearance]);

// callback
const handleAppearanceChange = useCallback(({ colorScheme }) => {
setAppearance(colorScheme);
}, []);

// effects
useEffect(() => {
Appearance.addChangeListener(handleAppearanceChange);

return () => {
Appearance.removeChangeListener(handleAppearanceChange);
};
}, [handleAppearanceChange]);
return (
<AppearanceContext.Provider value={contextValue}>
{children}
</AppearanceContext.Provider>
);
};

export default AppearanceProvider;
1 change: 1 addition & 0 deletions example/src/components/appearanceProvider/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './AppearanceProvider';
29 changes: 29 additions & 0 deletions example/src/components/blurredBackground/BlurredBackground.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { BlurView } from '@react-native-community/blur';

const BlurredBackground = () =>
Platform.OS === 'ios' ? (
<View style={styles.container}>
<BlurView blurType="chromeMaterial" style={styles.blurView} />
</View>
) : (
<View style={[styles.container, styles.androidContainer]} />
);

const styles = StyleSheet.create({
blurView: {
...StyleSheet.absoluteFillObject,
},
container: {
...StyleSheet.absoluteFillObject,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
},
androidContainer: {
backgroundColor: 'rgba(255,255,255, 0.95)',
},
});

export default BlurredBackground;
1 change: 1 addition & 0 deletions example/src/components/blurredBackground/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './BlurredBackground';
Loading

0 comments on commit d26ab34

Please sign in to comment.