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>
Related
I know there are a lot of issues opened with this question but I couldn't find any solution that work for both IOS and Android. The idea is to have ScrollView That can be scrolled to both directions (vertical and horizontal). At the moment my code looks like that:
<ScrollView contentContainerStyle={{height: 1000}}>
<ScrollView horizontal contentContainerStyle={{width: 1000}}>
// content
</ScrollView>
</ScrollView>
It works fine for IOS but no luck with Android.
For ScrollView inside another scrollView you have to use nestedscroll prop in scrollview to deal with the scrolling.
<ScrollView contentContainerStyle={{height: 1000}}>
<ScrollView horizontal contentContainerStyle={{width: 1000}} nestedScrollEnabled={true}>
// content
</ScrollView>
</ScrollView>
Use the above code and it will work as expected....
I hope this helps...Thanks :)
I have an textInput and a button. While the textInput is focused, the keyboard comes up but if you tap the button with keyboard visible, first the keyboard disappears and then only you can tap button. Why is it? How can I make it work so that the button can be tapped with keyboard visible? The apps developed in android studio (android native) can get the click listener with keyboard visible. But in react native, it is not working. If you tap anywhere but button, then the keyboard should disappear, isn't it? But if you tap on the button with keyboard visible, the btn should receive the listener. I'm testing it in android devices.
P.S you can try it here: https://snack.expo.io/#codebyte99/addcomponents
<TextInput
placeholder={'Type smth'}
style={[{ borderBottomColor: 'gray', borderBottomWidth: 1 }]}
/>
<TouchableOpacity onPress={() => { this._onPressOut(); }}>
<Text>click here</Text>
</TouchableOpacity>
The scrollview contains a prop keyboardShouldPersistTaps which handles the keyboard tap behaviour inside a scrollview.
For your case give it as <ScrollView keyboardShouldPersistTaps='handled'>
Here is a expo link scrollview with keyboard
As an addition to #thakur-karthik answer:
It's very important to note that in the scrollview scenario, some oddity occurs when you have a scrollview in a react-native modal.
Just adding keyboardShouldPersistTaps={'always'} on the scrollview in the modal alone will not work.
If you have scrollviews in any ancestors, they must also have keyboardShouldPersistTaps={'always'} declared on their components
FYI: If you're using react-native-keyboard-aware-scroll-view, you need to do it like this:
<KeyboardAwareScrollView keyboardShouldPersistTaps="always">
ScrollView or Flatlist
The scrollview and Flatlist contain a prop keyboardShouldPersistTaps which handles the keyboard tap behavior inside a Scrollview when the keyboard is visible.
keyboardShouldPersistTaps= 'handled'
In case keyboardShouldPersistTaps is not working you can add the style to the FlatList or scroll, work for me, Becouse keyboardShouldPersistTaps was not working properly
{zIndex:1000}
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.
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
I'm using scrollView like this
<ScrollView style={{flex:1}}>
<Text />
<Some components />
<Webview />
</ScrollView>
And Webview has height and can scroll too. also webview should zoom in/out.
but when i try zoom in/out not really zooming properly.
after then, i realised scrollview interrupt pinching zoom.
So I added props in
<ScrollView scrollEnabled={this.state.isScrollEnabled} / >
then decide scroll if pinch event detect or not.
I searched about this issue, and was recommended to use PanResponder but i still dont know how to detect pinch Event...
Help me please.
(+) should be working Android and IOS both..
Use this library: https://github.com/kiddkai/react-native-gestures (it is using PanResponder). Wrap your ListView with Gesture View according to the docs, assign handler on pinch gesture, and in the handler decide if scrolling should be enabled or not for the list by changing the value of this.state.isScrollEnabled. That should work.