feat: handle theme change based on device preferences (#2016)

callstack · Jun 29, 2020 · 7d4e006 · 7d4e006
1 parent 78a33b7
commit 7d4e006
Show file tree

Hide file tree

Showing 28 changed files with 2,053 additions and 5,139 deletions.
diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
@@ -34,6 +34,7 @@ import TextExample from './Examples/TextExample';
 import TextInputExample from './Examples/TextInputExample';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
+import ThemeExample from './Examples/ThemeExample';
 
 export const examples: Record<
   string,
@@ -69,6 +70,7 @@ export const examples: Record<
   textInput: TextInputExample,
   toggleButton: ToggleButtonExample,
   touchableRipple: TouchableRippleExample,
+  theme: ThemeExample,
 };
 
 type Props = {

diff --git a/example/src/Examples/ThemeExample.tsx b/example/src/Examples/ThemeExample.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme, Paragraph } from 'react-native-paper';
+import { Provider as PaperProvider } from 'react-native-paper';
+
+const Content = () => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <Paragraph style={styles.paragraph}>
+        React Native Paper automatically adapts theme based on system
+        preferences
+      </Paragraph>
+      <Paragraph style={styles.paragraph}>
+        Please change system theme to dark/light to see the effect
+      </Paragraph>
+    </View>
+  );
+};
+
+const ThemeExample = () => {
+  return (
+    <PaperProvider>
+      <Content />
+    </PaperProvider>
+  );
+};
+ThemeExample.title = 'Theme';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  paragraph: {
+    textAlign: 'center',
+    marginHorizontal: 16,
+    marginVertical: 16,
+  },
+});
+export default ThemeExample;
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "prettier": "^2.0.5",
     "react": "16.11.0",
     "react-dom": "16.11.0",
-    "react-native": "^0.61.4",
+    "react-native": "^0.62.0",
     "react-native-testing-library": "^1.5.0",
     "react-native-vector-icons": "~6.3.0",
     "react-test-renderer": "16.11.0",

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -146,6 +146,7 @@ class Card extends React.Component<Props, State> {
     );
     return (
       <Surface
+        // @ts-ignore
         style={[{ borderRadius: roundness, elevation }, style]}
         {...rest}
       >

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -56,7 +56,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           "top": 6,
         }
       }
-      isTVSelectable={true}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -87,9 +86,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         ]
       }
     >
-      <View
-        style={null}
-      >
+      <View>
         <Text
           accessibilityElementsHidden={true}
           allowFontScaling={false}
@@ -174,7 +171,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           "top": 6,
         }
       }
-      isTVSelectable={true}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -207,9 +203,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         ]
       }
     >
-      <View
-        style={null}
-      >
+      <View>
         <Text
           accessibilityElementsHidden={true}
           allowFontScaling={false}
@@ -288,7 +282,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         "top": 6,
       }
     }
-    isTVSelectable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -319,9 +312,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       ]
     }
   >
-    <View
-      style={null}
-    >
+    <View>
       <View
         style={
           Array [
@@ -471,7 +462,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         "top": 6,
       }
     }
-    isTVSelectable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -502,9 +492,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       ]
     }
   >
-    <View
-      style={null}
-    >
+    <View>
       <View
         style={
           Array [

diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`renders checked Checkbox with color 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -10,7 +11,6 @@ exports[`renders checked Checkbox with color 1`] = `
   }
   accessible={true}
   focusable={false}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -77,6 +77,7 @@ exports[`renders checked Checkbox with color 1`] = `
 
 exports[`renders checked Checkbox with onPress 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -85,7 +86,6 @@ exports[`renders checked Checkbox with onPress 1`] = `
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -152,6 +152,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
 
 exports[`renders indeterminate Checkbox 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -160,7 +161,6 @@ exports[`renders indeterminate Checkbox 1`] = `
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -227,6 +227,7 @@ exports[`renders indeterminate Checkbox 1`] = `
 
 exports[`renders indeterminate Checkbox with color 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -235,7 +236,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
   }
   accessible={true}
   focusable={false}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -302,6 +302,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
 
 exports[`renders unchecked Checkbox with color 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -310,7 +311,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
   }
   accessible={true}
   focusable={false}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -377,6 +377,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
 
 exports[`renders unchecked Checkbox with onPress 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -385,7 +386,6 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`RadioButton on default platform renders properly 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -10,7 +11,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -77,6 +77,7 @@ exports[`RadioButton on default platform renders properly 1`] = `
 
 exports[`RadioButton on ios platform renders properly 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -85,7 +86,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -152,6 +152,7 @@ exports[`RadioButton on ios platform renders properly 1`] = `
 
 exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider renders properly 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -160,7 +161,6 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`RadioButtonGroup renders properly 1`] = `
 <View
+  accessibilityLiveRegion="polite"
   accessibilityRole="button"
   accessibilityState={
     Object {
@@ -10,7 +11,6 @@ exports[`RadioButtonGroup renders properly 1`] = `
   }
   accessible={true}
   focusable={true}
-  isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -199,7 +199,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
             }
             accessible={true}
             focusable={true}
-            isTVSelectable={true}
             onClick={[Function]}
             onResponderGrant={[Function]}
             onResponderMove={[Function]}
@@ -380,7 +379,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
             }
             accessible={true}
             focusable={true}
-            isTVSelectable={true}
             onClick={[Function]}
             onResponderGrant={[Function]}
             onResponderMove={[Function]}
@@ -476,7 +474,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
             }
             accessible={true}
             focusable={true}
-            isTVSelectable={true}
             onClick={[Function]}
             onResponderGrant={[Function]}
             onResponderMove={[Function]}