From 940d1518273542db7cc413407a5216af2a20426b Mon Sep 17 00:00:00 2001
From: imdevan <huapayadevan@gmail.com>
Date: Thu, 2 Oct 2025 20:57:43 -0700
Subject: [PATCH] Refactor to functional component

---
 examples/App.tsx | 148 +++++++++++++++++++++--------------------------
 1 file changed, 65 insertions(+), 83 deletions(-)

diff --git a/examples/App.tsx b/examples/App.tsx
index 434b61f37..b3098443b 100644
--- a/examples/App.tsx
+++ b/examples/App.tsx
@@ -1,5 +1,5 @@
-import React, { JSX } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { JSX, useState } from 'react';
+import { StyleSheet, Text, View, useColorScheme } from 'react-native';
 import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
 import JavascriptClassExample from './example-src-files/javascript-class-example';
 import JavascriptFunctionExample from './example-src-files/javascript-function-example';
@@ -19,15 +19,19 @@ enum ExampleComponent {
 }
 
 const styles = StyleSheet.create({
-  container: {
+  page: {
     flex: 1,
-    // backgroundColor: "#fff",
-    // alignItems: "center",
-    // justifyContent: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  container: {
     flexDirection: 'column',
-    margin: 3,
+    margin: 'auto',
     marginTop: 20,
     padding: 3,
+    maxWidth: 400,
   },
 });
 
@@ -66,98 +70,76 @@ const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
   },
 ];
 
-type Props = Record<string, never>;
-
-interface State {
-  currentExample: ExampleComponent;
-  examplePickerOpen: boolean;
-  exampleComponents: Array<ItemType<ExampleComponent>>;
-}
-
-export default class App extends React.Component<Props, State> {
-  constructor(props: Readonly<Props>) {
-    super(props);
-    this.state = {
-      currentExample: ExampleComponent.JavaScriptClassSingleValue,
-      exampleComponents: EXAMPLE_COMPONENT_ITEMS,
-      examplePickerOpen: false,
-    };
-
-    this.setOpen = this.setOpen.bind(this);
-    this.setCurrentExample = this.setCurrentExample.bind(this);
-  }
-
-  private static getExample(egComponent: ExampleComponent): JSX.Element {
-    switch (egComponent) {
-      case ExampleComponent.JavaScriptClassSingleValue:
-        return <JavascriptClassExample multiple={false} />;
-      case ExampleComponent.JavaScriptClassMultiValue:
-        return <JavascriptClassExample multiple />;
-      case ExampleComponent.JavaScriptFunctionSingleValue:
-        return <JavascriptFunctionExample multiple={false} />;
-      case ExampleComponent.JavaScriptFunctionMultiValue:
-        return <JavascriptFunctionExample multiple />;
-      case ExampleComponent.TypeScriptClassSingleValue:
-        return <TypescriptClassExample multiple={false} />;
-      case ExampleComponent.TypeScriptClassMultiValue:
-        return <TypescriptClassExample multiple />;
-      case ExampleComponent.TypeScriptFunctionSingleValue:
-        return <TypescriptFunctionExample multiple={false} />;
-      case ExampleComponent.TypeScriptFunctionMultiValue:
-        return <TypescriptFunctionExample multiple />;
-      default:
-        throw new Error(
-          "couldn't match example component in getExample() in App.tsx. egComponent was: ",
-          egComponent,
-        );
-    }
+const getExample = (egComponent: ExampleComponent): JSX.Element => {
+  switch (egComponent) {
+    case ExampleComponent.JavaScriptClassSingleValue:
+      return <JavascriptClassExample multiple={false} />;
+    case ExampleComponent.JavaScriptClassMultiValue:
+      return <JavascriptClassExample multiple />;
+    case ExampleComponent.JavaScriptFunctionSingleValue:
+      return <JavascriptFunctionExample multiple={false} />;
+    case ExampleComponent.JavaScriptFunctionMultiValue:
+      return <JavascriptFunctionExample multiple />;
+    case ExampleComponent.TypeScriptClassSingleValue:
+      return <TypescriptClassExample multiple={false} />;
+    case ExampleComponent.TypeScriptClassMultiValue:
+      return <TypescriptClassExample multiple />;
+    case ExampleComponent.TypeScriptFunctionSingleValue:
+      return <TypescriptFunctionExample multiple={false} />;
+    case ExampleComponent.TypeScriptFunctionMultiValue:
+      return <TypescriptFunctionExample multiple />;
+    default:
+      throw new Error(
+        "couldn't match example component in getExample() in App.tsx. egComponent was: ",
+        egComponent,
+      );
   }
-
-  setOpen(examplePickerOpen: boolean): void {
-    this.setState({ examplePickerOpen });
-  }
-
-  setCurrentExample(
-    callback: (prevState: ExampleComponent | null) => ExampleComponent | null,
-  ): void {
-    this.setState((state: Readonly<State>) => ({
-      currentExample: callback(state.currentExample),
-    }));
-  }
-
-  // todo: fix picker items being under text
-
-  render(): JSX.Element {
-    const { currentExample, examplePickerOpen, exampleComponents } = this.state;
-
-    return (
-      <GestureHandlerRootView style={{ flex: 1 }}>
+};
+
+export default function App(): JSX.Element {
+  const [currentExample, setCurrentExample] = useState<ExampleComponent>(
+    ExampleComponent.JavaScriptClassSingleValue
+  );
+  const [examplePickerOpen, setOpen] = useState<boolean>(false);
+  const [exampleComponents] = useState<Array<ItemType<ExampleComponent>>>(
+    EXAMPLE_COMPONENT_ITEMS
+  );
+
+  const colorScheme = useColorScheme();
+  const backgroundColor = colorScheme === 'dark' ? '#222' : '#fff';
+  
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <View style={{
+        ...styles.page,
+        backgroundColor,
+      }}>
         <View style={styles.container}>
-          <View style={{ flex: 1 }}>
-            <View style={{ flex: 1 }}>
+          <View style={{ marginBottom: 32 }}>
+            <View style={{ marginBottom: 32 }}>
               <Text>Choose example:</Text>
             </View>
 
-            <View style={{ flex: 1 }}>
+            <View style={{ marginBottom: 32 }}>
               <DropDownPicker
-                setValue={this.setCurrentExample}
+                setValue={setCurrentExample}
                 value={currentExample}
                 items={exampleComponents}
                 open={examplePickerOpen}
-                setOpen={this.setOpen}
+                setOpen={setOpen}
               />
             </View>
           </View>
 
-          <View style={{ flex: 3 }}>
-            <View style={{ flex: 1 }}>
+          <View style={{ marginBottom: 32 }}>
+            <View style={{ marginBottom: 32 }}>
               <Text>Example:</Text>
             </View>
 
-            {App.getExample(currentExample)}
+            {getExample(currentExample)}
           </View>
         </View>
-      </GestureHandlerRootView>
-    );
-  }
+      </View>
+    </GestureHandlerRootView>
+  );
 }