feat: add custom theme support (#211)

react-navigation · Dec 14, 2019 · 00fc616 · 00fc616
1 parent 703edb3
commit 00fc616
Show file tree

Hide file tree

Showing 40 changed files with 846 additions and 533 deletions.
diff --git a/example/package.json b/example/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
     "@react-native-community/masked-view": "0.1.5",
+    "color": "^3.1.2",
     "expo": "^36.0.0",
     "expo-asset": "~8.0.0",
     "query-string": "^6.9.0",

diff --git a/example/src/Screens/MaterialTopTabs.tsx b/example/src/Screens/MaterialTopTabs.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -15,13 +14,7 @@ const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
 export default function MaterialTopTabsScreen() {
   return (
-    <MaterialTopTabs.Navigator
-      tabBarOptions={{
-        style: styles.tabBar,
-        labelStyle: styles.tabLabel,
-        indicatorStyle: styles.tabIndicator,
-      }}
-    >
+    <MaterialTopTabs.Navigator>
       <MaterialTopTabs.Screen
         name="chat"
         component={Chat}
@@ -40,15 +33,3 @@ export default function MaterialTopTabsScreen() {
     </MaterialTopTabs.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBar: {
-    backgroundColor: 'white',
-  },
-  tabLabel: {
-    color: 'black',
-  },
-  tabIndicator: {
-    backgroundColor: 'tomato',
-  },
-});
diff --git a/example/src/Screens/NativeStack.tsx b/example/src/Screens/NativeStack.tsx
@@ -7,6 +7,7 @@ import {
   RouteProp,
   ParamListBase,
   useFocusEffect,
+  useTheme,
 } from '@react-navigation/native';
 import { DrawerNavigationProp } from '@react-navigation/drawer';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -23,90 +24,113 @@ type NativeStackParams = {
 
 type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
 
+const Title = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return <Text style={[styles.title, { color: colors.text }]}>{children}</Text>;
+};
+
+const Paragraph = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text style={[styles.paragraph, { color: colors.text }]}>{children}</Text>
+  );
+};
+
 const ArticleScreen = ({
   navigation,
 }: {
   navigation: NativeStackNavigation;
   route: RouteProp<NativeStackParams, 'article'>;
-}) => (
-  <ScrollView style={styles.container} contentContainerStyle={styles.content}>
-    <View style={styles.buttons}>
-      <Button
-        mode="contained"
-        onPress={() => navigation.push('album')}
-        style={styles.button}
-      >
-        Push album
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.goBack()}
-        style={styles.button}
-      >
-        Go back
-      </Button>
-    </View>
-    <Text style={styles.title}>What is Lorem Ipsum?</Text>
-    <Text style={styles.paragraph}>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      Lorem Ipsum has been the industry&apos;s standard dummy text ever since
-      the 1500s, when an unknown printer took a galley of type and scrambled it
-      to make a type specimen book. It has survived not only five centuries, but
-      also the leap into electronic typesetting, remaining essentially
-      unchanged. It was popularised in the 1960s with the release of Letraset
-      sheets containing Lorem Ipsum passages, and more recently with desktop
-      publishing software like Aldus PageMaker including versions of Lorem
-      Ipsum.
-    </Text>
-    <Text style={styles.title}>Where does it come from?</Text>
-    <Text style={styles.paragraph}>
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
-      roots in a piece of classical Latin literature from 45 BC, making it over
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-      College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
-      the word in classical literature, discovered the undoubtable source. Lorem
-      Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum
-      et Malorum&quot; (The Extremes of Good and Evil) by Cicero, written in 45
-      BC. This book is a treatise on the theory of ethics, very popular during
-      the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor
-      sit amet..&quot;, comes from a line in section 1.10.32.
-    </Text>
-    <Text style={styles.paragraph}>
-      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
-      for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus
-      Bonorum et Malorum&quot; by Cicero are also reproduced in their exact
-      original form, accompanied by English versions from the 1914 translation
-      by H. Rackham.
-    </Text>
-    <Text style={styles.title}>Why do we use it?</Text>
-    <Text style={styles.paragraph}>
-      It is a long established fact that a reader will be distracted by the
-      readable content of a page when looking at its layout. The point of using
-      Lorem Ipsum is that it has a more-or-less normal distribution of letters,
-      as opposed to using &quot;Content here, content here&quot;, making it look
-      like readable English. Many desktop publishing packages and web page
-      editors now use Lorem Ipsum as their default model text, and a search for
-      &quot;lorem ipsum&quot; will uncover many web sites still in their
-      infancy. Various versions have evolved over the years, sometimes by
-      accident, sometimes on purpose (injected humour and the like).
-    </Text>
-    <Text style={styles.title}>Where can I get some?</Text>
-    <Text style={styles.paragraph}>
-      There are many variations of passages of Lorem Ipsum available, but the
-      majority have suffered alteration in some form, by injected humour, or
-      randomised words which don&apos;t look even slightly believable. If you
-      are going to use a passage of Lorem Ipsum, you need to be sure there
-      isn&apos;t anything embarrassing hidden in the middle of text. All the
-      Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
-      necessary, making this the first true generator on the Internet. It uses a
-      dictionary of over 200 Latin words, combined with a handful of model
-      sentence structures, to generate Lorem Ipsum which looks reasonable. The
-      generated Lorem Ipsum is therefore always free from repetition, injected
-      humour, or non-characteristic words etc.
-    </Text>
-  </ScrollView>
-);
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView
+      style={{ backgroundColor: colors.card }}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Title>What is Lorem Ipsum?</Title>
+      <Paragraph>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </Paragraph>
+      <Title>Where does it come from?</Title>
+      <Paragraph>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
+        of ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Paragraph>
+      <Paragraph>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </Paragraph>
+      <Title>Why do we use it?</Title>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using &quot;Content here, content here&quot;,
+        making it look like readable English. Many desktop publishing packages
+        and web page editors now use Lorem Ipsum as their default model text,
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
+        still in their infancy. Various versions have evolved over the years,
+        sometimes by accident, sometimes on purpose (injected humour and the
+        like).
+      </Paragraph>
+      <Title>Where can I get some?</Title>
+      <Paragraph>
+        There are many variations of passages of Lorem Ipsum available, but the
+        majority have suffered alteration in some form, by injected humour, or
+        randomised words which don&apos;t look even slightly believable. If you
+        are going to use a passage of Lorem Ipsum, you need to be sure there
+        isn&apos;t anything embarrassing hidden in the middle of text. All the
+        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
+        as necessary, making this the first true generator on the Internet. It
+        uses a dictionary of over 200 Latin words, combined with a handful of
+        model sentence structures, to generate Lorem Ipsum which looks
+        reasonable. The generated Lorem Ipsum is therefore always free from
+        repetition, injected humour, or non-characteristic words etc.
+      </Paragraph>
+    </ScrollView>
+  );
+};
 
 const AlbumsScreen = ({
   navigation,
@@ -191,21 +215,16 @@ const styles = StyleSheet.create({
   button: {
     margin: 8,
   },
-  container: {
-    backgroundColor: 'white',
-  },
   content: {
     paddingVertical: 16,
   },
   title: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 24,
     marginVertical: 8,
     marginHorizontal: 16,
   },
   paragraph: {
-    color: '#000',
     fontSize: 16,
     lineHeight: 24,
     marginVertical: 8,

diff --git a/example/src/Shared/Albums.tsx b/example/src/Shared/Albums.tsx
@@ -38,7 +38,7 @@ export default function Albums() {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#343C46',
+    backgroundColor: '#000',
   },
   content: {
     flexDirection: 'row',

diff --git a/example/src/Shared/Article.tsx b/example/src/Shared/Article.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
 
 type Props = {
   date?: string;
@@ -19,10 +19,12 @@ export default function Article({
 
   useScrollToTop(ref);
 
+  const { colors } = useTheme();
+
   return (
     <ScrollView
       ref={ref}
-      style={styles.container}
+      style={{ backgroundColor: colors.card }}
       contentContainerStyle={styles.content}
     >
       <View style={styles.author}>
@@ -31,24 +33,26 @@ export default function Article({
           source={require('../../assets/avatar-1.png')}
         />
         <View style={styles.meta}>
-          <Text style={styles.name}>{author.name}</Text>
-          <Text style={styles.timestamp}>{date}</Text>
+          <Text style={[styles.name, { color: colors.text }]}>
+            {author.name}
+          </Text>
+          <Text style={[styles.timestamp, { color: colors.text }]}>{date}</Text>
         </View>
       </View>
-      <Text style={styles.title}>Lorem Ipsum</Text>
-      <Text style={styles.paragraph}>
+      <Text style={[styles.title, { color: colors.text }]}>Lorem Ipsum</Text>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Contrary to popular belief, Lorem Ipsum is not simply random text. It
         has roots in a piece of classical Latin literature from 45 BC, making it
         over 2000 years old.
       </Text>
       <Image style={styles.image} source={require('../../assets/book.jpg')} />
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Richard McClintock, a Latin professor at Hampden-Sydney College in
         Virginia, looked up one of the more obscure Latin words, consectetur,
         from a Lorem Ipsum passage, and going through the cites of the word in
         classical literature, discovered the undoubtable source.
       </Text>
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
         Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
         written in 45 BC. This book is a treatise on the theory of ethics, very
@@ -61,9 +65,6 @@ export default function Article({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-  },
   content: {
     paddingVertical: 16,
   },
@@ -77,13 +78,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   name: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 16,
     lineHeight: 24,
   },
   timestamp: {
-    color: '#999',
+    opacity: 0.5,
     fontSize: 14,
     lineHeight: 21,
   },
@@ -93,14 +93,12 @@ const styles = StyleSheet.create({
     borderRadius: 24,
   },
   title: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 36,
     marginVertical: 8,
     marginHorizontal: 16,
   },
   paragraph: {
-    color: '#000',
     fontSize: 16,
     lineHeight: 24,
     marginVertical: 8,