diff --git a/.eslintrc b/.eslintrc
index a173795..1ee45ad 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -11,7 +11,6 @@
     "react-native/no-unused-styles": 2,
     "react-native/split-platform-components": 2,
     "react-native/no-inline-styles": 2,
-    "react-native/no-color-literals": 2,
     "react/prop-types": 0
   },
   "env": {
diff --git a/example/App.tsx b/example/App.tsx
index 4819e99..e366238 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import { ImageHeaderScrollView, TriggeringView } from 'react-native-image-header-scroll-view';
 
@@ -10,14 +10,14 @@ export default function App() {
       minHeight={100}
       headerImage={require('./assets/NZ.jpg')}
       renderForeground={() => (
-        <View style={{ height: 150, justifyContent: 'center', alignItems: 'center' }}>
+        <View style={styles.foregroundContainer}>
           <TouchableOpacity onPress={() => console.log('tap!!')}>
-            <Text style={{ backgroundColor: 'transparent' }}>Tap Me!</Text>
+            <Text style={styles.header}>Tap Me!</Text>
           </TouchableOpacity>
         </View>
       )}
     >
-      <View style={{ height: 1000 }}>
+      <View style={styles.content}>
         <TriggeringView onHide={() => console.log('text hidden')}>
           <Text>Scroll Me!</Text>
         </TriggeringView>
@@ -25,3 +25,13 @@ export default function App() {
     </ImageHeaderScrollView>
   );
 }
+
+const styles = StyleSheet.create({
+  foregroundContainer: {
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: { backgroundColor: 'transparent' },
+  content: { height: 1000 },
+});