From 47b0be5f55834d27e278bccacf416cddc3ffda66 Mon Sep 17 00:00:00 2001 From: Andrew <30809111+acoates-ms@users.noreply.github.com> Date: Thu, 3 Jun 2021 07:45:15 -0700 Subject: [PATCH] Fix a couple of places RNTester is using non-theme values (#31479) Summary: A few places in RNTester where using hard coded color values, which meant the UI looks broken in dark themes. The area behind the bookmark button was using a solid color png file, which I've replaced with a color from the theme object. ## Changelog [Internal] [Fixed] - Fix a couple of places RNTester is using non-theme values Pull Request resolved: https://github.com/facebook/react-native/pull/31479 Test Plan: Verified in RNTester in react-native-windows in light+dark theme. Reviewed By: TheSavior Differential Revision: D28290192 Pulled By: rozele fbshipit-source-id: 78192200ac2dc8629759c10f8e8b3ec2f6699acd --- .../js/assets/bottom-nav-center-box.png | Bin 1340 -> 0 bytes .../rn-tester/js/components/ExamplePage.js | 6 ++++-- .../rn-tester/js/components/RNTesterBlock.js | 20 +++++++++++++----- .../js/components/RNTesterExampleFilter.js | 6 +++++- .../rn-tester/js/components/RNTesterHeader.js | 2 +- .../rn-tester/js/components/RNTesterNavbar.js | 8 ++++--- .../examples/ScrollView/ScrollViewExample.js | 12 +++++++---- 7 files changed, 38 insertions(+), 16 deletions(-) delete mode 100644 packages/rn-tester/js/assets/bottom-nav-center-box.png diff --git a/packages/rn-tester/js/assets/bottom-nav-center-box.png b/packages/rn-tester/js/assets/bottom-nav-center-box.png deleted file mode 100644 index 31b0427bb776abcb4f82fc47f2fc1a64dc60280f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1340 zcmeAS@N?(olHy`uVBq!ia0vp^CxAGGgAGU?ZmZ`8QY`6?zK#qG8~eHcB(ehe3dtTp zz6=aiY77hwEes65fIRt zPXT0ZVp4u-iLH_n$Rap^xU(cP4PjGWG1OZ?59)(t^bPe4^xe zz@D*b2M33ZqQeCBfuPvTY4}h0yuO{2T~Oh~ z0)w?hK;3uFU+HY-5J(A_5w>&wfsai*Rf%!=rehmtxVOrus3MUR-SR146Fu_WDDmSMZ=eR5QPk0ip^!(}nd7W&jQ`9{^X;1tfbNsWP z?3BQH3eRKNg?ZH+CLDYi^%m%vnDiGd2U$3bEMiv20$u!?XRg5v21mB`?5)61D4M%a zm`zyW#DjvhWk9d4GcGxlz_gfE@=I^K{Qjos$Ud=@3+8flF%#D6xO0Dcy!{lzM-~nt z`Gu_aJR20=FM0i@f{Ep4--q9vC69w&T-zIe;oEoat;OEk?Hcp${%)Q9M*jr&hAHoq z9VXPyy#0ffiKUWp+ND~cwdv31^8cE<_g#uenV91{o;9BrZr^-;ZqK1}N*)mj$KI+s kOo+R;t5r~8Wbi)lUs)@(^(wCn6R3>xboFyt=akR{0C)oefB*mh diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js index b9f620a43f1..a655549b07d 100644 --- a/packages/rn-tester/js/components/ExamplePage.js +++ b/packages/rn-tester/js/components/ExamplePage.js @@ -10,6 +10,7 @@ import * as React from 'react'; import {StyleSheet, View, Text} from 'react-native'; +import {RNTesterThemeContext} from './RNTesterTheme'; type Props = $ReadOnly<{| children?: React.Node, @@ -22,9 +23,11 @@ type Props = $ReadOnly<{| export default function ExamplePage(props: Props): React.Node { const description = props.description ?? ''; + const theme = React.useContext(RNTesterThemeContext); return ( <> - + {props.title} {description} @@ -35,7 +38,6 @@ export default function ExamplePage(props: Props): React.Node { const styles = StyleSheet.create({ titleView: { - backgroundColor: '#F3F8FF', paddingHorizontal: 25, paddingTop: 4, paddingBottom: 8, diff --git a/packages/rn-tester/js/components/RNTesterBlock.js b/packages/rn-tester/js/components/RNTesterBlock.js index 80c0ceca1ea..2c83209ac86 100644 --- a/packages/rn-tester/js/components/RNTesterBlock.js +++ b/packages/rn-tester/js/components/RNTesterBlock.js @@ -21,11 +21,23 @@ type Props = $ReadOnly<{| const RNTesterBlock = ({description, title, children}: Props): React.Node => { const theme = React.useContext(RNTesterThemeContext); return ( - + - {title} + + {title} + + style={[ + styles.descriptionText, + {color: theme.LabelColor, marginTop: description ? 10 : 0}, + ]}> {description} @@ -40,7 +52,6 @@ const styles = StyleSheet.create({ borderWidth: 1, marginTop: 30, marginHorizontal: 20, - backgroundColor: 'white', }, titleText: { fontSize: 18, @@ -53,7 +64,6 @@ const styles = StyleSheet.create({ descriptionText: { fontSize: 12, opacity: 0.5, - color: 'black', }, children: { marginHorizontal: 20, diff --git a/packages/rn-tester/js/components/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js index 2666580948b..a8d9f1b1c9d 100644 --- a/packages/rn-tester/js/components/RNTesterExampleFilter.js +++ b/packages/rn-tester/js/components/RNTesterExampleFilter.js @@ -106,7 +106,11 @@ class RNTesterExampleFilter extends React.Component { {theme => { return ( - + - + {title} {documentationURL && ( diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js index 24d703c00e4..6fe8d2185d5 100644 --- a/packages/rn-tester/js/components/RNTesterNavbar.js +++ b/packages/rn-tester/js/components/RNTesterNavbar.js @@ -15,9 +15,11 @@ import {RNTesterThemeContext} from './RNTesterTheme'; const BookmarkTab = ({handleNavBarPress, isBookmarkActive, theme}) => ( - { { - if (value === 'start' || value === 'center' || value === 'end') + if (value === 'start' || value === 'center' || value === 'end') { setSnapToAlignment(value); + } }} itemStyle={styles.pickerItem}> {snapToAlignmentModes.map(label => { @@ -754,8 +755,9 @@ const OnScrollOptions = () => { { - if (value === 'always' || value === 'auto' || value === 'never') + if (value === 'always' || value === 'auto' || value === 'never') { setOverScrollMode(value); + } }} itemStyle={styles.pickerItem}> {overScrollModeOptions.map(label => { @@ -892,8 +894,9 @@ const KeyboardExample = () => { value === 'none' || value === 'on-drag' || value === 'interactive' - ) + ) { setKeyboardDismissMode(value); + } }} itemStyle={styles.pickerItem}> {dismissOptions.map(label => { @@ -904,8 +907,9 @@ const KeyboardExample = () => { { - if (value === 'never' || value === 'always' || value === 'handled') + if (value === 'never' || value === 'always' || value === 'handled') { setKeyboardShouldPersistTaps(value); + } }} itemStyle={styles.pickerItem}> {persistOptions.map(label => {