TextInput: read-only text that can't scroll on Android

Issue: On Android, a read-only multiline TextInput does not scroll. If the text is taller than the box, the rest is hidden and the user cannot drag to it. The same code scrolls fine on iOS.

<TextInput multiline readOnly scrollEnabled value={transcript} style={{ maxHeight: 150 }} />

Fix: a TextInput wrapper

We wrapped TextInput in one small component. When the field is multiline and read-only, it renders a ScrollView with a Text inside, in the same box. Otherwise it renders a normal TextInput.

import React from 'react' import { ScrollView, StyleSheet, Text, TextInput } from 'react-native' import type { TextInputProps, TextStyle } from 'react-native' // Android disables a read-only TextInput, and a disabled view can't scroll. // So read-only multiline text renders as a ScrollView + Text instead. export function TextArea(props: TextInputProps) { const { multiline, readOnly, editable = true, value, style, testID } = props if (!multiline || (!readOnly && editable)) { return <TextInput {...props} /> } const flat: TextStyle = StyleSheet.flatten(style) ?? {} const { padding, paddingVertical, paddingHorizontal, paddingTop, paddingBottom, paddingLeft, paddingRight, color, fontSize, fontFamily, fontWeight, lineHeight, textAlign, ...boxStyle } = flat return ( <ScrollView testID={testID} style={boxStyle} contentContainerStyle={{ padding, paddingVertical, paddingHorizontal, paddingTop, paddingBottom, paddingLeft, paddingRight, }} nestedScrollEnabled > <Text selectable style={{ color, fontSize, fontFamily, fontWeight, lineHeight, textAlign }}> {value} </Text> </ScrollView> ) }