chore: fixed dynamic snap point example text color

gorhom · May 22, 2022 · 321de77 · 321de77
1 parent 29152fb
commit 321de77
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/example/src/screens/advanced/DynamicSnapPointExample.tsx b/example/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -4,6 +4,7 @@ import BottomSheet, {
   BottomSheetView,
   useBottomSheetDynamicSnapPoints,
 } from '@gorhom/bottom-sheet';
+import { useShowcaseTheme } from '@gorhom/showcase-template';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Button from '../../components/button';
 
@@ -21,6 +22,7 @@ const DynamicSnapPointExample = () => {
     animatedContentHeight,
     handleContentLayout,
   } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
+  const { dark } = useShowcaseTheme();
 
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {
@@ -51,6 +53,10 @@ const DynamicSnapPointExample = () => {
     }),
     [count]
   );
+  const messageStyle = useMemo(
+    () => [styles.message, { color: dark ? 'white' : 'black' }],
+    [dark]
+  );
 
   // renders
   return (
@@ -69,7 +75,7 @@ const DynamicSnapPointExample = () => {
           style={contentContainerStyle}
           onLayout={handleContentLayout}
         >
-          <Text style={styles.message}>
+          <Text style={messageStyle}>
             Could this sheet resize to its content height ?
           </Text>
           <View style={emojiContainerStyle}>

diff --git a/example/src/screens/modal/DynamicSnapPointExample.tsx b/example/src/screens/modal/DynamicSnapPointExample.tsx
@@ -5,6 +5,7 @@ import {
   BottomSheetView,
   useBottomSheetDynamicSnapPoints,
 } from '@gorhom/bottom-sheet';
+import { useShowcaseTheme } from '@gorhom/showcase-template';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Button from '../../components/button';
 import withModalProvider from '../withModalProvider';
@@ -23,6 +24,7 @@ const DynamicSnapPointExample = () => {
     animatedContentHeight,
     handleContentLayout,
   } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
+  const { dark } = useShowcaseTheme();
 
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {
@@ -54,6 +56,10 @@ const DynamicSnapPointExample = () => {
     }),
     [count]
   );
+  const messageStyle = useMemo(
+    () => [styles.message, { color: dark ? 'white' : 'black' }],
+    [dark]
+  );
 
   // renders
   return (
@@ -71,7 +77,7 @@ const DynamicSnapPointExample = () => {
           style={contentContainerStyle}
           onLayout={handleContentLayout}
         >
-          <Text style={styles.message}>
+          <Text style={messageStyle}>
             Could this sheet modal resize to its content height ?
           </Text>
           <View style={emojiContainerStyle}>