This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Inline Edit Todo Items in a React Native ListView

6:18 React lesson by

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders

Avatar
Carlos

There's an issue with that editing feature, when you add 2 or more items, you try and edit the second or lower ones, the keyboard always close itself, what happens is that in a previous video you set the ListView onScroll to dismiss the Keyboard, if that's the case, when you edit the second or lower item, the scroll happens in order to open space for the item, and the keyboard always dismiss.

Maybe it only happens to me because i'm in Android with a lower size virtual device, but might be worth reviewing such case in your app.

PD: The reason the first one doesn't trigger is because there's nothing to scroll if you edit the first item in the list.

In reply to egghead.io
Avatar
Carlos

Actually if you add enough items to force the app to scroll when the keyboard opens the issue i mentioned before will still happen, say there are enough items that the last ones are placed where the keyboard will be when open, you try to edit one of them, the keyboard shows and in order to keep focus the ListView scroll, then the keyboard is closed in consequence.

In reply to egghead.io
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?