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

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 (
     <>
-      <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 +38,6 @@ export default function ExamplePage(props: Props): React.Node {
 
 const styles = StyleSheet.create({
   titleView: {
-    backgroundColor: '#F3F8FF',
     paddingHorizontal: 25,
     paddingTop: 4,
     paddingBottom: 8,

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}]}>
+    <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 +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,

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: '#F3F8FF'}]}>
+            <View
+              style={[
+                styles.searchRow,
+                {backgroundColor: theme.BackgroundColor},
+              ]}>
               <View style={styles.textInputStyle}>
                 <Image
                   source={require('../assets/search-icon.png')}

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 && (

packages/rn-tester/js/components/RNTesterNavbar.js

@@ -15,9 +15,11 @@ 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

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 => {