Native TextInput does not work properly when wrapped with Factory

[acollazomayer]

Describe the bug When using Factory creator for native text input. When the input gets focused it automatically gets unfocused

To Reproduce 1 - Use the text input factory example. Click on the text input and the input get unfocused automatically.

Expected behaviour Text input shouldn't be unfocused.

CodeSandBox/Snack link I am using the example provided in the docs. https://docs.nativebase.io/next/nativebase-factory#using-ref

Screenshots If applicable, add screenshots to help explain your problem.

https://user-images.githubusercontent.com/9849229/145554317-910b0ce2-3d58-424d-8e33-0b380ceae586.mp4

Platform

• NativeBase version [3.2.2]
• Device: [Simulator]
• OS: [15.0]
• Browser [e.g. stock browser, safari]
• Browser version [e.g. 22]
• React Native version [0.66.3]
• Expo sdk version [e.g. 41]
• node [14.15.1]
• yarn [1.22.11]

Additional information

[acollazomayer]

I was able to make it work, mimicking part of the implementation of Factory

import React, {memo, forwardRef} from 'react';
import {TextInput} from 'react-native';
import {
  usePropsWithComponentTheme,
  useStyledSystemPropsResolver,
} from 'native-base';
import inputTheme from '../theme/components/input';

const MaskedInput = (props, ref) => {
  const calculatedProps = usePropsWithComponentTheme(inputTheme, props);
  const [style, restProps] = useStyledSystemPropsResolver(calculatedProps);

  return <TextInput ref={ref} style={style} {...restProps} />;
};

export default memo(forwardRef(MaskedInput));

I think that there is something not working properly on the implementation of Factory that is making components unmount and mount again. I did not have time to investigate further. But it also happened something similar to other components

[Fifaldi]

We have similar issue, on Android the Native Base Input wrapped in HOC with Factory export default Factory(ContainerWithButton); results in the keyboard being automatically dismissed after typing a character. Although this seems to be more happening on Android than on iOS Simply removing the Factory wrapper from the HOC component resolves issue so agree it has to be some problem with Factory itself.

<ContainerWithButton
            onPress={() => navigation.navigate('onboarding')}
            buttonText={t('next', {ns: 'common'})}
            isButtonDisabled={!selectedLanguage}>
     <Input/>
</ContainerWithButton>

This example works only if we remove the Factory wrapper from the HOC component given above.

[SikoraKam]

I also saw problems after using Factory in wrapper and then Input from Native Base

[md-rehman]

@acollazomayer I tried to reproduce the issue but was not able to. It'll be really helpful if you'll share a snack, as the issues are quite visible in the video.

---

Also adding the snack I used to try to reproduce it but was unable to

[dyrkow]

I have same issue, my component example

import { TextInputMask } from 'react-native-masked-text';
import { Factory } from 'native-base';

export const MaskedInput = Factory(TextInputMask);

And component usage code example

<MaskedInput
    w="80%"
    type='custom'
    keyboardType="numeric"
    options={{ mask: '+7 (999) 999-99-99' }}
    value={phone}
    onChangeText={onChangeText}
/>

When i enter number, i have focus out how in video. Without factory method, all right

[dylan-westbury]

Hi @MD-REHMAN ,

I have a snack of the issue.

When using onChangeText and / or value, this is when the input automatically unfocuses after each keypress.

https://snack.expo.dev/@apptractive/factory-rn-textinput-broken

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dylan-westbury]

Not stale