Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: handle theme change based on preferences #2016

Merged
merged 3 commits into from
Jun 29, 2020
Merged

feat: handle theme change based on preferences #2016

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58ab6a0
feat: handle theme change based on preferences
Jun 26, 2020
aeac0e4
fix: do not mutate theme and get rid of Object.assign
Trancever Jun 29, 2020
a66f8e7
fix: do not mutate theme in Provider (#2024)
matkoson Jun 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/src/ExampleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -69,6 +70,7 @@ export const examples: Record<
textInput: TextInputExample,
toggleButton: ToggleButtonExample,
touchableRipple: TouchableRippleExample,
theme: ThemeExample,
};

type Props = {
Expand Down
43 changes: 43 additions & 0 deletions example/src/Examples/ThemeExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ class Card extends React.Component<Props, State> {
);
return (
<Surface
// @ts-ignore
style={[{ borderRadius: roundness, elevation }, style]}
{...rest}
>
Expand Down
20 changes: 4 additions & 16 deletions src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down Expand Up @@ -87,9 +86,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
]
}
>
<View
style={null}
>
<View>
<Text
accessibilityElementsHidden={true}
allowFontScaling={false}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -207,9 +203,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
]
}
>
<View
style={null}
>
<View>
<Text
accessibilityElementsHidden={true}
allowFontScaling={false}
Expand Down Expand Up @@ -288,7 +282,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"top": 6,
}
}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -319,9 +312,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
]
}
>
<View
style={null}
>
<View>
<View
style={
Array [
Expand Down Expand Up @@ -471,7 +462,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"top": 6,
}
}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -502,9 +492,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
]
}
>
<View
style={null}
>
<View>
<View
style={
Array [
Expand Down
12 changes: 6 additions & 6 deletions src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`renders checked Checkbox with color 1`] = `
<View
accessibilityLiveRegion="polite"
accessibilityRole="button"
accessibilityState={
Object {
Expand All @@ -10,7 +11,6 @@ exports[`renders checked Checkbox with color 1`] = `
}
accessible={true}
focusable={false}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -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 {
Expand All @@ -85,7 +86,6 @@ exports[`renders checked Checkbox with onPress 1`] = `
}
accessible={true}
focusable={true}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -152,6 +152,7 @@ exports[`renders checked Checkbox with onPress 1`] = `

exports[`renders indeterminate Checkbox 1`] = `
<View
accessibilityLiveRegion="polite"
accessibilityRole="button"
accessibilityState={
Object {
Expand All @@ -160,7 +161,6 @@ exports[`renders indeterminate Checkbox 1`] = `
}
accessible={true}
focusable={true}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -227,6 +227,7 @@ exports[`renders indeterminate Checkbox 1`] = `

exports[`renders indeterminate Checkbox with color 1`] = `
<View
accessibilityLiveRegion="polite"
accessibilityRole="button"
accessibilityState={
Object {
Expand All @@ -235,7 +236,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
}
accessible={true}
focusable={false}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -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 {
Expand All @@ -310,7 +311,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
}
accessible={true}
focusable={false}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -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 {
Expand All @@ -385,7 +386,6 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
}
accessible={true}
focusable={true}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down
6 changes: 3 additions & 3 deletions src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`RadioButton on default platform renders properly 1`] = `
<View
accessibilityLiveRegion="polite"
accessibilityRole="button"
accessibilityState={
Object {
Expand All @@ -10,7 +11,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
}
accessible={true}
focusable={true}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -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 {
Expand All @@ -85,7 +86,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
}
accessible={true}
focusable={true}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down Expand Up @@ -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 {
Expand All @@ -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]}
Expand Down
2 changes: 1 addition & 1 deletion src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`RadioButtonGroup renders properly 1`] = `
<View
accessibilityLiveRegion="polite"
accessibilityRole="button"
accessibilityState={
Object {
Expand All @@ -10,7 +11,6 @@ exports[`RadioButtonGroup renders properly 1`] = `
}
accessible={true}
focusable={true}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
Expand Down
3 changes: 0 additions & 3 deletions src/components/__tests__/__snapshots__/Banner.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down
Loading