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.
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.
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.
Related
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
I'm getting the oddest behavior on code that I didn't write (inherited from a colleague). I have never seen this before.
In React Native, when I click on one component's box, sometimes it jumps to the top of the component (it's wrapped by a Scrollview). Other times the view stays put, as it's supposed to. What could be causing this?
I have a form in my app that has a floating bar with buttons that animates into the view at the bottom of the window when the user makes any change to any of the data in the form. I have this bar rendering relative to the height of the window so it knows when the keyboard is open or closed and will attach to wherever the bottom of the view window is at any give time.
The issue I have is the form is wrapped in a KeyboardAvoidingView around the form with a behavior of padding and this all works great, however when I make my change and my floating button bar comes up, because the input is at the bottom of the window the bar now covers up the input I'm typing in.
I haven't been able to find a way to fix this yet. I tried disabling the KeyboardAvoidingView I assume that maybe I need to somehow tell the view about this bar that's covering up part of the view but I'm not sure how I do that.
here is a snapshot of what this looks like for reference...
I have this use case which is a bit confusing compared to the norm , and Im not sure how to structure it. I have a screen (tabs) with 4 tabs .
The thing is that the contents of each tab (their screens) are actually in One big page, when scrolling down the page and it reaches the contents of Tab2 , the tab should change too to Tab2 (its not actually a screen change) .
Now initially I have used react-navigation and it's tab navigator. But here Im not sure if this should use tab navigator. The questions that arise to me (from the top of my head):
Q1) If we wrap the components (each tab's screen) in a parent one. How do we go about detecting where the scroll reached! (or something that notifies we are viewing contents of tab2 and so on...)
Q2) How can I handle the animation of the tabs (especially the line under them as shown in the image) to transition back and forth?
Q3) Is there a better way to do this! (better than my initial thoughts above)
Q1. You must use the TabNavigator to avoid the problem as you asking in Q1. So you don't need to worry about the Scroll.
Q2. I recommend using StyleSheet, create a CSS style for line bar then maybe you just need to call a function to set the CSS of current tab or use the navigation options.
Q3. TabNavigator is a good option here and it belongs to react-navigation.
TabNavigator
Animation example with custom function
--- Update ------
I have created an example project for you to solve the problem, I'm not sure if you're doing the same.
Check the Scroll.js, I added a function Callme that changes tabs when scroll reaches to end.
To detect the Scroll reaches to end or not, I have used the isCloseToBottom from another StackOverflow answer.
Follow the following link to Github project.
Change-Tabs-When-Scroll-End
Thanks
_Pradeep
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen