From aec57a87402c4b13773ee518645fa83d97371b49 Mon Sep 17 00:00:00 2001
From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com>
Date: Tue, 4 May 2021 15:08:19 -0700
Subject: [PATCH 1/3] Fix a couple of places RNTester is using non-theme values

---
 .../js/assets/bottom-nav-center-box.png          | Bin 1340 -> 0 bytes
 .../js/components/RNTesterExampleFilter.js       |   2 +-
 .../rn-tester/js/components/RNTesterHeader.js    |   2 +-
 .../rn-tester/js/components/RNTesterNavbar.js    |   5 ++---
 4 files changed, 4 insertions(+), 5 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=aiY77hwEes65fI<x~7#K<o7#Ln9FfdrnU|<k0n6oR;1}MQ<;1OBOz`!jG!i)^F
z=14FwFh*vEM3hAM`dB6B=jtV<<R_)-Rpb@`RWmTyR9FF-xv3?I3Kh9IdBs*0wn|_X
zRzNmLSYJs2tfVB{Rw=?aK*2e`C{@8!&qU8a$&O1wLBXadCCw_x#SN+*$g@?-C@Cqh
z($_C9FV`zK*2^zS*Eh7ZwA42+(l;{F1**_3uFNY*tkBIXR)!b?Gsh*hIJqdZpd>Rt
zPXT0ZVp4u-iLH_n$Rap^xU(cP4PjGWG1OZ?59)(t^bPe4^x<X$wc3D0t^A8JQ-L;v
z%(pYN0joq2gW6-G53(G|F%X}EMS)(m<Fe6*2b&$2&mr|l1_owdPZ!6K3dXm09P^|d
zd0YamPyE%N?OVn-XRAWM48gmucKWG{JpaAoPiAYf|NrOjuU{XU8JPGv|5W{0$uH>e
zz@D*b2M33ZqQeCBf<Ih94l|t7Xya(tT4vMeDEXB0(b6v;>uPvTY4}h0yuO{2T~Oh~
z0)w?hK;3uFU+HY-5J(A_5w>&wfsai*Rf<LRRf_6r=@okvn&UcJVxIp#?sM)#h2y*a
z)14ewI0crR^LpyU#1bj7YwBwjj-d3VMT(3~Iy`qzl`^rc+#IxX0)wMiTi#PE#-=Ng
zD`Pww6u6zY7tLjGe6=P-PsL$E>%!=rehmtxVOrus3MUR-SR146Fu_WDDmSM<O5%&K
zb;1fBbElqaW#QOlP@;XE2<w23R{8J0wDtSTho??T%ISN2`X5qN5iM3XW6r~mO*(u0
z!|Xa39Qn8oYdi;fyK?4?7Ya-)mKr>Z=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/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js
index 2666580948b490..7e7bbfa839fdad 100644
--- a/packages/rn-tester/js/components/RNTesterExampleFilter.js
+++ b/packages/rn-tester/js/components/RNTesterExampleFilter.js
@@ -106,7 +106,7 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
       <RNTesterThemeContext.Consumer>
         {theme => {
           return (
-            <View style={[styles.searchRow, {backgroundColor: '#F3F8FF'}]}>
+            <View style={[styles.searchRow, {backgroundColor: theme.BackgroundColor}]}>
               <View style={styles.textInputStyle}>
                 <Image
                   source={require('../assets/search-icon.png')}
diff --git a/packages/rn-tester/js/components/RNTesterHeader.js b/packages/rn-tester/js/components/RNTesterHeader.js
index 73608150ea6b89..235b827490f966 100644
--- a/packages/rn-tester/js/components/RNTesterHeader.js
+++ b/packages/rn-tester/js/components/RNTesterHeader.js
@@ -75,7 +75,7 @@ const HeaderAndroid = ({
   const theme = React.useContext(RNTesterThemeContext);
   return (
     <SafeAreaView>
-      <View style={[styles.toolbar, {backgroundColor: '#F3F8FF'}]}>
+      <View style={[styles.toolbar, {backgroundColor: theme.BackgroundColor}]}>
         <View style={styles.toolbarCenter}>
           <Text style={[styles.title, {color: theme.LabelColor}]}>{title}</Text>
           {documentationURL && (
diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js
index 24d703c00e4028..2ffda47bc1e79c 100644
--- a/packages/rn-tester/js/components/RNTesterNavbar.js
+++ b/packages/rn-tester/js/components/RNTesterNavbar.js
@@ -15,9 +15,8 @@ import {RNTesterThemeContext} from './RNTesterTheme';
 
 const BookmarkTab = ({handleNavBarPress, isBookmarkActive, theme}) => (
   <View style={styles.centerBox}>
-    <Image
-      style={styles.centralBoxCutout}
-      source={require('./../assets/bottom-nav-center-box.png')}
+    <View
+      style={[styles.centralBoxCutout, {backgroundColor: theme.BackgroundColor}]}
     />
     <View style={styles.floatContainer}>
       <Pressable

From 1dfb29daa67949af47f871b6dd513409af3c5262 Mon Sep 17 00:00:00 2001
From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com>
Date: Tue, 4 May 2021 15:48:35 -0700
Subject: [PATCH 2/3] Fix example pages too

---
 packages/rn-tester/js/components/ExamplePage.js   | 5 +++--
 packages/rn-tester/js/components/RNTesterBlock.js | 8 +++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
index b9f620a43f103e..40cb05b6f67b84 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,10 @@ type Props = $ReadOnly<{|
 
 export default function ExamplePage(props: Props): React.Node {
   const description = props.description ?? '';
+  const theme = React.useContext(RNTesterThemeContext);
   return (
     <>
-      <View style={styles.titleView}>
+      <View style={[styles.titleView, {backgroundColor: theme.BackgroundColor}]}>
         <Text style={styles.title}>{props.title}</Text>
         <Text style={styles.description}>{description}</Text>
       </View>
@@ -35,7 +37,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 486aa90f1073b4..be75eda647396e 100644
--- a/packages/rn-tester/js/components/RNTesterBlock.js
+++ b/packages/rn-tester/js/components/RNTesterBlock.js
@@ -21,11 +21,11 @@ type Props = $ReadOnly<{|
 const RNTesterBlock = ({description, title, children}: Props): React.Node => {
   const theme = React.useContext(RNTesterThemeContext);
   return (
-    <View style={[[styles.container], {borderColor: theme.SeparatorColor}]}>
+    <View style={[[styles.container], {borderColor: theme.SeparatorColor, backgroundColor: theme.SystemBackgroundColor}]}>
       <View style={[styles.titleContainer]}>
-        <Text style={[styles.titleText]}>{title}</Text>
+        <Text style={[styles.titleText, {color: theme.LabelColor}]}>{title}</Text>
         <Text
-          style={[styles.descriptionText, {marginTop: description ? 10 : 0}]}>
+          style={[styles.descriptionText, {color: theme.LabelColor, marginTop: description ? 10 : 0}]}>
           {description}
         </Text>
       </View>
@@ -40,7 +40,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     marginTop: 30,
     marginHorizontal: 20,
-    backgroundColor: 'white',
   },
   titleText: {
     fontSize: 18,
@@ -53,7 +52,6 @@ const styles = StyleSheet.create({
   descriptionText: {
     fontSize: 12,
     opacity: 0.5,
-    color: 'black',
   },
   children: {
     paddingTop: 10,

From 506840e9fa950c556c3f11a71916b8eef904b2ce Mon Sep 17 00:00:00 2001
From: Andrew <30809111+acoates-ms@users.noreply.github.com>
Date: Wed, 5 May 2021 17:07:06 -0700
Subject: [PATCH 3/3] lint fix

---
 .../rn-tester/js/components/ExamplePage.js     |  3 ++-
 .../rn-tester/js/components/RNTesterBlock.js   | 18 +++++++++++++++---
 .../js/components/RNTesterExampleFilter.js     |  6 +++++-
 .../rn-tester/js/components/RNTesterNavbar.js  |  5 ++++-
 .../examples/ScrollView/ScrollViewExample.js   | 12 ++++++++----
 5 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
index 40cb05b6f67b84..a655549b07d7ca 100644
--- a/packages/rn-tester/js/components/ExamplePage.js
+++ b/packages/rn-tester/js/components/ExamplePage.js
@@ -26,7 +26,8 @@ export default function ExamplePage(props: Props): React.Node {
   const theme = React.useContext(RNTesterThemeContext);
   return (
     <>
-      <View style={[styles.titleView, {backgroundColor: theme.BackgroundColor}]}>
+      <View
+        style={[styles.titleView, {backgroundColor: theme.BackgroundColor}]}>
         <Text style={styles.title}>{props.title}</Text>
         <Text style={styles.description}>{description}</Text>
       </View>
diff --git a/packages/rn-tester/js/components/RNTesterBlock.js b/packages/rn-tester/js/components/RNTesterBlock.js
index be75eda647396e..7e38690df33198 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 (
-    <View style={[[styles.container], {borderColor: theme.SeparatorColor, backgroundColor: theme.SystemBackgroundColor}]}>
+    <View
+      style={[
+        [styles.container],
+        {
+          borderColor: theme.SeparatorColor,
+          backgroundColor: theme.SystemBackgroundColor,
+        },
+      ]}>
       <View style={[styles.titleContainer]}>
-        <Text style={[styles.titleText, {color: theme.LabelColor}]}>{title}</Text>
+        <Text style={[styles.titleText, {color: theme.LabelColor}]}>
+          {title}
+        </Text>
         <Text
-          style={[styles.descriptionText, {color: theme.LabelColor, marginTop: description ? 10 : 0}]}>
+          style={[
+            styles.descriptionText,
+            {color: theme.LabelColor, marginTop: description ? 10 : 0},
+          ]}>
           {description}
         </Text>
       </View>
diff --git a/packages/rn-tester/js/components/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js
index 7e7bbfa839fdad..a8d9f1b1c9d551 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<Props, State> {
       <RNTesterThemeContext.Consumer>
         {theme => {
           return (
-            <View style={[styles.searchRow, {backgroundColor: theme.BackgroundColor}]}>
+            <View
+              style={[
+                styles.searchRow,
+                {backgroundColor: theme.BackgroundColor},
+              ]}>
               <View style={styles.textInputStyle}>
                 <Image
                   source={require('../assets/search-icon.png')}
diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js
index 2ffda47bc1e79c..6fe8d2185d5c79 100644
--- a/packages/rn-tester/js/components/RNTesterNavbar.js
+++ b/packages/rn-tester/js/components/RNTesterNavbar.js
@@ -16,7 +16,10 @@ import {RNTesterThemeContext} from './RNTesterTheme';
 const BookmarkTab = ({handleNavBarPress, isBookmarkActive, theme}) => (
   <View style={styles.centerBox}>
     <View
-      style={[styles.centralBoxCutout, {backgroundColor: theme.BackgroundColor}]}
+      style={[
+        styles.centralBoxCutout,
+        {backgroundColor: theme.BackgroundColor},
+      ]}
     />
     <View style={styles.floatContainer}>
       <Pressable
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 348ae82ea01529..e031dbc0fca954 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -567,8 +567,9 @@ const SnapToOptions = () => {
           <Picker
             selectedValue={snapToAlignment}
             onValueChange={value => {
-              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 = () => {
           <Picker
             selectedValue={overScrollMode}
             onValueChange={value => {
-              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 = () => {
       <Picker
         selectedValue={keyboardShouldPersistTaps}
         onValueChange={value => {
-          if (value === 'never' || value === 'always' || value === 'handled')
+          if (value === 'never' || value === 'always' || value === 'handled') {
             setKeyboardShouldPersistTaps(value);
+          }
         }}
         itemStyle={styles.pickerItem}>
         {persistOptions.map(label => {