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 have a ScrollView which has TouchableOpacity and TextInput inside.
When I press on them, nothing happens.
I found the solution for TouchableOpacity and it was to add rejectResponderTermination={true} and it worked.
For example:
<TouchableOpacity
onPress={cameraHandler}
rejectResponderTermination={true}
>
However this does not work for TextInput.
<TextInput
onChangeText={updateText}
value={value.text}
rejectResponderTermination={true}
/>
I would like to use the functionality of rejectResponderTermination in TextInput. Any suggestions would be much appreciated.
rejectResponderTermination is not a prop of TextInput. Try removing it.
<TextInput
onChangeText={updateText}
value={value.text}
/>
A list of props can be found in the official documentation.
If you still want the functionality of rejectResponderTermination, currently you would have to build your own.
This SlideTextInput is an example of how you would do it.
I have a View that renders dynamic cards from an API
<View>
<Card>1</Card>
<Card>2</Card>
<Card>3</Card>
</View>
Is there a way to do a pull-to-refresh on this view?
Make a call to the server and refresh this view without a FlatList component?
React-Native's RefreshControl can only be applied to a ScrollView. (Note that a FlatList is actually a ScrollView).
So wrap your <Card />'s in a <ScrollView> rather than a <View> and you can apply the RefreshControl to it as seen in the docs.
Here is an example Snack for you: https://snack.expo.io/Hk606OYKM
I'm new to React Native, so am probably asking something very obvious, but please help.
I have a view wrapped in a touchable, so that the whole area responds to tapping. Then have a ScrollView nested inside the view. The overall structure is something like this:
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View>
<ScrollView>
<Text>Hello, here is a very long text that needs scrolling.</Text>
<ScrollView>
</View>
</TouchableWithoutFeedback>
When this compiles and runs, the tapping is detected, but the scroll view doesn't scroll at all. I made the above code short and simple, but each component has the proper styling and I can see everything rendering fine and the long text is cutoff at the bottom of the ScrollView. Please help.
Thank you!
This is what worked for me:
<TouchableWithoutFeedback onPress={...}>
<View>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
// Scrollable content
</View>
</ScrollView>
</View>
</TouchableWithoutFeedback>
The onStartShouldSetResponder prop stops the touch event propagation towards the TouchableWithoutFeedback element.
I'm using this structure it's working for me:
<TouchableWithoutFeedback onPress={() => {}}>
{other content}
<View onStartShouldSetResponder={() => true}>
<ScrollView>
{scrollable content}
</ScrollView>
</View>
</TouchableWithoutFeedback>
You can have a scrollView or FlatList inside a TouchableWithoutFeedback. Tho you shouldn't but some times you have no other choice to go. Taking a good look at this questions and answer validates that.
close react native modal by clicking on overlay,
how to dismiss modal by tapping screen in react native.
For the Question, The only way you can make it work (atleast that i know of), or the simplest way is to add a TouchableOpacity around Text in your code like this,
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View>
<ScrollView>
<TouchableOpacity>
<Text>Hello, here is a very long text that needs scrolling.</Text>
</TouchableOpacity>
<ScrollView>
</View>
</TouchableWithoutFeedback>
Note: TouchableOpacity is a wrapper for making Views respond properly to touches so automatically you can style it the way you would have styled your View Component then set some of its special props to whatever you want e.g activeOpacity etc. Moreso you can use TouchableHighlight it works, but it receives one child element i.e you enclose all your component inside a parent one.
I'm using this structure it's working for me:
<TouchableOpacity>
{other content}
<ScrollView>
<TouchableOpacity activeOpacity={1}>
{scrollable content}
</TouchableOpacity>
</ScrollView>
I found that for my situation the other examples did not work as they disabled the ability to click or disabled the ability to scroll. I instead used:
<FlatList
data={[{key: text1 }, { key: text2 } ...]}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={this.onPressContent}>
<Text style={styles.text}>{item.key}</Text>
</TouchableWithoutFeedback>
)}
/>
I happend to need to multiple chunks but you could use single element in the data array for one piece of text.
This let the press event to fire as well as let the text scroll.
Trying to use a ScrollView component inside a TouchableWithoutFeedback component can cause some unexpected behavior because the TouchableWithoutFeedback component is designed to capture user gestures and trigger an action, but the ScrollView component is designed to allow users to scroll through content.Here is what the official docs say
Do not use unless you have a very good reason. All elements that
respond to press should have a visual feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.
Thats write , you cannot have a scroll view inside the TouchableWithoutFeedback, it the property of react native that it will disable it, you can instead have your scroll view outside the TouchableWithoutFeedback tab and add the other contents that you want upon the click inside a view tag.
You can also use the Touchable Highlights instead, if the TouchableWithoutFeedback does not works.