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):

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

2. Text wrapped in React.Fragment

<Bannervisible={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