React Native: include a pattern for linking labels with text inputs

[pandu-supriyono]

Hi,

Thanks for these resources. I have little experience with building native apps so this definitely comes in handy.

I'm trying to find an idiomatic and isomorphic way of assigning labels with associated inputs. In the page input-label.md it is suggested to link a <Text> with <TextInput>, but no pattern is provided on how to actually achieve this.

Additionally, React Native Paper is provided as an example but for a beginner it is difficult to figure out how they implemented their <TextInput> in their source code. I am also critical of this particular example because of their use of floating input label for reasons illustrated in this article by Adam Silver (as well as other sources online).

I am currently looking online in other projects' source codes on how this is achieved and experimenting/testing myself. I'm definitely willing to contribute to this page once I have a better idea if you agree that this is something we might want to add in the documentation.

For now: do you have any extra resources or tips with regards to linking labels with text inputs in React Native?

EDIT: my naive implementation (React Native >= 0.71) would be something along the lines of

function AccessibleInput({ label, name, ...rest }) {
  <View>
    <Text aria-hidden>{label}</Text>
    <TextInput accessibilityLabel={label} {...rest}/>
  </View>
}