React Native know issues

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