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 ?

[seb-zabielski]

The problem with broken layout if we pass <Text> as child can be fixed by adding style to the <View> same as <Text> has: style={styles.message}.

There are other potential cases where changes from this pull request might cause error for the users that already using Banner component:

1. More than one string/Text child (children as array):

<Banner visible={visible}>
  first child
  <Text>second child</Text>
</Banner>

2. Text wrapped in React.Fragment

<Banner visible={visible}>
  <>some text</>
</Banner>

Potential solutions that come to mind are either to check each child and wrap the strings in Text, or to treat this as a breaking change, but then it would not be a fix, but a major change