├── .gitignore
├── README.md
├── app.json
├── app
    ├── (tabs)
    │   ├── (home)
    │   │   ├── _layout.tsx
    │   │   ├── another.tsx
    │   │   └── index.tsx
    │   ├── _layout.tsx
    │   └── profile
    │   │   ├── _layout.tsx
    │   │   └── index.tsx
    ├── +html.tsx
    ├── [...missing].tsx
    ├── _layout.tsx
    └── modal.tsx
├── assets
    ├── fonts
    │   └── SpaceMono-Regular.ttf
    └── images
    │   ├── adaptive-icon.png
    │   ├── favicon.png
    │   ├── icon.png
    │   └── splash.png
├── babel.config.js
├── components
    ├── EditScreenInfo.tsx
    ├── ExternalLink.tsx
    ├── StyledText.tsx
    ├── Themed.tsx
    └── __tests__
    │   └── StyledText-test.js
├── constants
    └── Colors.ts
├── metro.config.js
├── package.json
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 2 | 
 3 | # dependencies
 4 | node_modules/
 5 | 
 6 | # Expo
 7 | .expo/
 8 | dist/
 9 | web-build/
10 | 
11 | # Native
12 | *.orig.*
13 | *.jks
14 | *.p8
15 | *.p12
16 | *.key
17 | *.mobileprovision
18 | 
19 | # Metro
20 | .metro-health-check*
21 | 
22 | # debug
23 | npm-debug.*
24 | yarn-debug.*
25 | yarn-error.*
26 | 
27 | # macOS
28 | .DS_Store
29 | *.pem
30 | 
31 | # local env files
32 | .env*.local
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | 
37 | # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
38 | # The following patterns were generated by expo-cli
39 | 
40 | expo-env.d.ts
41 | # @end expo-cli


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Expo Router with Bottom Sheet Example
2 | 
3 | An example project to showcase the usage of [Expo Router](https://expo.github.io/router/docs/) with [React Native Bottom Sheet](https://gorhom.github.io/react-native-bottom-sheet/).
4 | 
5 | 
6 | 
7 | https://github.com/pzatorski/expo-router-with-bottom-sheet/assets/11720377/dbe50db2-18dd-49bd-b979-c2f5eabaf72d
8 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "expo-router-with-bottom-sheet",
 4 |     "slug": "expo-router-with-bottom-sheet",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/images/icon.png",
 8 |     "scheme": "myapp",
 9 |     "userInterfaceStyle": "automatic",
10 |     "splash": {
11 |       "image": "./assets/images/splash.png",
12 |       "resizeMode": "contain",
13 |       "backgroundColor": "#ffffff"
14 |     },
15 |     "assetBundlePatterns": [
16 |       "**/*"
17 |     ],
18 |     "ios": {
19 |       "supportsTablet": true
20 |     },
21 |     "android": {
22 |       "adaptiveIcon": {
23 |         "foregroundImage": "./assets/images/adaptive-icon.png",
24 |         "backgroundColor": "#ffffff"
25 |       }
26 |     },
27 |     "web": {
28 |       "bundler": "metro",
29 |       "output": "static",
30 |       "favicon": "./assets/images/favicon.png"
31 |     },
32 |     "plugins": [
33 |       "expo-router"
34 |     ],
35 |     "experiments": {
36 |       "typedRoutes": true
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/app/(tabs)/(home)/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import { FontAwesome } from '@expo/vector-icons';
 2 | import {
 3 |   BottomSheetModal,
 4 |   BottomSheetModalProvider,
 5 | } from '@gorhom/bottom-sheet';
 6 | import { Link, Stack } from 'expo-router';
 7 | import { useEffect, useMemo, useRef } from 'react';
 8 | import { Pressable, StyleSheet, View } from 'react-native';
 9 | import MapView from 'react-native-maps';
10 | 
11 | export default function HomeLayout() {
12 |   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
13 |   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
14 | 
15 |   useEffect(() => {
16 |     bottomSheetModalRef.current?.present();
17 |   }, []);
18 | 
19 |   return (
20 |     <BottomSheetModalProvider>
21 |       <View style={styles.container}>
22 |         <MapView style={styles.map} />
23 |       </View>
24 | 
25 |       <BottomSheetModal
26 |         ref={bottomSheetModalRef}
27 |         index={0}
28 |         snapPoints={snapPoints}
29 |         enablePanDownToClose={false}
30 |       >
31 |         <Stack>
32 |           <Stack.Screen
33 |             name="index"
34 |             options={{
35 |               title: 'Main Screen',
36 | 
37 |               headerRight: () => (
38 |                 <Link href="/another" asChild>
39 |                   <Pressable>
40 |                     {({ pressed }) => (
41 |                       <FontAwesome
42 |                         name="address-book"
43 |                         size={22}
44 |                         style={{
45 |                           marginRight: 10,
46 |                           opacity: pressed ? 0.5 : 1,
47 |                         }}
48 |                       />
49 |                     )}
50 |                   </Pressable>
51 |                 </Link>
52 |               ),
53 |             }}
54 |           />
55 |           <Stack.Screen
56 |             name="another"
57 |             options={{ title: 'Another' }}
58 |           />
59 |         </Stack>
60 |       </BottomSheetModal>
61 |     </BottomSheetModalProvider>
62 |   );
63 | }
64 | 
65 | const styles = StyleSheet.create({
66 |   container: {
67 |     flex: 1,
68 |   },
69 |   map: {
70 |     width: '100%',
71 |     height: '100%',
72 |   },
73 | });
74 | 


--------------------------------------------------------------------------------
/app/(tabs)/(home)/another.tsx:
--------------------------------------------------------------------------------
 1 | import { View, Text, StyleSheet } from 'react-native';
 2 | import React from 'react';
 3 | 
 4 | export default function AnotherScreen() {
 5 |   return (
 6 |     <View style={styles.container}>
 7 |       <Text>AnotherScreen</Text>
 8 |     </View>
 9 |   );
10 | }
11 | 
12 | const styles = StyleSheet.create({
13 |   container: {
14 |     flex: 1,
15 |     alignItems: 'center',
16 |     justifyContent: 'center',
17 |   },
18 | });
19 | 


--------------------------------------------------------------------------------
/app/(tabs)/(home)/index.tsx:
--------------------------------------------------------------------------------
 1 | import { View, Text, StyleSheet } from 'react-native';
 2 | import React from 'react';
 3 | import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 4 | 
 5 | const data = Array.from({ length: 50 }).map((_, index) => ({
 6 |   id: index,
 7 |   title: `Item ${index}`,
 8 | }));
 9 | 
10 | export default function HomeScreen() {
11 |   return (
12 |     <BottomSheetScrollView contentContainerStyle={styles.container}>
13 |       <Text style={styles.title}>Data:</Text>
14 | 
15 |       {data.map((item) => (
16 |         <View key={item.id}>
17 |           <Text>{item.title}</Text>
18 |         </View>
19 |       ))}
20 |     </BottomSheetScrollView>
21 |   );
22 | }
23 | 
24 | const styles = StyleSheet.create({
25 |   container: {
26 |     padding: 16,
27 |   },
28 |   title: {
29 |     fontSize: 16,
30 |     fontWeight: '600',
31 |     marginBottom: 8,
32 |   },
33 | });
34 | 


--------------------------------------------------------------------------------
/app/(tabs)/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import FontAwesome from '@expo/vector-icons/FontAwesome';
 2 | import { Link, Tabs } from 'expo-router';
 3 | import { Pressable, useColorScheme } from 'react-native';
 4 | 
 5 | import Colors from '../../constants/Colors';
 6 | 
 7 | /**
 8 |  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 9 |  */
10 | function TabBarIcon(props: {
11 |   name: React.ComponentProps<typeof FontAwesome>['name'];
12 |   color: string;
13 | }) {
14 |   return (
15 |     <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />
16 |   );
17 | }
18 | 
19 | export default function TabLayout() {
20 |   const colorScheme = useColorScheme();
21 | 
22 |   return (
23 |     <Tabs
24 |       screenOptions={{
25 |         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
26 |       }}
27 |     >
28 |       <Tabs.Screen
29 |         name="(home)"
30 |         options={{
31 |           title: 'Home',
32 |           tabBarIcon: ({ color }) => (
33 |             <TabBarIcon name="home" color={color} />
34 |           ),
35 |           headerRight: () => (
36 |             <Link href="/modal" asChild>
37 |               <Pressable>
38 |                 {({ pressed }) => (
39 |                   <FontAwesome
40 |                     name="info-circle"
41 |                     size={25}
42 |                     color={Colors[colorScheme ?? 'light'].text}
43 |                     style={{
44 |                       marginRight: 15,
45 |                       opacity: pressed ? 0.5 : 1,
46 |                     }}
47 |                   />
48 |                 )}
49 |               </Pressable>
50 |             </Link>
51 |           ),
52 |         }}
53 |       />
54 |       <Tabs.Screen
55 |         name="profile"
56 |         options={{
57 |           title: 'Profile',
58 |           tabBarIcon: ({ color }) => (
59 |             <TabBarIcon name="user" color={color} />
60 |           ),
61 |         }}
62 |       />
63 |     </Tabs>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/app/(tabs)/profile/_layout.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from 'expo-router';
2 | 
3 | export default function ProfileLayout() {
4 |   return <Slot />;
5 | }
6 | 


--------------------------------------------------------------------------------
/app/(tabs)/profile/index.tsx:
--------------------------------------------------------------------------------
 1 | import { View, Text, StyleSheet } from 'react-native';
 2 | import React from 'react';
 3 | 
 4 | export default function ProfileScreen() {
 5 |   return (
 6 |     <View style={styles.container}>
 7 |       <Text>ProfileScreen</Text>
 8 |     </View>
 9 |   );
10 | }
11 | 
12 | const styles = StyleSheet.create({
13 |   container: {
14 |     flex: 1,
15 |     alignItems: 'center',
16 |     justifyContent: 'center',
17 |   },
18 | });
19 | 


--------------------------------------------------------------------------------
/app/+html.tsx:
--------------------------------------------------------------------------------
 1 | import { ScrollViewStyleReset } from 'expo-router/html';
 2 | 
 3 | // This file is web-only and used to configure the root HTML for every
 4 | // web page during static rendering.
 5 | // The contents of this function only run in Node.js environments and
 6 | // do not have access to the DOM or browser APIs.
 7 | export default function Root({ children }: { children: React.ReactNode }) {
 8 |   return (
 9 |     <html lang="en">
10 |       <head>
11 |         <meta charSet="utf-8" />
12 |         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
13 | 
14 |         {/* 
15 |           This viewport disables scaling which makes the mobile website act more like a native app.
16 |           However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
17 |             <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
18 |         */}
19 |         <meta
20 |           name="viewport"
21 |           content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
22 |         />
23 |         {/* 
24 |           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
25 |           However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
26 |         */}
27 |         <ScrollViewStyleReset />
28 | 
29 |         {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
30 |         <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
31 |         {/* Add any additional <head> elements that you want globally available on web... */}
32 |       </head>
33 |       <body>{children}</body>
34 |     </html>
35 |   );
36 | }
37 | 
38 | const responsiveBackground = `
39 | body {
40 |   background-color: #fff;
41 | }
42 | @media (prefers-color-scheme: dark) {
43 |   body {
44 |     background-color: #000;
45 |   }
46 | }`;
47 | 


--------------------------------------------------------------------------------
/app/[...missing].tsx:
--------------------------------------------------------------------------------
 1 | import { Link, Stack } from 'expo-router';
 2 | import { StyleSheet } from 'react-native';
 3 | 
 4 | import { Text, View } from '../components/Themed';
 5 | 
 6 | export default function NotFoundScreen() {
 7 |   return (
 8 |     <>
 9 |       <Stack.Screen options={{ title: 'Oops!' }} />
10 |       <View style={styles.container}>
11 |         <Text style={styles.title}>This screen doesn't exist.</Text>
12 | 
13 |         <Link href="/" style={styles.link}>
14 |           <Text style={styles.linkText}>Go to home screen!</Text>
15 |         </Link>
16 |       </View>
17 |     </>
18 |   );
19 | }
20 | 
21 | const styles = StyleSheet.create({
22 |   container: {
23 |     flex: 1,
24 |     alignItems: 'center',
25 |     justifyContent: 'center',
26 |     padding: 20,
27 |   },
28 |   title: {
29 |     fontSize: 20,
30 |     fontWeight: 'bold',
31 |   },
32 |   link: {
33 |     marginTop: 15,
34 |     paddingVertical: 15,
35 |   },
36 |   linkText: {
37 |     fontSize: 14,
38 |     color: '#2e78b7',
39 |   },
40 | });
41 | 


--------------------------------------------------------------------------------
/app/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import FontAwesome from '@expo/vector-icons/FontAwesome';
 2 | import {
 3 |   DarkTheme,
 4 |   DefaultTheme,
 5 |   ThemeProvider,
 6 | } from '@react-navigation/native';
 7 | import { useFonts } from 'expo-font';
 8 | import { Slot, SplashScreen, Stack } from 'expo-router';
 9 | import { useEffect } from 'react';
10 | import { useColorScheme } from 'react-native';
11 | 
12 | export {
13 |   // Catch any errors thrown by the Layout component.
14 |   ErrorBoundary,
15 | } from 'expo-router';
16 | 
17 | // Prevent the splash screen from auto-hiding before asset loading is complete.
18 | SplashScreen.preventAutoHideAsync();
19 | 
20 | export default function RootLayout() {
21 |   const [loaded, error] = useFonts({
22 |     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
23 |     ...FontAwesome.font,
24 |   });
25 | 
26 |   // Expo Router uses Error Boundaries to catch errors in the navigation tree.
27 |   useEffect(() => {
28 |     if (error) throw error;
29 |   }, [error]);
30 | 
31 |   useEffect(() => {
32 |     if (loaded) {
33 |       SplashScreen.hideAsync();
34 |     }
35 |   }, [loaded]);
36 | 
37 |   if (!loaded) {
38 |     return <Slot />;
39 |   }
40 | 
41 |   return <RootLayoutNav />;
42 | }
43 | 
44 | function RootLayoutNav() {
45 |   const colorScheme = useColorScheme();
46 | 
47 |   return (
48 |     <ThemeProvider
49 |       value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
50 |     >
51 |       <Stack>
52 |         <Stack.Screen
53 |           name="(tabs)"
54 |           options={{ headerShown: false }}
55 |         />
56 |         <Stack.Screen
57 |           name="modal"
58 |           options={{ presentation: 'modal' }}
59 |         />
60 |       </Stack>
61 |     </ThemeProvider>
62 |   );
63 | }
64 | 


--------------------------------------------------------------------------------
/app/modal.tsx:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from 'expo-status-bar';
 2 | import { Platform, StyleSheet } from 'react-native';
 3 | 
 4 | import EditScreenInfo from '../components/EditScreenInfo';
 5 | import { Text, View } from '../components/Themed';
 6 | 
 7 | export default function ModalScreen() {
 8 |   return (
 9 |     <View style={styles.container}>
10 |       <Text style={styles.title}>Modal</Text>
11 |       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
12 |       <EditScreenInfo path="app/modal.tsx" />
13 | 
14 |       {/* Use a light status bar on iOS to account for the black space above the modal */}
15 |       <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
16 |     </View>
17 |   );
18 | }
19 | 
20 | const styles = StyleSheet.create({
21 |   container: {
22 |     flex: 1,
23 |     alignItems: 'center',
24 |     justifyContent: 'center',
25 |   },
26 |   title: {
27 |     fontSize: 20,
28 |     fontWeight: 'bold',
29 |   },
30 |   separator: {
31 |     marginVertical: 30,
32 |     height: 1,
33 |     width: '80%',
34 |   },
35 | });
36 | 


--------------------------------------------------------------------------------
/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pzatorski/expo-router-with-bottom-sheet/d30f2e4a6fa4a378e1603589cb05a2b510313ffd/assets/fonts/SpaceMono-Regular.ttf


--------------------------------------------------------------------------------
/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pzatorski/expo-router-with-bottom-sheet/d30f2e4a6fa4a378e1603589cb05a2b510313ffd/assets/images/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pzatorski/expo-router-with-bottom-sheet/d30f2e4a6fa4a378e1603589cb05a2b510313ffd/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pzatorski/expo-router-with-bottom-sheet/d30f2e4a6fa4a378e1603589cb05a2b510313ffd/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pzatorski/expo-router-with-bottom-sheet/d30f2e4a6fa4a378e1603589cb05a2b510313ffd/assets/images/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (api) {
 2 |   api.cache(true);
 3 |   return {
 4 |     presets: ['babel-preset-expo'],
 5 |     plugins: [
 6 |       // Required for expo-router
 7 |       'expo-router/babel',
 8 |       'react-native-reanimated/plugin',
 9 |     ],
10 |   };
11 | };
12 | 


--------------------------------------------------------------------------------
/components/EditScreenInfo.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet } from 'react-native';
 3 | 
 4 | import Colors from '../constants/Colors';
 5 | import { ExternalLink } from './ExternalLink';
 6 | import { MonoText } from './StyledText';
 7 | import { Text, View } from './Themed';
 8 | 
 9 | 
10 | export default function EditScreenInfo({ path }: { path: string }) {
11 |   return (
12 |     <View>
13 |       <View style={styles.getStartedContainer}>
14 |         <Text
15 |           style={styles.getStartedText}
16 |           lightColor="rgba(0,0,0,0.8)"
17 |           darkColor="rgba(255,255,255,0.8)">
18 |           Open up the code for this screen:
19 |         </Text>
20 | 
21 |         <View
22 |           style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
23 |           darkColor="rgba(255,255,255,0.05)"
24 |           lightColor="rgba(0,0,0,0.05)">
25 |           <MonoText>{path}</MonoText>
26 |         </View>
27 | 
28 |         <Text
29 |           style={styles.getStartedText}
30 |           lightColor="rgba(0,0,0,0.8)"
31 |           darkColor="rgba(255,255,255,0.8)">
32 |           Change any of the text, save the file, and your app will automatically update.
33 |         </Text>
34 |       </View>
35 | 
36 |       <View style={styles.helpContainer}>
37 |         <ExternalLink
38 |           style={styles.helpLink}
39 |           href="https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet">
40 |           <Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
41 |             Tap here if your app doesn't automatically update after making changes
42 |           </Text>
43 |         </ExternalLink>
44 |       </View>
45 |     </View>
46 |   );
47 | }
48 | 
49 | const styles = StyleSheet.create({
50 |   getStartedContainer: {
51 |     alignItems: 'center',
52 |     marginHorizontal: 50,
53 |   },
54 |   homeScreenFilename: {
55 |     marginVertical: 7,
56 |   },
57 |   codeHighlightContainer: {
58 |     borderRadius: 3,
59 |     paddingHorizontal: 4,
60 |   },
61 |   getStartedText: {
62 |     fontSize: 17,
63 |     lineHeight: 24,
64 |     textAlign: 'center',
65 |   },
66 |   helpContainer: {
67 |     marginTop: 15,
68 |     marginHorizontal: 20,
69 |     alignItems: 'center',
70 |   },
71 |   helpLink: {
72 |     paddingVertical: 15,
73 |   },
74 |   helpLinkText: {
75 |     textAlign: 'center',
76 |   },
77 | });
78 | 


--------------------------------------------------------------------------------
/components/ExternalLink.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from 'expo-router';
 2 | import * as WebBrowser from 'expo-web-browser';
 3 | import React from 'react';
 4 | import { Platform } from 'react-native';
 5 | 
 6 | export function ExternalLink(
 7 |   props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string }
 8 | ) {
 9 |   return (
10 |     <Link
11 |       hrefAttrs={{
12 |         // On web, launch the link in a new tab.
13 |         target: '_blank',
14 |       }}
15 |       {...props}
16 |       // @ts-expect-error: External URLs are not typed.
17 |       href={props.href}
18 |       onPress={(e) => {
19 |         if (Platform.OS !== 'web') {
20 |           // Prevent the default behavior of linking to the default browser on native.
21 |           e.preventDefault();
22 |           // Open the link in an in-app browser.
23 |           WebBrowser.openBrowserAsync(props.href as string);
24 |         }
25 |       }}
26 |     />
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/components/StyledText.tsx:
--------------------------------------------------------------------------------
1 | import { Text, TextProps } from './Themed';
2 | 
3 | export function MonoText(props: TextProps) {
4 |   return <Text {...props} style={[props.style, { fontFamily: 'SpaceMono' }]} />;
5 | }
6 | 


--------------------------------------------------------------------------------
/components/Themed.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Learn more about Light and Dark modes:
 3 |  * https://docs.expo.io/guides/color-schemes/
 4 |  */
 5 | 
 6 | import { Text as DefaultText, useColorScheme, View as DefaultView } from 'react-native';
 7 | 
 8 | import Colors from '../constants/Colors';
 9 | 
10 | type ThemeProps = {
11 |   lightColor?: string;
12 |   darkColor?: string;
13 | };
14 | 
15 | export type TextProps = ThemeProps & DefaultText['props'];
16 | export type ViewProps = ThemeProps & DefaultView['props'];
17 | 
18 | export function useThemeColor(
19 |   props: { light?: string; dark?: string },
20 |   colorName: keyof typeof Colors.light & keyof typeof Colors.dark
21 | ) {
22 |   const theme = useColorScheme() ?? 'light';
23 |   const colorFromProps = props[theme];
24 | 
25 |   if (colorFromProps) {
26 |     return colorFromProps;
27 |   } else {
28 |     return Colors[theme][colorName];
29 |   }
30 | }
31 | 
32 | export function Text(props: TextProps) {
33 |   const { style, lightColor, darkColor, ...otherProps } = props;
34 |   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
35 | 
36 |   return <DefaultText style={[{ color }, style]} {...otherProps} />;
37 | }
38 | 
39 | export function View(props: ViewProps) {
40 |   const { style, lightColor, darkColor, ...otherProps } = props;
41 |   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
42 | 
43 |   return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
44 | }
45 | 


--------------------------------------------------------------------------------
/components/__tests__/StyledText-test.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import renderer from 'react-test-renderer';
 3 | 
 4 | import { MonoText } from '../StyledText';
 5 | 
 6 | it(`renders correctly`, () => {
 7 |   const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
 8 | 
 9 |   expect(tree).toMatchSnapshot();
10 | });
11 | 


--------------------------------------------------------------------------------
/constants/Colors.ts:
--------------------------------------------------------------------------------
 1 | const tintColorLight = '#2f95dc';
 2 | const tintColorDark = '#fff';
 3 | 
 4 | export default {
 5 |   light: {
 6 |     text: '#000',
 7 |     background: '#fff',
 8 |     tint: tintColorLight,
 9 |     tabIconDefault: '#ccc',
10 |     tabIconSelected: tintColorLight,
11 |   },
12 |   dark: {
13 |     text: '#fff',
14 |     background: '#000',
15 |     tint: tintColorDark,
16 |     tabIconDefault: '#ccc',
17 |     tabIconSelected: tintColorDark,
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
 1 | // Learn more https://docs.expo.io/guides/customizing-metro
 2 | const { getDefaultConfig } = require('expo/metro-config');
 3 | 
 4 | /** @type {import('expo/metro-config').MetroConfig} */
 5 | const config = getDefaultConfig(__dirname, {
 6 |   // [Web-only]: Enables CSS support in Metro.
 7 |   isCSSEnabled: true,
 8 | });
 9 | 
10 | module.exports = config;
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "expo-router-with-bottom-sheet",
 3 |   "main": "expo-router/entry",
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "test": "jest --watchAll"
11 |   },
12 |   "jest": {
13 |     "preset": "jest-expo"
14 |   },
15 |   "dependencies": {
16 |     "@expo/vector-icons": "^13.0.0",
17 |     "@gorhom/bottom-sheet": "^4",
18 |     "@react-navigation/native": "^6.0.2",
19 |     "expo": "~49.0.8",
20 |     "expo-font": "~11.4.0",
21 |     "expo-linking": "~5.0.2",
22 |     "expo-router": "2.0.0",
23 |     "expo-splash-screen": "~0.20.5",
24 |     "expo-status-bar": "~1.6.0",
25 |     "expo-system-ui": "~2.4.0",
26 |     "expo-web-browser": "~12.3.2",
27 |     "react": "18.2.0",
28 |     "react-dom": "18.2.0",
29 |     "react-native": "0.72.4",
30 |     "react-native-gesture-handler": "~2.12.0",
31 |     "react-native-maps": "1.7.1",
32 |     "react-native-reanimated": "~3.3.0",
33 |     "react-native-safe-area-context": "4.6.3",
34 |     "react-native-screens": "~3.22.0",
35 |     "react-native-web": "~0.19.6"
36 |   },
37 |   "devDependencies": {
38 |     "@babel/core": "^7.20.0",
39 |     "@types/react": "~18.2.14",
40 |     "jest": "^29.2.1",
41 |     "jest-expo": "~49.0.0",
42 |     "react-test-renderer": "18.2.0",
43 |     "typescript": "^5.1.3"
44 |   },
45 |   "overrides": {
46 |     "react-refresh": "~0.14.0"
47 |   },
48 |   "resolutions": {
49 |     "react-refresh": "~0.14.0"
50 |   },
51 |   "private": true
52 | }
53 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "expo/tsconfig.base",
 3 |   "compilerOptions": {
 4 |     "strict": true,
 5 |   },
 6 |   "include": [
 7 |     "**/*.ts",
 8 |     "**/*.tsx",
 9 |     ".expo/types/**/*.ts",
10 |     "expo-env.d.ts"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------