Focus Reset Issue When Loading More in FlatList

[ethnbyte]

Hey! I’m using react-native-external-keyboard with a FlatList, and I ran into a small issue.

When I load more items (like in pagination), the keyboard focus jumps back to the top instead of staying where it was before. So if I’m at item 10 and load more data, the focus goes back to item 0 instead of continuing from item 10.

Is there any way to keep the focus on the last item after loading more? Or maybe a feature that could help with this?

Thanks a lot! Love the library — it’s super helpful!

[ethnbyte]

Plz reply sir

[ArturKalach]

Hello @ethnbyte,

Sorry for the delay in getting back to you; I've been really busy lately.
Regarding the issue, could you specify the platform and, if possible, provide an example? That would be really helpful for the investigation.

I believe the simplest option could be using autoFocus, as it should automatically move focus to the component when it appears. Alternatively, you could try maintaining focus on the previous element, but it's difficult to say for certain without an example. The behavior can vary significantly between platforms.
I recall a similar issue with a screen reader, where the simplest solution was to set focus on render.

Regards,
Artur Kalach

[ethnbyte]

Hi @ArturKalach , first of all, thank you for the reply and for creating this awesome library!.

I’ve noticed a bug while using react-native-external-keyboard in my app. I’ve added pagination to a FlatList, so when I scroll and reach the end, it loads more items. But during the loading of new data, keyboard navigation (up/down arrow keys) stops working.

Here’s a video showing the issue:

5_6062190830423118275.mp4

Setup:

React Native version: 0.77.0

react-native-external-keyboard version: 0.5.4

Platform: Android (Emulator + Release build — same issue)

Steps to Reproduce:

1. Use FlatList with pagination (load more on scroll).

2. Try navigating with keyboard arrows.

3. When it starts loading more items, keyboard input stops responding until the load is finished.

Expected behavior: Keyboard navigation should work even while loading new data.

Actual behavior: Navigation stops responding during pagination loading.

Let me know if there's a workaround or if this can be fixed in the library.

Thanks again!

[ethnbyte]

Kindly take a look, sir

[ArturKalach]

Hello @ethnbyte,

I just verified the issue you described, and it has been reproduced on both FlatList and ScrollView. Unfortunately, this behavior is related to the default rendering system of React Native, where all UI/JS events are blocked during rendering. You can observe this behavior by logging the onPress event of the default Pressable. Presses will be ignored while the rest of the list is still rendering.

This library uses the default React Native styling system and will behave similar to standard React Native code. The only viable solution is to use native code to handle styles directly on the native side. However, this approach may require additional knowledge of the React Native layout system (Yoga) and code generation (codegen).

---

I believe there are a couple of options to resolve the issue:

• Optimize the component's rendering: The issue may arise from a heavy rendering process. Ensuring optimized rendering might reduce the "locking" problem during rendering.

• Implement a container with styles on the native side: Handling expected styles directly on the native side could mitigate the issue. However, this requires knowledge of native code and the architecture of React Native.

• Provide customized styling on the native side: Similar to the previous option, but this approach allows for more customization by storing and applying specific styles directly on the native side.

---

Honestly, this is a tricky issue related to React Native, and I don’t plan to work on it further. I would suggest trying different libraries with list rendering optimizations. Alternatively, you can use a loader or skeleton screen to mask the delays.

Regards,
Artur Kalach

[ArturKalach]

I just checked how FlashList works, and it could be a solution. Could you check if @shopify/flash-list works for you?

[ethnbyte]

Thanks for the follow-up, @ArturKalach! 🙌

I haven’t tried @shopify/flash-list yet, but it sounds promising — I’ll definitely test it out and see if it resolves the keyboard input issue during pagination.

Appreciate you taking the time to look into this again and suggest a possible solution. Will share results here once I’ve tested it 💯

Thanks again!