feat(example): add nested complex views (#1111)

Jira ID: MOB-13737

Author: abdelhamid-f-nasser

.gitignore

@@ -64,3 +64,6 @@ android/keystores/debug.keystore
 
 # Vscode local history
 .history/
+
+# .idea run configurations
+/.run/*

examples/default/src/components/InputField.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+
+import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native';
+
+interface InputFieldProps {
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  keyboardType?: KeyboardTypeOptions;
+}
+
+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: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    fontSize: 16,
+    borderRadius: 5,
+  },
+});

examples/default/src/components/NestedView.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Text } from 'native-base';
+import { StyleSheet, View } from 'react-native';
+
+interface NestedViewProps {
+  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(null).map((_, index) => (
+        <NestedView key={index} breadth={breadth} depth={depth - 1} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    padding: 1,
+  },
+});

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}

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">

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>
+  );
+};

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>
   );