fix: TextInput loses focus inside Banner on iOS only

[abdulbasithqb]

Motivation

TextInput loses focus every type a character is entered and keyboard is dismissed. This happens only on iOS real device.
On android real device it works as expected.

Related issue

issue #4178

Result

1. Banner with TextInput	2. Banner with Text

[callstack-bot]

Hey @abdulbasithqb, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

It may break a layout for users who pass a component as a child into the Banner component

[lukewalczak]

It may break a layout for users who pass a <Text /> component as a child into the Banner component:

     <Banner
        onLayout={handleLayout}
        actions={[
          {
            label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,
            onPress: () => setUseCustomTheme(!useCustomTheme),
          },
          {
            label: 'Fix it',
            onPress: () => setVisible(false),
          },
        ]}
        icon={require('../../assets/images/email-icon.png')}
        visible={visible}
        onShowAnimationFinished={() =>
          console.log('Completed opening animation')
        }
        onHideAnimationFinished={() =>
          console.log('Completed closing animation')
        }
        theme={useCustomTheme ? customTheme : defaultTheme}
        style={styles.banner}
      >
        <Text>
          Two line text string with two actions. One to two lines is preferable
          on mobile.
        </Text>
      </Banner>

before	after

[abdulbasithqb]

It may break a layout for users who pass a <Text /> component as a child into the Banner component:

     <Banner
        onLayout={handleLayout}
        actions={[
          {
            label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,
            onPress: () => setUseCustomTheme(!useCustomTheme),
          },
          {
            label: 'Fix it',
            onPress: () => setVisible(false),
          },
        ]}
        icon={require('../../assets/images/email-icon.png')}
        visible={visible}
        onShowAnimationFinished={() =>
          console.log('Completed opening animation')
        }
        onHideAnimationFinished={() =>
          console.log('Completed closing animation')
        }
        theme={useCustomTheme ? customTheme : defaultTheme}
        style={styles.banner}
      >
        <Text>
          Two line text string with two actions. One to two lines is preferable
          on mobile.
        </Text>
      </Banner>

before after

any suggestion to resolve this issue ?