I am using KeyboardAvoidingView with ScrollView and TextInput. When the first few TextInput get focused, the keyboard appears and shifts the TextInput too high out of the screen.
I have tried putting the KeyboardAvoidingView as parent tag and ScrollView as child and vice versa. I've also played with props for KeyboardAvoidingView (keyboardVerticalOffset, behavior, etc). However, non of them worked. I have also tested react-native-keyboard-aware-scrollview package and did not work at all.
<KeyboardAvoidingView behavior={'position'}>
<ScrollView>
<TextInput/>
<TextInput/>
<TextInput/>
...
</ScrollView>
</KeyboardAvoidingView>
Expected behavior: When the input is located at the area, close to top, the keyboard must not shifts the screen up. (The distance between keyboard and the focused input must not be big)
You can change the props behavior={'position'} to behavior={'padding'}. In my case it solves the problem.
Related
In my app I used ScrollView and on my Android Phone(Redmi Note 7) it works as it should, I can scroll only when keybord is open and elemnts are under the keybord. But on the IOS device (IPhone 5S) screen can be scrolled even when keyboard isnt opened.I even dont know what is the reason.
Isn't your elements in ScrollView are longer than the screen height size?
You can check the element is over the screen by clicking Cmd+D Show Inspector and clicking bottom of the view.
Set your scrollview style to flex:1 then it should work.
We have essay way just use KeyboardAvoidingView on render ex:
I hope works well.docs
<ScrollView style={{flex:1}}>
<KeyboardAvoidingView behavior="padding">
{content}
</KeyboardAvoidingView>
</ScrollView>
TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it.
The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.
Related to https://github.com/facebook/react-native/issues/13745
Just add one props in your FlatList as below:
<FlatList
keyboardDismissMode={'none'}
.....
</FlatList>
Chears.!
Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.
<FlatList
data={...}
ListFooterComponent={renderYourFooter()}
/>
or
<FlatList
data={...}
ListFooterComponent={<View>
<TextInput/>
</View>}
/>
I am trying to translate a ball from one position (x1,y1) to another (x2,y2).
This translation is supposed to take place after clicking the ball.
I am using Animated.View which gets the current position of ball from a state variable. Inside this Animated.View I am wrapping the children using Touchable Opacity. I also looked around in internet and as per my understanding, this problem is related to absolute position of ball (initial and final position of ball is passed as a prop from parent)
<Animated.View style={this.state.position.getLayout()}>
<TouchableOpacity onPress={()=>console.log('clicked')}>
<View>
{this.props.children}
</View>
</TouchableOpacity>
</Animated.View>
I am unable to understand why onPress is not getting triggered and also want to know the solution to this problem. Thanks
Use TouchableOpacity from 'react-native-gesture-handler' instead of from 'react-native'.
import { TouchableOpacity } from 'react-native-gesture-handler';
Follow this post Cannot click TouchableOpacity in animated.view using React native
I'm building a Login form in react native with 2 textinputs, one for the mobile phone number and one for the password. The mobile phone input also has the possibility to select the country code with a dropdown, as shown in the following images:
From the main screen component, I insert the two textinputs as custom components:
<CustomInput type="phone" style={/* ... */} ...props />
<CustomInput type="password" style={/* ... */} ...props />
Then, in the phone CustomInput I position the dropdown with position: 'absolute' and custom top/left positioning. I also used the zIndex property in order to display the dropdown above the actual TextInputs, and it works great. The dropdown is composed by a list of
<TouchableOpacity onPress={/* do stuff */}>
<Text>text</Text>
</TouchableOpacity>
While there are no problems on iOS, on Android the buttons that overlaps with the password textinput are not tapped, i.e. when I actually tap them, the underlying TextInput gains focus instead on triggering the TouchableOpacity onPress property. I tried different combinations of zIndex without success.
Is there any possible workaround for this issue, like forcing the tap priority of elements positioned one over the other?
I have a code like this:
<View>
<View></View>
<ScrollView>
<View>
<TextInput/>
</View>
</ScrollView>
<View></View>
</View>
How can I handle it to response correctly to keyboard?
Both android and ios???
i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show
Your question is really unclear, but what I think you need is KeyboardAvoidingView.
It's a built-in React Native component that resizes based on the keyboard height.
To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView
https://facebook.github.io/react-native/docs/keyboardavoidingview
Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs