Fix Alert and SafeAreaView examples in dark mode (#48752)

Summary:
Fix Alert and SafeAreaView examples in dark mode. Converting also SafeAreaView examples into functional components

## Changelog:

[INTERNAL] - Fix Alert and SafeAreaView examples in dark mode

Pull Request resolved: #48752

Test Plan:
<details>
<summary>Screenshots</summary>

| After | Before |
|--------|-------|
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-16 at 18 10 12](https://github.com/user-attachments/assets/9cbe4403-47bd-452a-9b36-a75a24f792e4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-16 at 18 09 47](https://github.com/user-attachments/assets/47706394-f394-4a3e-936c-da2f0716a274) |
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-16 at 18 07 31](https://github.com/user-attachments/assets/5835e4f9-7f5e-4a9d-963d-501a1a577da7) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2025-01-16 at 15 20 26](https://github.com/user-attachments/assets/d9ff678f-dce3-4684-9a15-bf11c2bab4bd) |

</details>

Reviewed By: cortinico

Differential Revision: D68322518

Pulled By: rshest

fbshipit-source-id: 9f153862efff7ef1e834bac9843f4042dbefbd1b

packages/rn-tester/js/examples/Alert/AlertExample.js

@@ -11,7 +11,6 @@
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
 import RNTesterText from '../../components/RNTesterText';
-import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {Alert, Pressable, StyleSheet, Text, View} from 'react-native';
 
@@ -243,16 +242,13 @@ const PromptOptions = () => {
       style: 'cancel',
     },
   ];
-  const theme = React.useContext(RNTesterThemeContext);
 
   return (
     <View>
-      <Text style={styles.promptValue}>
-        <Text style={[{color: theme.SecondaryLabelColor}, styles.bold]}>
-          Prompt value:
-        </Text>
+      <RNTesterText style={styles.promptValue}>
+        <Text style={styles.bold}>Prompt value:</Text>
         {JSON.stringify(promptValue, null, 2)}
-      </Text>
+      </RNTesterText>
 
       <Pressable
         style={styles.wrapper}

packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js

@@ -10,75 +10,58 @@
 
 'use strict';
 
-const React = require('react');
-const {
+import RNTesterText from '../../components/RNTesterText';
+import React from 'react';
+import {
   Button,
   DeviceInfo,
   Modal,
   SafeAreaView,
   StyleSheet,
-  Text,
   View,
-} = require('react-native');
+} from 'react-native';
 
-class SafeAreaViewExample extends React.Component<
-  {...},
-  {
-    modalVisible: boolean,
-  },
-> {
-  state: {modalVisible: boolean} = {
-    modalVisible: false,
-  };
+function SafeAreaViewExample(): React.Node {
+  const [modalVisible, setModalVisible] = React.useState<boolean>(false);
 
-  _setModalVisible = (visible: boolean) => {
-    this.setState({modalVisible: visible});
+  const toggleModal = (visible: boolean) => {
+    setModalVisible(visible);
   };
 
-  render(): React.Node {
-    return (
-      <View>
-        <Modal
-          visible={this.state.modalVisible}
-          onRequestClose={() => this._setModalVisible(false)}
-          animationType="slide"
-          supportedOrientations={['portrait', 'landscape']}>
-          <View style={styles.modal}>
-            <SafeAreaView style={styles.safeArea}>
-              <View style={styles.safeAreaContent}>
-                <Button
-                  onPress={this._setModalVisible.bind(this, false)}
-                  title="Close"
-                />
-              </View>
-            </SafeAreaView>
-          </View>
-        </Modal>
-        <Button
-          onPress={this._setModalVisible.bind(this, true)}
-          title="Present Modal Screen with SafeAreaView"
-        />
-      </View>
-    );
-  }
+  return (
+    <View>
+      <Modal
+        visible={modalVisible}
+        onRequestClose={() => toggleModal(false)}
+        animationType="slide"
+        supportedOrientations={['portrait', 'landscape']}>
+        <View style={styles.modal}>
+          <SafeAreaView style={styles.safeArea}>
+            <View style={styles.safeAreaContent}>
+              <Button onPress={() => toggleModal(false)} title="Close" />
+            </View>
+          </SafeAreaView>
+        </View>
+      </Modal>
+      <Button
+        onPress={() => toggleModal(true)}
+        title="Present Modal Screen with SafeAreaView"
+      />
+    </View>
+  );
 }
 
-class IsIPhoneXExample extends React.Component<{...}> {
-  render(): React.Node {
-    return (
-      <View>
-        <Text>
-          Is this an iPhone X:{' '}
-          {
-            // $FlowFixMe[sketchy-null-bool]
-            DeviceInfo.getConstants().isIPhoneX_deprecated
-              ? 'Yeah!'
-              : 'Nope. (Or `isIPhoneX_deprecated` was already removed.)'
-          }
-        </Text>
-      </View>
-    );
-  }
+function IsIPhoneXExample(): React.Node {
+  return (
+    <View>
+      <RNTesterText>
+        Is this an iPhone X:{' '}
+        {DeviceInfo.getConstants()?.isIPhoneX_deprecated === true
+          ? 'Yeah!'
+          : 'Nope. (Or `isIPhoneX_deprecated` was already removed.)'}
+      </RNTesterText>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({