@codeleap/mobile 5.0.8 → 5.0.10

package/src/components/Checkbox/index.tsx

@@ -40,10 +40,11 @@ export const Checkbox = (props: CheckboxProps) => {
   const styles = useStylesFor(Checkbox.styleRegistryName, style)
 
   const {
-    fieldHandle,
     validation,
     wrapperRef,
-  } = useInputBase<boolean>(field, fields.boolean, [value, onValueChange])
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(field, fields.boolean, { value, onValueChange })
 
   const boxAnimation = useAnimatedVariantStyles({
     variantStyles: styles,
@@ -53,9 +54,9 @@ export const Checkbox = (props: CheckboxProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = fieldHandle?.value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
+        disabledStyle = inputValue ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
       }
-      const style = fieldHandle?.value ? styles['box:checked'] : styles['box:unchecked']
+      const style = inputValue ? styles['box:checked'] : styles['box:unchecked']
 
       return {
         ...style,
@@ -63,7 +64,7 @@ export const Checkbox = (props: CheckboxProps) => {
       }
 
     },
-    dependencies: [fieldHandle?.value, disabled],
+    dependencies: [inputValue, disabled],
   })
 
   const checkmarkWrapperAnimation = useAnimatedVariantStyles({
@@ -74,34 +75,32 @@ export const Checkbox = (props: CheckboxProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = fieldHandle?.value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
+        disabledStyle = inputValue ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
       }
-      const style = fieldHandle?.value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
+      const style = inputValue ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
       return {
         ...style,
         ...disabledStyle,
       }
 
     },
-    dependencies: [fieldHandle?.value, disabled],
+    dependencies: [inputValue, disabled],
   })
 
   // @ts-expect-error
   const _checkboxOnLeft = checkboxOnLeft ?? styles.__props?.checkboxOnLeft
 
-  const hasError = validation.showError || forceError
+  const hasError = validation?.showError || forceError
 
   return <InputBase
     {...inputBaseProps}
     ref={wrapperRef}
-    error={hasError ? validation.message || forceError : null}
+    error={hasError ? validation?.message || forceError : null}
     debugName={debugName}
     wrapper={Touchable}
     style={styles}
     wrapperProps={{
-      onPress: () => {
-        fieldHandle.setValue(!fieldHandle?.value)
-      },
+      onPress: () => onInputValueChange(!inputValue),
       disabled,
       rippleDisabled: true,
     }}

package/src/components/DatePickerModal/index.tsx

@@ -2,9 +2,8 @@ import React, { useMemo, useRef } from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { useConditionalState } from '@codeleap/hooks'
 import DatePicker from 'react-native-date-picker'
-import Modal from '../Modal'
+import { Modal } from '../Modal'
 import { TextInput } from '../TextInput'
-import { ModalManager } from '../../utils'
 import { Button } from '../Button'
 import { DatePickerModalProps } from './types'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
@@ -113,8 +112,8 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     footerComponent: Footer,
     toggleOnConfirm,
     onConfirm: _onConfirm,
-    value: _value,
-    onValueChange: _onValueChange,
+    value,
+    onValueChange,
     locale,
     ...modalProps
   } = allProps
@@ -124,22 +123,21 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
   const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false, isBooleanToggle: true })
 
   const {
-    fieldHandle,
-  } = useInputBase(field, fields.date as () => DateField<any>, [_value, _onValueChange])
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(field, fields.date, { value, onValueChange })
 
-  const [value, setValue] = [fieldHandle?.value, fieldHandle.setValue]
-
-  const Wrapper = isCustomModal ? ModalManager.Modal : React.Fragment
+  const Wrapper = isCustomModal ? Modal : React.Fragment
 
   const compositionStyles = useCompositionStyles(['input', 'doneButton', 'cancelButton', 'confirmButton'], styles)
 
-  const formattedDate = value ? formatDate(value) : ''
+  const formattedDate = inputValue ? formatDate(inputValue) : ''
 
   const tempDate = useRef<Date | null>(initialDate instanceof Date ? initialDate : new Date(initialDate))
 
   const onConfirm = () => {
     if (commitDate == 'onConfirm' && !!tempDate.current) {
-      setValue(tempDate.current)
+      onInputValueChange(tempDate.current)
     }
 
     if (isCustomModal && toggleOnConfirm) {
@@ -179,20 +177,20 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
   } : {}
 
   const date = useMemo(() => {
-    const newValue = value ?? initialDate
+    const newValue = inputValue ?? initialDate
     return newValue instanceof Date ? newValue : new Date(newValue)
-  }, [value, initialDate])
+  }, [inputValue, initialDate])
 
   return (
     <>
       {!hideInput ? <OuterInput
         {...allProps}
         style={compositionStyles?.input}
-        value={value}
+        value={inputValue}
         debugName={debugName}
         visible={visible}
         toggle={toggle}
-        onValueChange={setValue}
+        onValueChange={onInputValueChange}
         valueLabel={formattedDate}
       /> : null}
 
@@ -206,7 +204,7 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
             tempDate.current = currentDate
 
             if (commitDate === 'onChange') {
-              setValue(currentDate)
+              onInputValueChange(currentDate)
             }
           }}
           locale={locale}
@@ -214,7 +212,7 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
           textColor={styles?.picker?.color}
           theme='light'
           androidVariant='iosClone'
-          onConfirm={setValue}
+          onConfirm={onInputValueChange}
           minimumDate={minimumDate}
           maximumDate={maximumDate}
           {...datePickerProps}

package/src/components/InputBase/useInputBase.ts

@@ -2,18 +2,18 @@ import { useMemo, useRef } from 'react'
 import { View, TextInput } from 'react-native'
 import { useWrappingScrollable } from '../../modules/scroll'
 import { Field, IFieldRef, fields, useField } from '@codeleap/form'
-import { AnyRecord } from '@codeleap/types'
+import { AnyRecord, TypeGuards } from '@codeleap/types'
 
 export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V, any, any, unknown>>(
   field: T,
-  defaultField: (options: AnyRecord) => T = fields.text as () => T,
-  customState: [V, (value: V) => void] | [] = [],
+  defaultField: (options?: AnyRecord) => T = fields.text as () => T,
+  internalState: { value: V; onValueChange: (value: V) => void },
   params: Partial<IFieldRef<V>> = {}, 
   deps: any[] = []
 ) {
-  const [value, onValueChange] = customState
+  const { value, onValueChange } = internalState
 
-  const hasState = useMemo(() => customState.filter(Boolean)?.length >= 1, [])
+  const hasInternalState = useMemo(() => TypeGuards.isFunction(onValueChange) && !TypeGuards.isNil(value), [])
 
   const wrapperRef = useRef<View>()
 
@@ -21,7 +21,7 @@ export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V
 
   const scrollable = useWrappingScrollable()
 
-  const fieldHandle = useField<V, T>(field as T, [
+  const fieldHandle = hasInternalState ? {} as Partial<ReturnType<typeof useField>> : useField<V, T>(field as T, [
     {
       blur() {
         innerInputRef.current.blur()
@@ -40,9 +40,9 @@ export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V
       ...params,
     },
     deps
-  ] as unknown as Parameters<T['use']>, () => defaultField(hasState ? { onValueChange, defaultValue: value } : {}))
+  ] as unknown as Parameters<T['use']>, defaultField)
 
-  const validation = fieldHandle.validation
+  const validation = fieldHandle?.validation
 
   return {
     fieldHandle,
@@ -50,5 +50,7 @@ export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V
     wrapperRef,
     innerInputRef,
     scrollable,
+    inputValue: (hasInternalState ? value : fieldHandle?.value) as V,
+    onInputValueChange: hasInternalState ? onValueChange : fieldHandle?.setValue,
   }
 }

package/src/components/Modal/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { View } from '../View'
 import { Scroll } from '../Scroll'
 import { TypeGuards } from '@codeleap/types'
@@ -7,12 +7,12 @@ import { useBackButton } from '../../utils/hooks'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import { ActionIcon } from '../ActionIcon'
-import { useState } from 'react'
 import { ModalHeaderProps, ModalProps } from './types'
-import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps, useTheme, AppTheme, Theme } from '@codeleap/styles'
+import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
+import { Portal } from '@gorhom/portal'
 
 export * from './styles'
 export * from './types'
@@ -67,26 +67,22 @@ export const Modal = (modalProps: ModalProps) => {
     children,
     toggle = () => null,
     dismissOnBackdrop,
-    header = null,
+    header,
     debugName,
     scroll,
-    renderHeader,
-    zIndex = null,
+    renderHeader: Header,
     scrollProps = {},
     closeOnHardwareBackPress,
     style,
     boxExiting,
     boxEntering,
+    withPortal,
     ...props
   } = {
     ...Modal.defaultProps,
     ...modalProps,
   }
 
-  const themeValues = useTheme(store => (store.current as AppTheme<Theme>)?.values)
-
-  const [modalHeight, setModalHeight] = useState(0)
-
   const styles = useStylesFor(Modal.styleRegistryName, style)
 
   const buttonStyles = useNestedStylesByKey('closeButton', styles)
@@ -94,17 +90,7 @@ export const Modal = (modalProps: ModalProps) => {
   const ScrollComponent = scroll ? Scroll : View
   const scrollStyle = scroll ? styles?.scroll : styles?.innerWrapper
 
-  const heightThreshold = themeValues?.height * 0.75
-  const topSpacing = modalHeight > heightThreshold ? styles?.topSpacing : 0
-
-  const headerProps: ModalHeaderProps = {
-    ...modalProps,
-    closable,
-    styles,
-    buttonStyles,
-  }
-
-  const Header = renderHeader || DefaultHeader
+  const Wrapper = withPortal ? Portal : Fragment
 
   useBackButton(() => {
     if (visible && closeOnHardwareBackPress) {
@@ -113,82 +99,77 @@ export const Modal = (modalProps: ModalProps) => {
     }
   }, [visible, toggle, closeOnHardwareBackPress])
 
-  const onModalLayout = (event) => {
-    const { height } = event.nativeEvent.layout
-    setModalHeight(height)
-    props?.onLayout?.(event)
-  }
-
   return (
-    <View
-      style={[
-        styles?.wrapper,
-        // @ts-expect-error
-        { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : styles?.wrapper?.zIndex, ...topSpacing },
-      ]}
-      pointerEvents={visible ? 'auto' : 'none'}
-    >
-      <Backdrop
-        visible={visible}
-        debugName={`Modal ${debugName} backdrop`}
-        style={{
-          'wrapper:hidden': styles['backdrop:hidden'],
-          'wrapper:visible': styles['backdrop:visible'],
-          'wrapper': styles?.backdrop,
-        }}
-        wrapperProps={{
-          // @ts-expect-error
-          transition: styles['backdrop:transition'],
-        }}
-      />
-
-      <ScrollComponent
-        contentContainerStyle={styles?.scrollContent}
-        showsVerticalScrollIndicator={false}
-        keyboardAware
-        animated
-        {...scrollProps}
-        style={scrollStyle}
-      >
-        {dismissOnBackdrop ? (
-          <Touchable
-            onPress={closable && visible ? toggle : (() => { })}
-            debounce={400}
-            debugName={'Modal backdrop touchable'}
-            style={styles?.backdropTouchable}
-            android_ripple={null}
-            noFeedback
-          />) : null}
-        {
-          visible ? (
-            <View
-              animated
-              // @ts-ignore
-              entering={boxEntering}
-              exiting={boxExiting}
-              {...props}
-              onLayout={onModalLayout}
-              style={styles?.box}
-            >
-              {header ? header : <Header {...headerProps} />}
-
-              <View style={styles?.body}>{children}</View>
-
-              {footer ? (
-                <View style={styles?.footer}>
-                  {typeof footer === 'string' ? <Text text={footer} /> : footer}
-                </View>
-              ) : null}
-            </View>
-          ) : null
-        }
-      </ScrollComponent>
-    </View >
+    <Wrapper>
+      <View style={styles?.wrapper} pointerEvents={visible ? 'auto' : 'none'}>
+        <Backdrop
+          visible={visible}
+          debugName={`Modal ${debugName} backdrop`}
+          style={{
+            'wrapper:hidden': styles['backdrop:hidden'],
+            'wrapper:visible': styles['backdrop:visible'],
+            'wrapper': styles?.backdrop,
+          }}
+          wrapperProps={{
+            // @ts-expect-error
+            transition: styles['backdrop:transition'],
+          }}
+        />
+
+        <ScrollComponent
+          contentContainerStyle={styles?.scrollContent}
+          showsVerticalScrollIndicator={false}
+          keyboardAware
+          animated
+          {...scrollProps}
+          style={scrollStyle}
+        >
+          {dismissOnBackdrop ? (
+            <Touchable
+              onPress={closable && visible ? toggle : (() => { })}
+              debounce={400}
+              debugName={'Modal backdrop touchable'}
+              style={styles?.backdropTouchable}
+              android_ripple={null}
+              noFeedback
+            />) : null}
+          {
+            visible ? (
+              <View
+                animated
+                // @ts-ignore
+                entering={boxEntering}
+                exiting={boxExiting}
+                {...props}
+                style={styles?.box}
+              >
+                {header ? header : (
+                  <Header
+                    {...modalProps}
+                    closable={closable}
+                    styles={styles}
+                    buttonStyles={buttonStyles}
+                  />
+                )}
+
+                <View style={styles?.body}>{children}</View>
+
+                {footer ? (
+                  <View style={styles?.footer}>
+                    {typeof footer === 'string' ? <Text text={footer} /> : footer}
+                  </View>
+                ) : null}
+              </View>
+            ) : null
+          }
+        </ScrollComponent>
+      </View>
+    </Wrapper>
   )
 }
 
 Modal.styleRegistryName = 'Modal'
-Modal.elements = ['wrapper', 'box', 'backdrop', 'innerWrapper', 'scroll', 'body', 'footer', 'header', 'title', 'description', 'closeButton', 'topSpacing']
+Modal.elements = ['wrapper', 'box', 'backdrop', 'innerWrapper', 'scroll', 'body', 'footer', 'header', 'title', 'description', 'closeButton']
 Modal.rootElement = 'wrapper'
 
 Modal.withVariantTypes = <S extends AnyRecord>(styles: S) => {
@@ -201,10 +182,10 @@ Modal.defaultProps = {
   dismissOnBackdrop: true,
   scroll: true,
   closeOnHardwareBackPress: true,
-  boxEntering: FadeIn.duration(100).build(),
+  boxEntering: FadeIn.duration(100).delay(50).build(),
   boxExiting: FadeOut.duration(100).build(),
+  withPortal: true,
+  renderHeader: DefaultHeader,
 } as Partial<ModalProps>
 
-MobileStyleRegistry.registerComponent(Modal)
-
-export default Modal
+MobileStyleRegistry.registerComponent(Modal)

package/src/components/Modal/styles.ts

@@ -16,7 +16,6 @@ export type ModalParts =
   | 'description'
   | 'titleWrapper'
   | `closeButton${Capitalize<ActionIconComposition>}`
-  | 'topSpacing'
 
 export type ModalComposition =
   | ModalParts

package/src/components/Modal/types.ts

@@ -20,7 +20,6 @@ export type ModalProps =
     closeIconName?: AppIcon
     visible?: boolean
     toggle?: () => void
-    zIndex?: number
     description?: React.ReactElement
     scroll?: boolean
     header?: React.ReactElement
@@ -30,7 +29,7 @@ export type ModalProps =
     scrollProps?: PropsOf<typeof Scroll, 'ref'>
     style?: StyledProp<ModalComposition>
     id?: string
-    absolute?: boolean
+    withPortal?: boolean
     boxEntering?: ReanimatedEnteringAnimation
     boxExiting?: ReanimatedExitingAnimation
   }

package/src/components/NumberIncrement/index.tsx

@@ -63,7 +63,6 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
 
   const {
-    fieldHandle,
     validation,
     min,
     max,
@@ -79,6 +78,8 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     handleMaskChange,
     handleBlur,
     handleFocus,
+    inputValue,
+    onInputValueChange,
   } = useNumberIncrement(allProps)
 
   const isFormatted = TypeGuards.isFunction(formatter)
@@ -123,9 +124,9 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   } : {}
 
   const currencyExtraProps = isCurrency ? {
-    value: fieldHandle?.value,
+    value: inputValue,
     onChangeText: null,
-    onChangeValue: fieldHandle.setValue,
+    onChangeValue: onInputValueChange,
     prefix: prefix,
     separator: separator ?? '.',
     suffix: suffix,
@@ -145,7 +146,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     <InputBase
       {...inputBaseProps}
       ref={wrapperRef}
-      error={hasError ? validation.message || forceError : null}
+      error={hasError ? validation?.message || forceError : null}
       style={styles}
       rightIcon={TypeGuards.isComponentOrElement(inputBaseProps.rightIcon) ? inputBaseProps.rightIcon : {
         name: 'plus' as AppIcon,
@@ -182,7 +183,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
           selectionColor={partialStyles?.selection?.color}
           {...textInputProps}
           onChangeText={handleChangeInput}
-          value={isFormatted ? formatter(fieldHandle?.value ?? min) : String(fieldHandle?.value ?? min)}
+          value={isFormatted ? formatter(inputValue ?? min) : String(inputValue ?? min)}
           onBlur={handleBlur}
           onFocus={handleFocus}
           style={[styles.input, partialStyles.input]}
@@ -192,7 +193,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
         />
       ) : (
         <Text
-          text={isFormatted ? formatter(fieldHandle?.value) : String(fieldHandle?.value)}
+          text={isFormatted ? formatter(inputValue) : String(inputValue)}
           style={[styles.input, partialStyles.input]}
         />
       )}

package/src/components/NumberIncrement/useNumberIncrement.ts

@@ -32,21 +32,23 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     validation,
     innerInputRef,
     wrapperRef,
+    inputValue,
+    onInputValueChange,
   } = useInputBase(
     field as Field<number, any, any>,
     fields.number as () => Field<number, any, any>,
-    [value, onValueChange]
+    { value, onValueChange }
   )
 
   const incrementDisabled = useMemo(() => {
-    const maxLimit = TypeGuards.isNumber(max) && (Number(fieldHandle?.value) >= max)
+    const maxLimit = TypeGuards.isNumber(max) && (Number(inputValue) >= max)
     return maxLimit
-  }, [fieldHandle?.value])
+  }, [inputValue])
 
   const decrementDisabled = useMemo(() => {
-    const minLimit = TypeGuards.isNumber(min) && (Number(fieldHandle?.value) <= min)
+    const minLimit = TypeGuards.isNumber(min) && (Number(inputValue) <= min)
     return minLimit
-  }, [fieldHandle?.value])
+  }, [inputValue])
 
   const actionTimeoutRef = useRef(null)
 
@@ -62,11 +64,11 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     clearActionTimeoutRef()
 
     if (action === 'increment' && !incrementDisabled) {
-      const newValue = Number(fieldHandle?.value) + step
-      fieldHandle.setValue(newValue)
+      const newValue = Number(inputValue) + step
+      onInputValueChange(newValue)
     } else if (action === 'decrement' && !decrementDisabled) {
-      const newValue = Number(fieldHandle?.value) - step
-      fieldHandle.setValue(newValue)
+      const newValue = Number(inputValue) - step
+      onInputValueChange(newValue)
     }
 
     if (actionPressAutoFocus) {
@@ -74,10 +76,10 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
         setIsFocused(false)
       }, timeoutActionFocus)
     }
-  }, [fieldHandle?.value, incrementDisabled, decrementDisabled])
+  }, [inputValue, incrementDisabled, decrementDisabled])
 
   const checkValue = useCallback((newValue: number = null, withLimits = true) => {
-    const value = newValue ?? fieldHandle?.value
+    const value = newValue ?? inputValue
 
     if (withLimits) {
       if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
@@ -92,19 +94,19 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     }
 
     if (value >= MAX_VALID_DIGITS) {
-      fieldHandle.setValue(MAX_VALID_DIGITS)
+      onInputValueChange(MAX_VALID_DIGITS)
       return MAX_VALID_DIGITS
     }
 
     return value
-  }, [fieldHandle?.value])
+  }, [inputValue])
 
   const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    fieldHandle.setValue(checkValue())
-    validation.onInputBlurred()
+    onInputValueChange(checkValue())
+    validation?.onInputBlurred?.()
     setIsFocused(false)
     onBlur?.(e)
-  }, [validation.onInputBlurred, onBlur, checkValue])
+  }, [validation?.onInputBlurred, onBlur, checkValue])
 
   const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     clearActionTimeoutRef()
@@ -115,7 +117,7 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
   const handleChangeInput = useCallback((text: string) => {
     const value = checkValue(parseValue(text), false)
 
-    fieldHandle.setValue(value)
+    onInputValueChange(value)
 
     return value
   }, [checkValue])
@@ -125,11 +127,11 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     if (onChangeMask) onChangeMask(masked, unmasked)
   }, [onChangeMask, handleChangeInput])
 
-  const hasValue = TypeGuards.isString(fieldHandle?.value)
-    ? (fieldHandle?.value as string).length > 0
-    : !TypeGuards.isNil(fieldHandle?.value)
+  const hasValue = TypeGuards.isString(inputValue)
+    ? (inputValue as string).length > 0
+    : !TypeGuards.isNil(inputValue)
 
-  const hasError = validation.showError || forceError
+  const hasError = validation?.showError || forceError
 
   return {
     isFocused,
@@ -148,5 +150,7 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     decrementDisabled,
     min,
     max,
+    inputValue,
+    onInputValueChange,
   }
 }

package/src/components/PlacesAutocomplete/index.tsx

@@ -99,10 +99,6 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
     <View style={styles.wrapper} {...rest}>
       <TextInput
         style={compositionStyles.input}
-        onChangeText={(value) => {
-          setIsTyping(true)
-          handleChangeAddress(value)
-        }}
         onBlur={() => {
           setIsFocused(false)
         }}
@@ -111,6 +107,10 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
         }}
         {...textInputProps}
         value={hasCustomValue ? textInputProps?.value : address}
+        onValueChange={(value) => {
+          setIsTyping(true)
+          handleChangeAddress(value)
+        }}
         rightIcon={rightIcon}
       />
       {isTyping ? (