I have a TextInput on an Overlay Component in my app. When the keyboard is opened, half the screen gets covered, including the TextInput. I did try the KeyboardAvoidingView component, but couldn't get the TextInput to be fully visible. I need some suggestion on how to move the components inside the Overlay, when the keyboard is enabled in react-native
it wld have been easier to answer if u had posted code, but still
keyboardAvoidview solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard
just add this under your largest view
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
all ur ui inside this...
</KeyboardAvoidingView>
There is a prop called keyboardVerticalOffset,
that is the distance between the top of the user screen and the react native view.
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled keyboardVerticalOffset={offsetValue}>
... your UI ...
</KeyboardAvoidingView>;
Value for keyboardVerticalOffset may be non-zero in some use cases. but for your case try to add some value.
If you want to know more about handling keyboard in react native check this
Related
Sorry if this has been asked previously, but I hadn't found a working answer.
I'm currently working on a simple app. The main screen features a vertical flatlist with user generated content. The header, though, is transparent and has a predefined height, so the user can see a background image; when the flatlist is scrolled, it covers this background image, which remains static. The goal is to give the user the feeling that they're covering this image, similar to the pull-up element on google maps, which covers the map to show more data.
This would be a simplified example of the current, working code, so you get the gist of it:
const HomeComponent = () => (
<View>
<ImageBackground source={require('../assets/background.png')}>
<Flatlist
headerComponent={<TransparentHeaderOfPredefinedHeight/>}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item}/>
</ImageBackground>
</View> )
Up until here, everything is fine. The thing is, I would like to add a touchable button on this background, that is subsequently covered when the Flatlist is scrolled.
Here's the issue. I have no way to make the touch event propagate through the flatlist's header and reach this button. I tried using pointerEvents='none' and 'box-only' in different combinations, but whenever I was able to touch that button, I was in turn unable to scroll or to interact with the flatlist elements.
I also tried pushing the background image and button on the flatlist header, and using the vertical offsite of the flatlist scrolling to move these elements and simulate the flatlist scrolling over it. Unfortunately, the result was absolutely atrocious, lacking any kind of smoothness.
Does anyone know how I could implement this functionality? I can provide more info if needed. Thank you in advance!
Though the keyboard popup for the first time, when I navigate to the same interface text input field is focused but the keyboard is not popup in React Native Application.
I used autoFocus={ true } but I can't see the keyboard. How to resolve this.
You can use 'push' instead of 'navigate'. When navigating to the same interface componentWillMount/componentDidMount is not loading again. That may be the issue. Try with this.
Refer react navigation documentation.
React Navigation Documentation
If you are using ScrollView, add keyboardShouldPersistTaps="always"
<ScrollView keyboardShouldPersistTaps="always">
------
</ScrollView>
I'm creating a chat screen in React-Native, and the issue which I'm confronting now with, is that when I enable the keyboard, the content doesn't move as intended. I tried several things, but neither of them didn't work as expected.
Here is a screen where I've marked the content which has to be moved up when the keyboard is present :
Firstly, I've tried the next structure
<ScrollView scrollEnabled={false} keyboardShouldPersistTaps="handled">
<KeyboardAvoidingView behavior="position">
/...The rest of the content.../
</KeyboardAvoidingView>
</ScrollView
and here's the screen
as seen in the image, the whole container is "pushed" up by the keyboard, and when the keyboard disappears, the content returns to it's normal position.
In the second case, I've tried to assign to the behavior parameter of KeyboardAvoidingView the value "padding", but this didn't help, the keyboard just was going over the screen, and the content didn't modify at all
And at least, I've tried to assign to the same behavior the value "height", and it seemed to work as I wanted, but the problem appeared when the keyboard was gone - the moved content didn't moved to it's initial position. Here are the screens :
Problem resolve, I had just to put the last container (the one where is the input placed) in a KeyboardAvoidingView with behavior="padding"
So I have some input fields, and as I fill text in one field, and click on another, the keyboard hides and I have to click on the field again to make the keyboard show again.
Is there a way to fix this?
Thanks
In scroll view you should add keyboardShouldPersistTaps property. Try with handled or 'always' values. Here is the link of react native documentation
<ScrollView keyboardShouldPersistTaps='handled'>
//TextInputs ...
</ScrollView>
How can I get the actual screen height when virtual keyboard shows up? I need to readjust the view height dynamically when keyboard is active and in-active.
<View style={styles.container}>
<TextInput
autoFocus={true}>
/>
<View style={styles.content}></View>
<View>
When the keyboard is present and dismissed how can I calculate the active screen height,
content:{ height: ?}
Use this KeyboardAwareScrollView instead of KeyboardAvoidingView
keyboard avoiding view doesn’t quite work with the last element, and setting padding/margin didn’t work. So you have to add a new element to bump everything up a few pixels.
Try with KeyboardAwareScrollView which makes the scrolling interaction pretty seamless and gives a lots of other benefits like resetScrollToCoords and manage height calculation by its end.
KeyboardAvoidingView
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.
SOURCE:
https://facebook.github.io/react-native/docs/keyboardavoidingview.html#relativekeyboardheight