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

• 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

1 Answer 1

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