diff --git a/example/app/src/components/contactList/styles.ts b/example/app/src/components/contactList/styles.ts
index 6af9ca873..c0cb7a5cf 100644
--- a/example/app/src/components/contactList/styles.ts
+++ b/example/app/src/components/contactList/styles.ts
@@ -9,6 +9,7 @@ export const styles = StyleSheet.create({
   sectionHeaderTitle: {
     fontSize: 16,
     textTransform: 'uppercase',
+    color: 'black',
   },
   container: {
     overflow: 'visible',
diff --git a/example/app/src/screens/advanced/DynamicSnapPointExample.tsx b/example/app/src/screens/advanced/DynamicSnapPointExample.tsx
index 8edba01b3..fb9340225 100644
--- a/example/app/src/screens/advanced/DynamicSnapPointExample.tsx
+++ b/example/app/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -4,7 +4,6 @@ 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';
 
@@ -22,7 +21,6 @@ const DynamicSnapPointExample = () => {
     animatedContentHeight,
     handleContentLayout,
   } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
-  const { dark } = useShowcaseTheme();
 
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {
@@ -53,10 +51,6 @@ const DynamicSnapPointExample = () => {
     }),
     [count]
   );
-  const messageStyle = useMemo(
-    () => [styles.message, { color: dark ? 'white' : 'black' }],
-    [dark]
-  );
 
   // renders
   return (
@@ -75,7 +69,7 @@ const DynamicSnapPointExample = () => {
           style={contentContainerStyle}
           onLayout={handleContentLayout}
         >
-          <Text style={messageStyle}>
+          <Text style={styles.message}>
             Could this sheet resize to its content height ?
           </Text>
           <View style={emojiContainerStyle}>
@@ -103,6 +97,7 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontWeight: '600',
     marginBottom: 12,
+    color: 'black',
   },
   emoji: {
     fontSize: 156,
diff --git a/example/app/src/screens/modal/DynamicSnapPointExample.tsx b/example/app/src/screens/modal/DynamicSnapPointExample.tsx
index c5f3ada6a..a2cdf5d3f 100644
--- a/example/app/src/screens/modal/DynamicSnapPointExample.tsx
+++ b/example/app/src/screens/modal/DynamicSnapPointExample.tsx
@@ -5,7 +5,6 @@ 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';
@@ -24,7 +23,6 @@ const DynamicSnapPointExample = () => {
     animatedContentHeight,
     handleContentLayout,
   } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
-  const { dark } = useShowcaseTheme();
 
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {
@@ -56,10 +54,6 @@ const DynamicSnapPointExample = () => {
     }),
     [count]
   );
-  const messageStyle = useMemo(
-    () => [styles.message, { color: dark ? 'white' : 'black' }],
-    [dark]
-  );
 
   // renders
   return (
@@ -77,7 +71,7 @@ const DynamicSnapPointExample = () => {
           style={contentContainerStyle}
           onLayout={handleContentLayout}
         >
-          <Text style={messageStyle}>
+          <Text style={styles.message}>
             Could this sheet modal resize to its content height ?
           </Text>
           <View style={emojiContainerStyle}>
@@ -105,6 +99,7 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontWeight: '600',
     marginBottom: 12,
+    color: 'black',
   },
   emoji: {
     fontSize: 156,