chore(example): Add support for dark mode (Fabric only) (#534)

FabricExample/js/ExampleContainer.tsx

@@ -7,6 +7,7 @@ import {
   Button,
   Modal,
   TouchableWithoutFeedback,
+  Appearance,
 } from 'react-native';
 // @ts-ignore: CameraRollExample has no typings in same folder
 import CameraRollExample from './CameraRollExample';
@@ -98,13 +99,14 @@ export default class ExamplesContainer extends Component<Props, State> {
 const styles = StyleSheet.create({
   modalScrim: {
     flex: 1,
-    backgroundColor: '#00000080',
+    backgroundColor:
+      Appearance.getColorScheme() === 'light' ? '#00000080' : '#ffffff80',
   },
   flex1: {
     flex: 1,
   },
   modalInner: {
     margin: 20,
-    backgroundColor: '#fff',
+    backgroundColor: Appearance.getColorScheme() === 'light' ? '#fff' : '#000',
   },
 });

FabricExample/js/GetAlbumsExample.tsx

@@ -6,6 +6,7 @@ import {
   Text,
   TextInput,
   Keyboard,
+  Appearance,
 } from 'react-native';
 import {CameraRoll} from '@react-native-camera-roll/camera-roll';
 import type {
@@ -14,6 +15,7 @@ import type {
 } from '@react-native-camera-roll/camera-roll';
 
 interface State {
+  colorScheme: 'light' | 'dark';
   fetchingAlbums: boolean;
   timeTakenMillis: number | null;
   output: Album[] | null;
@@ -28,6 +30,7 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
   State
 > {
   state: State = {
+    colorScheme: Appearance.getColorScheme() === 'light' ? 'light' : 'dark',
     fetchingAlbums: false,
     timeTakenMillis: null,
     output: null,
@@ -47,27 +50,44 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
     });
   };
 
+  componentDidMount(): void {
+    Appearance.addChangeListener(({colorScheme}) => {
+      this.setState({colorScheme: colorScheme === 'light' ? 'light' : 'dark'});
+    });
+  }
+
+  get styles() {
+    return {
+      container: {
+        backgroundColor: this.state.colorScheme === 'light' ? '#fff' : '#000',
+      },
+      text: {
+        color: this.state.colorScheme === 'light' ? '#000' : '#fff',
+      },
+    };
+  }
+
   render() {
     const {fetchingAlbums, timeTakenMillis, output} = this.state;
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, this.styles.container]}>
         <Button
           disabled={fetchingAlbums}
           title={'Run getAlbums'}
           onPress={this.startFetchingAlbums}
         />
         {timeTakenMillis !== null && (
-          <Text>Time taken: {timeTakenMillis} ms</Text>
+          <Text style={this.styles.text}>Time taken: {timeTakenMillis} ms</Text>
         )}
         <View>
-          <Text>Output</Text>
+          <Text style={this.styles.text}>Output</Text>
         </View>
         <TextInput
           value={JSON.stringify(output, null, 2)}
           multiline
           editable={false}
-          style={styles.outputBox}
+          style={[styles.outputBox, this.styles.text]}
         />
       </View>
     );

FabricExample/js/GetPhotosPerformanceExample.tsx

@@ -1,6 +1,7 @@
-import { CameraRoll } from '@react-native-camera-roll/camera-roll';
+import {CameraRoll} from '@react-native-camera-roll/camera-roll';
 import * as React from 'react';
 import {
+  Appearance,
   Button,
   Keyboard,
   StyleSheet,
@@ -16,6 +17,7 @@ import type {
 } from '@react-native-camera-roll/camera-roll';
 
 interface State {
+  colorScheme: 'light' | 'dark';
   fetchingPhotos: boolean;
   timeTakenMillis: number | null;
   output: PhotoIdentifiersPage | null;
@@ -45,6 +47,7 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
   State
 > {
   state: State = {
+    colorScheme: Appearance.getColorScheme() === 'light' ? 'light' : 'dark',
     fetchingPhotos: false,
     timeTakenMillis: null,
     output: null,
@@ -96,6 +99,23 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
     }
   };
 
+  componentDidMount(): void {
+    Appearance.addChangeListener(({colorScheme}) => {
+      this.setState({colorScheme: colorScheme === 'light' ? 'light' : 'dark'});
+    });
+  }
+
+  get styles() {
+    return {
+      container: {
+        backgroundColor: this.state.colorScheme === 'light' ? '#fff' : '#000',
+      },
+      text: {
+        color: this.state.colorScheme === 'light' ? '#000' : '#fff',
+      },
+    };
+  }
+
   render() {
     const {
       fetchingPhotos,
@@ -108,10 +128,12 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
     const first = this.first();
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, this.styles.container]}>
         {includeValues.map(includeValue => (
-          <View key={includeValue} style={styles.inputRow}>
-            <Text>{includeValue}</Text>
+          <View
+            key={includeValue + this.state.colorScheme}
+            style={styles.inputRow}>
+            <Text style={this.styles.text}>{includeValue}</Text>
             <Switch
               value={include.includes(includeValue)}
               onValueChange={(changedTo: boolean) =>
@@ -121,7 +143,7 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
           </View>
         ))}
         <View key="includeSharedAlbums" style={styles.inputRow}>
-          <Text>includeSharedAlbums</Text>
+          <Text style={this.styles.text}>includeSharedAlbums</Text>
           <Switch
             value={includeSharedAlbums}
             onValueChange={(changedTo: boolean) =>
@@ -130,7 +152,7 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
           />
         </View>
         <View style={styles.inputRow}>
-          <Text>
+          <Text style={this.styles.text}>
             first
             {first === null && (
               <Text style={styles.error}> (enter a positive number)</Text>
@@ -139,7 +161,11 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
           <TextInput
             value={firstStr}
             onChangeText={(text: string) => this.setState({firstStr: text})}
-            style={[styles.textInput, first === null && styles.textInputError]}
+            style={[
+              styles.textInput,
+              this.styles.text,
+              first === null && styles.textInputError,
+            ]}
           />
         </View>
         <Button
@@ -148,16 +174,18 @@ export default class GetPhotosPerformanceExample extends React.PureComponent<
           onPress={this.startFetchingPhotos}
         />
         {timeTakenMillis !== null && (
-          <Text>Time taken: {timeTakenMillis} ms</Text>
+          <Text style={this.styles.text}>Time taken: {timeTakenMillis} ms</Text>
         )}
         <View>
-          <Text>Output : {output?.edges?.length || '0'} elements</Text>
+          <Text style={this.styles.text}>
+            Output : {output?.edges?.length || '0'} elements
+          </Text>
         </View>
         <TextInput
           value={JSON.stringify(output, null, 2)}
           multiline
           editable={false}
-          style={styles.outputBox}
+          style={[styles.outputBox, this.styles.text]}
         />
       </View>
     );