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
Related
I'm building an app in React Native, aiming to be used on iOS and in the future Android.
To start, I'm trying to build a simple UI: a header at the top (avoiding the notch), a footer at the bottom, and a multiline input that expands to fill however much vertical space is left. I would like the footer to move up when the keyboard is showing, so that it's right above the keyboard.
In terms of components, I have:
<SafeAreaView>
<KeyboardAvoidingView>
<Header />
<View>
<TextInput multiline numberOfLines={#}/>
</View>
<Footer />
</KeyboardAvoidingView>
</SafeAreaView>
I'm having trouble accomplishing the desired UI though. Problems include:
I've tried giving Header and Footer flexGrow of 0 and the middle View a flexGrow of 1, but it doesn't cause the middle View to grow vertically
Ideally I would not have to specify how many lines the multiline TextInput is - the user can just keep typing, and if the contents get super long, that input section will scroll
On the web view, I see the middle View and TextInput, but on my phone (via Expo Go), the middle View and TextInput are always completely collapsed unless I explicitly specify a height or flexBasis on one of the two.
Any pointers on what I'm missing?
I have a React Native View, that I would like to allow the user to refresh by pulling down, this View contains fixed content that fits on one screen without the need to scroll, and I have used flex to position the elements to utilised the hold screen.
A quick google tells me I need a RefreshControl, but it seems this must be used in conjunction with a ScrollView.
When I try to apply these two controls to my View I get undesired effects:
Scrolls bars that I don't need, although these can be disabled via props
Flex now responds in a different way, the flex items dont expand to the container, which makes sense because its a scrollable container.
Help :)
I would indeed reuse RefreshControl in ScrollView, instead creating a RefreshControl behavior yourself.
As you mentioned, scroll indicators can be hidden by setting the correct props. In addition it is possible to disable scrolling with the scrollEnabled flag.
A ScrollView uses a built-in content container that wraps all the views inside. You can set flex style props for this view as well.
<ScrollView contentContainerStyle={{flex: 1}}>
{/* child views */}
</ScrollView>
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
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"
I'm trying to get an element in a scrollview to always stay to the left of the screen. Kinda like the number rows in Excel. They stay to the left when scrolling horizontally but scroll also down when scrolled vertically. So far I tried animating the element by hooking up the onscroll element to it. It does work but it feels very choppy. It is fast but not fluid. Almost looks like the element is vibrating.
Are there any other techniques in react native to get the desired result? Here the important lines I'm using.
scrollPositionX: new Animated.Value(0),
scrollEventThrottle={16}
onScroll={Animated.event([{nativeEvent: {contentOffset: {x: this.state.scrollPositionX}}}] )}
<Animated.View style={[styles.times, {
transform: [{translateX: this.state.scrollPositionX}]
}]}>
...
</Animated.View>
A crude way to do it is to render the sticky columns outside of the horizontal ScrollView. Just make sure your stick and non sticky cells end up being the same height so everything lines up.
If you want to scroll vertically as well, wrap them both inside of another ScrollView.
<ScrollView>
<View>
// render the sticky cells
</View>
<ScrollView horizontal={true}>
// render the non sticky cells
</ScrollView>
</ScrollView>
The problem is that if you have a lot of rows, especially with more complex components within them, you'll have performance issues.
ListViews are better at handling lots of data, but I haven't found a way to make use of them for this scenario. You'd need one for both the sticky column and normal cells, and there's no way to keep them in sync without watching onScroll as you're doing.
I'm hoping someone has better way to do this though. I really need this functionality as well.