From fc299b9ba2aacecc4d6440f399b6dee551dd6e14 Mon Sep 17 00:00:00 2001
From: AbdElHamid Nasser <anasser@instabug.com>
Date: Thu, 25 Jan 2024 11:24:39 +0200
Subject: [PATCH 1/4] feat(example): Add nested complex views

Allows testing using complex nested views
---
 .gitignore                                    |  3 ++
 .../default/src/components/InputField.tsx     | 39 +++++++++++++++
 .../default/src/components/NestedView.tsx     | 29 ++++++++++++
 examples/default/src/navigation/HomeStack.tsx |  7 +++
 .../user-steps/BasicComponentsScreen.tsx      |  4 +-
 .../screens/user-steps/ComplexViewsScreen.tsx | 47 +++++++++++++++++++
 .../screens/user-steps/UserStepsScreen.tsx    |  1 +
 7 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 examples/default/src/components/InputField.tsx
 create mode 100644 examples/default/src/components/NestedView.tsx
 create mode 100644 examples/default/src/screens/user-steps/ComplexViewsScreen.tsx

diff --git a/.gitignore b/.gitignore
index f0e0669d21..50fb3439f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,6 @@ android/keystores/debug.keystore
 
 # Vscode local history
 .history/
+
+# .idea run configurations
+/.run/*
diff --git a/examples/default/src/components/InputField.tsx b/examples/default/src/components/InputField.tsx
new file mode 100644
index 0000000000..1fd744262a
--- /dev/null
+++ b/examples/default/src/components/InputField.tsx
@@ -0,0 +1,39 @@
+import React, { PropsWithChildren } from 'react';
+
+import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native';
+
+interface InputFieldProps extends PropsWithChildren {
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  keyboardType?: KeyboardTypeOptions;
+}
+
+export const InputField: React.FC<InputFieldProps> = ({
+  placeholder,
+  value,
+  onChangeText,
+  keyboardType,
+}) => {
+  return (
+    <TextInput
+      placeholder={placeholder}
+      style={styles.textInput}
+      keyboardType={keyboardType}
+      value={value}
+      onChangeText={onChangeText}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    fontSize: 16,
+    borderRadius: 5,
+  },
+});
diff --git a/examples/default/src/components/NestedView.tsx b/examples/default/src/components/NestedView.tsx
new file mode 100644
index 0000000000..27071da6da
--- /dev/null
+++ b/examples/default/src/components/NestedView.tsx
@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from 'react';
+
+import { Text } from 'native-base';
+import { StyleSheet, View } from 'react-native';
+
+interface NestedViewProps extends PropsWithChildren {
+  children?: React.ReactNode;
+  depth: number;
+  breadth?: number;
+}
+
+export const NestedView: React.FC<NestedViewProps> = ({ depth, breadth = 1, children }) => {
+  if (!depth) {
+    return <>{children}</>;
+  }
+  return (
+    <View style={styles.container}>
+      <Text>{depth}</Text>
+      {new Array(breadth).fill(<NestedView breadth={breadth} depth={depth - 1} />)}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    padding: 1,
+  },
+});
diff --git a/examples/default/src/navigation/HomeStack.tsx b/examples/default/src/navigation/HomeStack.tsx
index 360a274448..b3e1b76a48 100644
--- a/examples/default/src/navigation/HomeStack.tsx
+++ b/examples/default/src/navigation/HomeStack.tsx
@@ -12,6 +12,7 @@ import { UserStepsScreen } from '../screens/user-steps/UserStepsScreen';
 import { BasicComponentsScreen } from '../screens/user-steps/BasicComponentsScreen';
 import { ScrollViewScreen } from '../screens/user-steps/ScrollViewScreen';
 import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
+import { ComplexViewsScreen } from '../screens/user-steps/ComplexViewsScreen';
 import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
 import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
 
@@ -26,6 +27,7 @@ export type HomeStackParamList = {
   BasicComponents: undefined;
   ScrollView: undefined;
   FlatList: undefined;
+  ComplexViews: undefined;
   SectionList: undefined;
   Gestures: undefined;
 };
@@ -63,6 +65,11 @@ export const HomeStackNavigator: React.FC = () => {
         component={BasicComponentsScreen}
         options={{ title: 'Basic Components' }}
       />
+      <HomeStack.Screen
+        name="ComplexViews"
+        component={ComplexViewsScreen}
+        options={{ title: 'Basic Components' }}
+      />
       <HomeStack.Screen
         name="ScrollView"
         component={ScrollViewScreen}
diff --git a/examples/default/src/screens/user-steps/BasicComponentsScreen.tsx b/examples/default/src/screens/user-steps/BasicComponentsScreen.tsx
index 4149ad5e80..16aa55b8c5 100644
--- a/examples/default/src/screens/user-steps/BasicComponentsScreen.tsx
+++ b/examples/default/src/screens/user-steps/BasicComponentsScreen.tsx
@@ -6,7 +6,6 @@ import {
   Pressable,
   StyleSheet,
   Text,
-  TextInput,
   TouchableOpacity,
   Switch,
   useWindowDimensions,
@@ -18,6 +17,7 @@ import { Center, HStack, ScrollView, VStack } from 'native-base';
 import { Screen } from '../../components/Screen';
 import { Section } from '../../components/Section';
 import { nativeBaseTheme } from '../../theme/nativeBaseTheme';
+import { InputField } from '../../components/InputField';
 
 /**
  * A screen that demonstates the usage of user steps with basic React Native components.
@@ -55,7 +55,7 @@ export const BasicComponentsScreen: React.FC = () => {
         </Section>
 
         <Section title="Text Input">
-          <TextInput placeholder="Enter your name" style={styles.textInput} />
+          <InputField placeholder="Enter your name" />
         </Section>
 
         <Section title="Button">
diff --git a/examples/default/src/screens/user-steps/ComplexViewsScreen.tsx b/examples/default/src/screens/user-steps/ComplexViewsScreen.tsx
new file mode 100644
index 0000000000..0035d57759
--- /dev/null
+++ b/examples/default/src/screens/user-steps/ComplexViewsScreen.tsx
@@ -0,0 +1,47 @@
+import React, { useRef, useState } from 'react';
+
+import { Screen } from '../../components/Screen';
+import { Section } from '../../components/Section';
+import { NestedView } from '../../components/NestedView';
+import { Button } from 'react-native';
+import { ScrollView, VStack } from 'native-base';
+import { InputField } from '../../components/InputField';
+
+export const ComplexViewsScreen: React.FC = () => {
+  const initialDepth = 10;
+  const initialBreadth = 2;
+
+  const depthRef = useRef(initialDepth);
+  const breadthRef = useRef(initialBreadth);
+
+  const [depth, setDepth] = useState(initialDepth);
+  const [breadth, setBreadth] = useState(initialBreadth);
+
+  function handleRender() {
+    setDepth(depthRef.current);
+    setBreadth(breadthRef.current);
+  }
+
+  return (
+    <Screen>
+      <ScrollView>
+        <Section title="Complex View">
+          <VStack space="xs">
+            <InputField
+              placeholder={`Depth (default: ${initialDepth})`}
+              keyboardType="numeric"
+              onChangeText={(text) => (depthRef.current = +text)}
+            />
+            <InputField
+              placeholder={`Breadth (default: ${initialBreadth})`}
+              keyboardType="numeric"
+              onChangeText={(text) => (breadthRef.current = +text)}
+            />
+            <Button title="Render" onPress={handleRender} />
+            <NestedView depth={depth} breadth={breadth} />
+          </VStack>
+        </Section>
+      </ScrollView>
+    </Screen>
+  );
+};
diff --git a/examples/default/src/screens/user-steps/UserStepsScreen.tsx b/examples/default/src/screens/user-steps/UserStepsScreen.tsx
index 219cd5bbd6..dc0d26c105 100644
--- a/examples/default/src/screens/user-steps/UserStepsScreen.tsx
+++ b/examples/default/src/screens/user-steps/UserStepsScreen.tsx
@@ -14,6 +14,7 @@ export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList
       <ListTile title="Scroll View" onPress={() => navigation.navigate('ScrollView')} />
       <ListTile title="Flat List" onPress={() => navigation.navigate('FlatList')} />
       <ListTile title="Section List" onPress={() => navigation.navigate('SectionList')} />
+      <ListTile title="Complex Views" onPress={() => navigation.navigate('ComplexViews')} />
       <ListTile title="Gestures" onPress={() => navigation.navigate('Gestures')} />
     </Screen>
   );

From ffc63d4ed2b23794bb7788cc345ee6c3261bc0c0 Mon Sep 17 00:00:00 2001
From: AbdElHamid Nasser <anasser@instabug.com>
Date: Sun, 28 Jan 2024 18:10:44 +0200
Subject: [PATCH 2/4] fix: resolve nexted view id error

---
 examples/default/src/components/NestedView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/default/src/components/NestedView.tsx b/examples/default/src/components/NestedView.tsx
index 27071da6da..60a31f6332 100644
--- a/examples/default/src/components/NestedView.tsx
+++ b/examples/default/src/components/NestedView.tsx
@@ -16,7 +16,9 @@ export const NestedView: React.FC<NestedViewProps> = ({ depth, breadth = 1, chil
   return (
     <View style={styles.container}>
       <Text>{depth}</Text>
-      {new Array(breadth).fill(<NestedView breadth={breadth} depth={depth - 1} />)}
+      {new Array(breadth).fill(null).map((_, index) => (
+        <NestedView key={index} breadth={breadth} depth={depth - 1} />
+      ))}
     </View>
   );
 };

From 2513ae1ce1ef9ff686ab9d9ccf47d8ea4be2e815 Mon Sep 17 00:00:00 2001
From: AbdElHamid Nasser <anasser@instabug.com>
Date: Sun, 28 Jan 2024 22:37:15 +0200
Subject: [PATCH 3/4] refactor: remove redundant PropsWithChildren

---
 examples/default/src/components/InputField.tsx | 4 ++--
 examples/default/src/components/NestedView.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/default/src/components/InputField.tsx b/examples/default/src/components/InputField.tsx
index 1fd744262a..a9ed1a7a0a 100644
--- a/examples/default/src/components/InputField.tsx
+++ b/examples/default/src/components/InputField.tsx
@@ -1,8 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native';
 
-interface InputFieldProps extends PropsWithChildren {
+interface InputFieldProps {
   placeholder?: string;
   value?: string;
   onChangeText?: (text: string) => void;
diff --git a/examples/default/src/components/NestedView.tsx b/examples/default/src/components/NestedView.tsx
index 60a31f6332..494fde9f2f 100644
--- a/examples/default/src/components/NestedView.tsx
+++ b/examples/default/src/components/NestedView.tsx
@@ -1,9 +1,9 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { Text } from 'native-base';
 import { StyleSheet, View } from 'react-native';
 
-interface NestedViewProps extends PropsWithChildren {
+interface NestedViewProps {
   children?: React.ReactNode;
   depth: number;
   breadth?: number;

From 56fb01eb7128e0b2fe9dce6109a60b65b2e38bc2 Mon Sep 17 00:00:00 2001
From: AbdElHamid Nasser <anasser@instabug.com>
Date: Sun, 28 Jan 2024 22:39:29 +0200
Subject: [PATCH 4/4] refactor: support passing ref to InputField

---
 .../default/src/components/InputField.tsx     | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/examples/default/src/components/InputField.tsx b/examples/default/src/components/InputField.tsx
index a9ed1a7a0a..91e789f801 100644
--- a/examples/default/src/components/InputField.tsx
+++ b/examples/default/src/components/InputField.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native';
 
@@ -9,22 +9,21 @@ interface InputFieldProps {
   keyboardType?: KeyboardTypeOptions;
 }
 
-export const InputField: React.FC<InputFieldProps> = ({
-  placeholder,
-  value,
-  onChangeText,
-  keyboardType,
-}) => {
-  return (
-    <TextInput
-      placeholder={placeholder}
-      style={styles.textInput}
-      keyboardType={keyboardType}
-      value={value}
-      onChangeText={onChangeText}
-    />
-  );
-};
+export const InputField = forwardRef<TextInput, InputFieldProps>(
+  ({ placeholder, value, onChangeText, keyboardType, ...restProps }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        placeholder={placeholder}
+        style={styles.textInput}
+        keyboardType={keyboardType}
+        value={value}
+        onChangeText={onChangeText}
+        {...restProps}
+      />
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   textInput: {