Merge remote-tracking branch 'origin/dev' into feat/support-app-flows

Author: abdelhamid-f-nasser

examples/default/src/components/InputField.tsx

@@ -1,26 +1,48 @@
 import React, { forwardRef } from 'react';
 
-import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native';
+import { KeyboardTypeOptions, StyleSheet, TextInput, View } from 'react-native';
+import { Text } from 'native-base';
 
 interface InputFieldProps {
   placeholder?: string;
   value?: string;
   onChangeText?: (text: string) => void;
   keyboardType?: KeyboardTypeOptions;
+  errorText?: string;
+  maxLength?: number;
+  accessibilityLabel?: string;
+  flex?: number;
 }
 
 export const InputField = forwardRef<TextInput, InputFieldProps>(
-  ({ placeholder, value, onChangeText, keyboardType, ...restProps }, ref) => {
+  (
+    {
+      placeholder,
+      value,
+      onChangeText,
+      accessibilityLabel,
+      maxLength,
+      keyboardType,
+      errorText,
+      ...restProps
+    },
+    ref,
+  ) => {
     return (
-      <TextInput
-        ref={ref}
-        placeholder={placeholder}
-        style={styles.textInput}
-        keyboardType={keyboardType}
-        value={value}
-        onChangeText={onChangeText}
-        {...restProps}
-      />
+      <View>
+        <TextInput
+          ref={ref}
+          placeholder={placeholder}
+          style={styles.textInput}
+          maxLength={maxLength}
+          accessibilityLabel={accessibilityLabel}
+          keyboardType={keyboardType}
+          value={value}
+          onChangeText={onChangeText}
+          {...restProps}
+        />
+        {errorText ? <Text style={styles.errorText}>{errorText}</Text> : null}
+      </View>
     );
   },
 );
@@ -35,4 +57,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     borderRadius: 5,
   },
+  errorText: {
+    color: '#ff0000',
+  },
 });

examples/default/src/navigation/HomeStack.tsx

@@ -15,6 +15,10 @@ 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';
+import {
+  BackAndForthScreen,
+  type BackAndForthScreenProp,
+} from '../screens/user-steps/BackAndForthScreen';
 import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
 import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
@@ -36,6 +40,7 @@ export type HomeStackParamList = {
   GoogleMapsScreen: undefined;
   LargeImageList: undefined;
   SessionReplay: undefined;
+  BackAndForthScreen: BackAndForthScreenProp;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -60,6 +65,7 @@ export const HomeStackNavigator: React.FC = () => {
         options={{ title: 'Feature Requests' }}
       />
       <HomeStack.Screen name="Replies" component={RepliesScreen} />
+
       <HomeStack.Screen name="Surveys" component={SurveysScreen} />
       <HomeStack.Screen
         name="SessionReplay"
@@ -102,6 +108,11 @@ export const HomeStackNavigator: React.FC = () => {
         component={SectionListScreen}
         options={{ title: 'Section List' }}
       />
+      <HomeStack.Screen
+        name="BackAndForthScreen"
+        component={BackAndForthScreen}
+        options={{ title: 'Back And Forth Screen' }}
+      />
       <HomeStack.Screen
         name="LargeImageList"
         component={LargeImageListScreen}

examples/default/src/navigation/RootTab.tsx

@@ -8,6 +8,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 
 import { SettingsScreen } from '../screens/SettingsScreen';
 import { HomeStackNavigator } from './HomeStack';
+import { Platform } from 'react-native';
 
 export type RootTabParamList = {
   HomeStack: undefined;
@@ -22,7 +23,7 @@ const createTabBarIcon = (name: string): BottomTabNavigationOptions['tabBarIcon'
 
 export const RootTabNavigator: React.FC = () => {
   return (
-    <RootTab.Navigator>
+    <RootTab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS !== 'ios' }}>
       <RootTab.Screen
         name="HomeStack"
         component={HomeStackNavigator}