text input flickering react-native

Question

I have used text input in creating a search bar on the 'HomeScreen'. Whenever I click on the search bar, it takes me to the 'SearchScreen' where text input is focussed.
In both screens, I have placeholder "Search" in the text input. The problem I am facing is that the placeholder flickers whenever screens are changed. This happens all the time if/when text input is re-rendered.
I want the placeholder to remain static there for smooth transition between screens. Please let me know if you have any idea on how to erect it or if you have any suggested workaround.

score 0 · Answer 1 · answered Sep 05 '18 at 00:58

0

Take a look at this library Fluid Transitions. This library helps to create smooth transitions between screens and shared components. Thus, you can go from screen A to screen B maintaining you search bar input intact or at least keep it with a smooth transition.

Another idea is... Do you really need to move to another screen when focusing the search bar? Is it possible if you just create an SearchList component that "shows/hides" a FlatList (for example), when the user focus the search bar, it will change to another screen when the user clicks on a specific result.

answered Sep 05 '18 at 00:58

Pedro Simão

283
1
11

Thanks for the reply, I was on the idea to keep the search bar on one screen only and show/hide components as needed, but I wanted to keep the screens separate as there are some other customizations I'll be doing. I am using `react-native-router-flux` with `.replace(key)` so that the screen change animation does not show up. Everything works fine if I remove the placeholder from the text input in the search bar, all other components text, icon etc are fine, the flickering is only with the placeholder. – Pareksha Manchanda Sep 08 '18 at 11:58

score 0 · Accepted Answer · answered Sep 12 '18 at 20:26

I am using react-native-router-flux and here's some observation, previously I was using .replace() for switching scenes, this time I used .push(), customizing it to not show any animation and now search does not flicker when popping the search screen, however, it does flicker on pushing search screen onto the stack, seems like the re-render is causing flickering (as pop does not trigger a render but push does).

It's best to avoid using the placeholder as for now until the problem is sorted in react-native itself.

text input flickering react-native

2 Answers2