I have a component that is basically a TouchableOpacity with a few TextInputs wrapped inside.
It has two states: expanded and unExpanded. When it's unExpanded, the TextInputs are disabled, and by clicking the TouchableOpacity it transits to the expanded state, where TouchableOpacity is disabled and TextInputs are editable.
However, the disabled TextInputs are taking away the clicks. TouchableOpacity is only clickable in the empty space. How can I make the entire TouchableOpacity to be clickable?
There is a prop in react-native that controls whether or not a View can be the target of touch events. Give your disabled TextInput's pointerEvents={'none'} prop like this;
<TextInput pointerEvents={'none'} />
Related
I am working with address select screen, and I want when I click to select the keyboard will disappear and the item I clicked will be "selected" but now when I select it just disappear the keyboard and the item I selected stays not in "selected" state but I have to click 1 more time.
enter image description here
Hope to get a solution from everyone!
Wrap your component inside ScrollView, or Use Pressable, like this:
import {Keyboard, Pressable} from 'react-native'
And after that wrap your component like this:
<Pressable style={{flex: 1}} onPress={Keyboard.dismiss}>
...rest of the components
Solution 2:
Use ScrollView: wrap your component inside ScrollView and use prop:
keyboardShouldPersistTaps
<ScrollView keyboardShouldPersistTaps="never" />
The same are already shared at this StackoverFlow
If you find this answer useful, please upvote, thanks, writing from my Android on Vacations, Happy Coding ♥️
I have a Flatlist with Vertical Scrolling and inside each item of the Flatlist I have a SwipeListView from react-native-swipe-list-view.
Whenever I Swipe horizontally inside the SwipeListView, it gets cancelled if i also start scrolling vertically and then it starts vertically scrolling the Flatlist. I tried using useState to manage the scrollEnabled but this only works when the User slowly slides inside the SwipeListView. With increased velocity there are messed up animations. Also i feel like there must be a cleaner way of achieving this. Anyone know a way to basically disable FlatList scroll while scrolling inside of child component?
For starters, replace react-native-swipe-list-view with the swipable component that react native gesture handler exports. This is far more performant as it uses the UI thread to perform all animations. You can then import Flatlist as well from react-native-gesture-handler.
Generally, things should work as is. But if there is any glitchy behaviour you can wrap flatlist with a gestureHandlerRootView and pass RNGH ScrollView to the flatlist renderScrollComponent.
import Swipeable from 'react-native-gesture-handler/Swipeable';
import {Flatlist} from 'react-native-gesture-handler'
import {
GestureHandlerRootView,
PanGestureHandler,
ScrollView,
} from 'react-native-gesture-handler';
export default function App(){
<GestureHandlerRootView>
<Flatlist renderItem={<Swipeable />}
renderScrollComponent={ScrollView}/>
</GestureHandlerRootView>
}
You can try implementing the swipeableRow which can be used to disable scrolling in flatlist.
disableScroll() {
this.list.getScrollResponder().setNativeProps({
scrollEnabled: false
})
}
enableScroll() {
this.list.getScrollResponder().setNativeProps({
scrollEnabled: true
})
}
Then in your place of your swipeable component, add this:
<SwipeableRow onSwipeStart={disableScroll} onSwipeEnd={enableScroll} />
Also you can try adding this to the FlatList
scrollEnabled={false}
I have a very simple TextInput component on a screen like and an onEndEditing method like so:
<TextInput
style={Styles.input}
placeholder='testing placeholder'
placeholderTextColor={Colors.gray}
onEndEditing={this.onEndEditing}
selectionColor={Colors.darkCursor}>
</TextInput>
onEndEditing = async (event): Promise<void> => {
console.log('in update');
};
It is inside of a FlatList which is wrapped in a KeyboardAvoidingView.
On Android, when the TextInput is tapped on and focused, if the onscreen keyboard pops up and overlaps the input, the input will lose focus and must be tapped on again. However, if the keyboard DOES NOT overlap the input, the input will keep its original focus. This does not happen on iOS.
I'm noticing that the onEndEditing method is called when the input loses focus from the keyboard overlap.
Update: Wrapping the FlatList in a ScrollView fixes it for whatever reason, but obviously that is not a good solution.
When the keyboard is visible, I want to be able to press on one of the cells without having the keyboard hide first. Ideally it would be pressed and the keyboard hides after.
I have tried to set the address cell component's onStartShouldSetResponder to true and that had no effect.
<Pressable
onStartShouldSetResponder={() => true}
...
Is there something I am missing with how touch gestures are handled in React Native?
Adding keyboardShouldPersistTaps="always" to the FlatList component that renders the address cells seemed to solve this issue on iOS (have not tested on Android).
<FlatList
keyboardShouldPersistTaps="always"
...
/>
Focussing of textinput of last item in flatlist appears keyboard but immeadiately keyboard disappears. In order to solve this,using a property removeClippedSubviews={false} of flatlist fixes this issue but it causes to another issue i.e,
Whenever an item is focussed aleardy in flatlist and tries to scrolling up the items, items are scrolling upto pagination limit and then right after items are scrolling down to the item that is focussed already of flatlist(focussed item appears on top of flatlist interms of visibility).Since it is not allowing scrolling up further.
Is there any property or workaround to fix these two issues? Do anyone got this issue? please provide solution if there is any?
Flatlist without "removeClippedSubviews={false}" property, scrolling is fine but for focussing of textinput of last item of flatlist causes keyboard appears and disappears.(keyboard should not disappear)
2.Using SafeAreaView, keeping flatlist in scrollview are also not working.
<FlatList style={styles.flatListSection}
keyExtractor={(item, index) => index.toString()}
data={this.state.serverData}
renderItem={this.iterateFlatListItem}
ItemSeparatorComponent={ () => this.seperatorComponent() }
ListFooterComponent={this.renderFooter.bind(this)}
onEndReachedThreshold={0.5}
onEndReached={()=>this.handleLoadMore()}
keyboardShouldPersistTaps='always'
extraData={this.props}
ref={ (r) => this.refFlatlist=r }/>
Scrolling up should work without scroll down automatically when textinput is focussed
Focus of text input of last item of flatlist, keyboard should not diappear once it appears unleass we dismiss it manually