I am trying to create a controller for a robot for which it must handle multiple button tap events simultaneously
The Buttons are supposed to be Tapped Down and hold which would send repeated Commands to the robot on a timer.
<TouchableOpacity
activeOpacity={0.4}
{...otherProps}
delayPressOut={100}
onPressIn={onPressIn}
onPressOut={onPressOut}>
{children}
</TouchableOpacity>
There are multiple buttons That uses this component
I Have tried
onTouchStart={onPressIn} and onTouchEnd={onPressOut}
but when using this the second button is not triggered
Similar to this issue
https://github.com/facebook/react-native/issues/21912
import { TouchableOpacity } from 'react-native-gesture-handler';
Found the Solution
Related
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.
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
Hi Everyone,
I am fetching a few buttons from an API and displaying them in a view according to their names. Each of them is displayed as
<TouchableHighlight style={styles.button} onPress={this.onBtnClick.bind(this, item.apiurl)} >
<Text style={styles.Text}{item.displayName}</Text>
</TouchableHighlight>
The button click is not working all over the button except for the last one. It only works on specific areas. I have modified UI is several ways for the first few and checked. It still remains the same.
Any suggestions/Improvements are appreciated.
It's because you're binding the onBtnClick function everytime you click your button.
Simple fix would be onPress={() => this.onBtnClick(item.apiurl)
I have a screen that has a large image with a text input and a button at the bottom. This screen essentially has three requirements:
When the user taps into the input, the input and button should be visible above the keyboard
The user should be able to tap the button to submit the text input
If the user taps anywhere outside of the input (including the button) the keyboard should be dismissed.
I've tried various solutions including using react-native-keyboard-aware-scroll-view but none of them work quite right. This particular library seems to eat taps, so you can't submit on the button press. Otherwise it's good.
The closest I've been able to come is by surrounding various screen elements with <TouchableWithoutFeedback onPress={Keyboard.dismiss}>. When I try to wrap the entire screen contents in <TouchableWithoutFeedback>, <KeyboardAvoidingView> stops working.
<KeyboardAvoidingView behavior="padding">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<Image source={require('./img.png')} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View>
{error}
<Text>Search</Text>
<TextInput
value={this.state.search}
onChange={this.handleChange}
/>
<TouchableHighlight onPress={this.handleSubmit}>
<Text>SEARCH</Text>
</TouchableHighlight>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
This is the closest to a working solution, but it still has several problems. First of all, there doesn't seem to be way to add any additional height to KeyboardAvoidingView, so in some cases the button doesn't show above the keyboard. Second, in some cases if the screen is too tall the area underneath the button won't dismiss the keyboard on tap because there's nowhere to put a <TouchableWithoutFeedback> to hide it.
Is there a better way to display things to the user while the keyboard is up while allowing them to tap to dismiss the keyboard and still interact with some controls?
well I was able to solve this by adding
<KeyboardAwareScrollView
ref="scroller"
keyboardShouldPersistTaps={true}
>