javascript - React-Native multiline TextInput component: how to allow scroll when editable set to false - Stack Overflow

admin管理员组

文章数量:1397192

I'm currently building an app that allows a user to call API endpoints and display the JSON API response in an uneditable text input.

The issue I'm facing is when the keyboard is disabled I'm able to scroll inside the text input box but when editable is set to false and the keyboard doesn't show up then I'm unable to scroll inside the text input

<TextInput
    multiline={true}
    style={styles.multilineText}
    value={JSON.stringify([this.state.apiResponse], null, '\t')}
    editable={false}
    />

Please help

I'm currently building an app that allows a user to call API endpoints and display the JSON API response in an uneditable text input.

The issue I'm facing is when the keyboard is disabled I'm able to scroll inside the text input box but when editable is set to false and the keyboard doesn't show up then I'm unable to scroll inside the text input

<TextInput
    multiline={true}
    style={styles.multilineText}
    value={JSON.stringify([this.state.apiResponse], null, '\t')}
    editable={false}
    />

Please help

• javascript
• android
• reactjs
• react-native
• mobile

Share Improve this question Follow edited Feb 8, 2019 at 12:05 Firdous nath 1,58711 gold badge1717 silver badges4040 bronze badges asked Feb 7, 2019 at 22:20 Chris MarshallChris Marshall 80822 gold badges1313 silver badges3131 bronze badges 3

• 1 If you want to display non editable text , why don't you use simple Text ponent inside ScrollView ! – Firdous nath Commented Feb 8, 2019 at 11:27
• Very good point and a massive oversight on my part done the trick, cheers – Chris Marshall Commented Feb 8, 2019 at 19:56
• I am glad to help, you may upvote my ment :) – Firdous nath Commented Feb 9, 2019 at 5:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Making the text input to scroll in react native, you have to add numberOflines to it, this is the property which takes the value as int, how much lines you want to display in text input you have to provide the number and after that, the text input will get scroll property automatically.

<TextInput
        {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
        editable = {false}
        multiline = {true}
        numberOfLines={3}
      />

本文标签：