From 321de777cb848c85a85ac6107ddc26bef1845566 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom.dev@gmail.com>
Date: Sun, 22 May 2022 15:12:27 +0100
Subject: [PATCH] chore: fixed dynamic snap point example text color

---
 example/src/screens/advanced/DynamicSnapPointExample.tsx | 8 +++++++-
 example/src/screens/modal/DynamicSnapPointExample.tsx    | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/example/src/screens/advanced/DynamicSnapPointExample.tsx b/example/src/screens/advanced/DynamicSnapPointExample.tsx
index 21d481e0d..0703e9b9b 100644
--- 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
index 13967dbd7..9c1de11c8 100644
--- 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}>