refactor(demo): add AppInputProps to TextInputs

Author: fadi-george

examples/demo/src/components/modals/CustomNotificationModal.tsx

@@ -9,7 +9,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -61,6 +61,7 @@ export default function CustomNotificationModal({
             value={title}
             onChangeText={setTitle}
             autoFocus
+            {...AppInputProps}
             testID="custom_notification_title_input"
           />
           <TextInput
@@ -69,6 +70,7 @@ export default function CustomNotificationModal({
             placeholderTextColor={AppColors.osGrey600}
             value={body}
             onChangeText={setBody}
+            {...AppInputProps}
             testID="custom_notification_body_input"
           />
           <View style={AppDialogStyles.actions}>

examples/demo/src/components/modals/LoginModal.tsx

@@ -9,7 +9,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -55,6 +55,7 @@ export default function LoginModal({ visible, onConfirm, onClose }: Props) {
             value={userId}
             onChangeText={setUserId}
             autoFocus
+            {...AppInputProps}
             testID="login_user_id_input"
           />
           <View style={AppDialogStyles.actions}>

examples/demo/src/components/modals/MultiPairInputModal.tsx

@@ -11,7 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Row {
   id: number;
@@ -107,6 +107,7 @@ export default function MultiPairInputModal({
                     value={row.key}
                     onChangeText={t => updateRow(row.id, 'key', t)}
                     autoFocus={idx === 0}
+                    {...AppInputProps}
                     testID={idx === 0 ? 'multi_pair_key_0' : undefined}
                   />
                   <TextInput
@@ -115,6 +116,7 @@ export default function MultiPairInputModal({
                     placeholderTextColor={AppColors.osGrey600}
                     value={row.value}
                     onChangeText={t => updateRow(row.id, 'value', t)}
+                    {...AppInputProps}
                     testID={idx === 0 ? 'multi_pair_value_0' : undefined}
                   />
                   {rows.length > 1 && (

examples/demo/src/components/modals/OutcomeModal.tsx

@@ -9,7 +9,12 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppTextStyles, AppDialogStyles } from '../../theme';
+import {
+  AppColors,
+  AppTextStyles,
+  AppDialogStyles,
+  AppInputProps,
+} from '../../theme';
 
 type OutcomeType = 'normal' | 'unique' | 'withValue';
 
@@ -103,6 +108,7 @@ export default function OutcomeModal({
             value={name}
             onChangeText={setName}
             autoFocus
+            {...AppInputProps}
             testID="outcome_name_input"
           />
           {outcomeType === 'withValue' && (
@@ -113,6 +119,7 @@ export default function OutcomeModal({
               value={value}
               onChangeText={setValue}
               keyboardType="numeric"
+              {...AppInputProps}
               testID="outcome_value_input"
             />
           )}

examples/demo/src/components/modals/PairInputModal.tsx

@@ -9,7 +9,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -78,6 +78,7 @@ export default function PairInputModal({
               value={keyValue}
               onChangeText={setKeyValue}
               autoFocus
+              {...AppInputProps}
               testID={keyTestID}
             />
             <TextInput
@@ -90,6 +91,7 @@ export default function PairInputModal({
               placeholderTextColor={AppColors.osGrey600}
               value={val}
               onChangeText={setVal}
+              {...AppInputProps}
               testID={valueTestID}
             />
           </View>

examples/demo/src/components/modals/SingleInputModal.tsx

@@ -9,7 +9,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -67,6 +67,7 @@ export default function SingleInputModal({
             onChangeText={setValue}
             keyboardType={keyboardType}
             autoFocus
+            {...AppInputProps}
             testID={testID}
           />
           <View style={AppDialogStyles.actions}>

examples/demo/src/components/modals/TrackEventModal.tsx

@@ -14,6 +14,7 @@ import {
   AppTextStyles,
   AppSpacing,
   AppDialogStyles,
+  AppInputProps,
 } from '../../theme';
 
 interface Props {
@@ -103,6 +104,7 @@ export default function TrackEventModal({
             value={name}
             onChangeText={setName}
             autoFocus
+            {...AppInputProps}
             testID="track_event_name_input"
           />
           <Text style={styles.label}>Properties (optional, JSON)</Text>
@@ -117,6 +119,7 @@ export default function TrackEventModal({
             value={propertiesText}
             onChangeText={handlePropertiesChange}
             multiline
+            {...AppInputProps}
             testID="track_event_properties_input"
           />
           {!!jsonError && <Text style={styles.errorText}>{jsonError}</Text>}

examples/demo/src/theme.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, type TextInputProps } from 'react-native';
 
 export const AppColors = {
   osPrimary: '#E54B4D',
@@ -49,6 +49,12 @@ export const AppTheme = StyleSheet.create({
   },
 });
 
+export const AppInputProps: TextInputProps = {
+  autoCorrect: false,
+  autoCapitalize: 'none',
+  autoComplete: 'off',
+};
+
 export const AppDialogStyles = StyleSheet.create({
   backdrop: {
     flex: 1,