I'm using new pressable component of react native thinking that it's easy to add ripple effect to it.
But, I found that the ripple effect is being triggered only on long press.
i.e To see the ripple, I need to touch the button for atleast 120ms to 150ms. a rough guess.
I tried to recreate the issue on snack.expo.io but i'm getting Minified React error #130; I think snack won't support pressable.
I didn't found answer anywhere. And there is a active issue on github about this. But no where I found any workaround for this issue.
So, If anyone has a workaround for this kindly share here as it will help so many like me.
This is the code to add pressable with ripple effect
<Pressable
style={styles.buttonStyle}
android_ripple={{color: 'black', borderless: true}}>
<Text style={styles.buttonText}>Login</Text>
</Pressable>
I just explored different links followed by the GitHub link you provided and finally found a workaround.
Accordingly, you just have to add a prop onPress={() => {}} on your code even if you don't use it.
This will solve the ripple delay problem.
Related
I have a screen which contains a list of items that is being shown using flatlist, th flatlist is as below :
<FlatList
scrollEnabled
removeClippedSubviews
windowSize={21}
stickySectionHeadersEnabled={false}
showsVerticalScrollIndicator={false}
keyExtractor={keyExtractor}
getItemLayout={getItemLayoutFun}
ListHeaderComponent={listFTUEHeader}
contentContainerStyle={{ flexGrow: 1 }}
data={DISCOVERY_SECTION_LIST}
renderItem={renderItem}
onRefresh={onRefresh}
refreshing={false}
viewabilityConfig={viewabilityConfig}
ListFooterComponent={EndOfListText}
onScroll={onScroll}
/>
I want to detect when the ListHeaderComponent is out of viewport or item[1] is at the top of the screen, accordingly I want to add a state.
I have read the documentation but could not find a way, hopefully would get any leads from here.
Any leads would be helpful, thank you in advance.
I'm in the exact same situation, so far i only could find a solution to check, if a specific item is in the viewport, but nothing about the ListHeaderComponent.
FlatList has a prop called onViewableItemsChanged which you can easily implement. When you scroll a FlatList, the items showing on the FlatList change. Then, this function is called, telling you what current viewableItems are and what changed items are.
See also this article for further explanation.
Maybe this helps you to get closer to a solution which works for you?!
I'm working on this as well and this is the best option I've found so far:
Get the height of the header
If you know the height on all screen sizes, create a variable to reuse
If not, use the onLayout prop to get the height
Use the onScroll callback and get the y offtset via event.nativeEvent.contentOffset.y
Did you ever end up finding another solution for this?
In short: Is ScrollView supposed to scroll only when pressing component that has onPress function or is something preventing it working as expected?
I noticed ScrollView works when touching on Buttons or other components with onPress function. But when trying to scroll it touching on for example <Text> component nothing happens. I noticed this by then adding onPress to <Text> component (as it has this functionality) and then scrolling works perfectly. Same could be applied to <View> components by changing them to <TouchableWithoutFeedback> with empty onPress: onPress={() => { }}.
But this should not be the case and it increases the workload.
There are tons of question regarding why React Native ScrollView is not working. I tried to found out if this question is answered already but did not come across.
"expo": "^43.0.1",
"react-native": "0.64.2
It seems that in ScrollView there needs to be main child component that has onPress functionality so that it can recognizes touch event.
I have a button in react native, that I am using to navigate to another screen in my Drawer navigator (in addition to using the drawer screen itself). However, the transition is very abrupt. It it possible to have some kind of animation to make it smoother?
I have seen the docs for the transitioner, but these do not appear to be for a functional component like the screen the button is on. Is there any help?
Here is my button:
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => this.props.navigation.navigate("SocialScreen")}>
<Text style={styles.buttonText}>Socials</Text>
</TouchableOpacity>
Any help is appreciated!
Of course you can add animation there.
I am attaching link of library with detail explanation react-native-navigation
Kindly comment if you face any error.
I'm struggling to understand and fix a problem I've been having when trying to use KeyboardAvoidingView to wrap some text inputs.
To aid my question, I've made an MVCE: https://snack.expo.io/#lee12f/brave-peanut
Please run this using the IOS simulator (or on IOS device) to reproduce the problem.
Clicking between the TextInput components (and around the screen) causes the KeyboardAvoidingView to toggle thus changing my View height. What am I doing wrong? How can I ensure the KeyboardAvoidingView remains enabled when clicking between the inputs?
As a bonus, it would be nice when clicking anywhere other than the inputs for the keyboard to close.
Thanks in advance
EDIT: If possible, without using 3rd party libraries.
try using react-native-keyboard-aware-scroll-view way easier to setup and it performs better in opinion
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView contentContainerStyle={{ flex:1,display:'flex' }} >
/... inputs here
</KeyboardAwareScrollView>
We are working on an app where a user can read a document, highlight as section and leave a comment. We've tried a few libraries for text highlighting and ultimately built our own, however most of the npm packages I see follow a similar approach: use a TextInput but make uneditable.
We have highlighting working, but the problem is the user needs to be able to see their previous comments by clicking on the section they highlighted. However, onPress on the Text elements within the TextInput don't work.
Here's a trivial example
<TextInput>
<Text onPress={() => console.log('hello')}>Some text</Text>
</TextInput>
The console.log('hello') will never fire. How can I keep the TextInput from blocking its children's onPress events?
And if not, does anyway else know of a way to make text selectable without using an input?
Note: I've only tested this on iOS -- I've seen some comments from people saying it works fine for Android