TextInput broken with writingDirection

説明

Description

TextInput UI was broken with writingDirection, both ltr and rtl. It will display correctly if we focus the input

import { TextInput, View } from 'react-native'

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, paddingTop: 50, backgroundColor: '#FFF' }}>
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <TextInput
          value={
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit morbi nisi aptent condimentum nisi fringilla rutrum sociis senectus ac. Torquent mauris risus ultricies aenean vitae erat mollis congue dui mus'
          }
          placeholder='Enter your text here'
          numberOfLines={1}
          multiline={false}
          style={{
            borderWidth: 1,
            borderColor: 'black',
            borderRadius: 5,
            alignSelf: 'stretch',
            writingDirection: 'rtl',
            paddingHorizontal: 2,
            height: 40
          }}
        />
      </View>
    </View>
  )
}

Steps to reproduce

Use the code snippet above

React Native Version

0.81.5

Affected Platforms

Runtime - iOS

Output of `npx @react-native-community/cli info`

% npx @react-native-community/cli info
error: unknown command 'info'
(Did you mean init?)

Stacktrace or Logs

none

MANDATORY Reproducer

https://github.com/maphongba008/input-writing-direction-issue

Screenshots and Videos

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。

着手することを issue にコメントします — 二人が同じ作業をするのを防げます。

リポジトリをフォークし、ブランチを切って変更します。

issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、iOS 上の React Native 0.81.5 で、提供された TextInput の例を使用し、writingDirection の ltr と rtl の両方の値をテストして、https://github.com/maphongba008/input-writing-direction-issue の必須再現手順を実行します。入力がフォーカスを受け取る前に、フォーカスを当てることに依存せずテキストが正しく表示されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック

react-native

領域

mobile

issue の種類

バグ

難易度

4/5

見積もり時間

3〜5日

活発さ

停滞

明瞭さ

おおむね明確

初心者へのやさしさ

38/100

説明