I am writing a chat with audio messages. And I want to do something like in Whatsapp or other messengers. When user holds the button - program is recording the voice, when he releases - it stops and sends the message.
My question is how can I use Touchableopacity or Button and listen release event.
You can start recording in onPressIn prop of TouchableOpacity and and stop it in onPressOut prop of TouchableOpacity
The TouchableOpacity component has a prop called onPressOutin which you can pass a function to execute when the user releases the button.
Related
I've got a problem with keyboard in react native. I have a component with TextInput inside of it. The problem is when I am touching it - keyboard is starting to show, but immediately hiding back. (Checked with event listeners of Keyboard - event keyboardWilHide triggers, but I don't know what triggered it).
My assumption that the core of the problem in my navigation architecture. I have materialBottomTabNavigator which has materialTopTabNavigator inside, which has StackNavigator inside, and my component is a screen in stack navigator. Probably some tabs properties are triggering Keyboard Hide event, but I did not found any.
(In terms of debug launched app with my component moved out of this type of navigation and everything works fine).
Would appreciate any help. Thanks in advance!
Using react-native navigation:
https://reactnavigation.org/docs/use-navigation/
is there a way to listen for when the view/screen changes? When nav.navigate() is called?
We could create our own wrapper and then call the hooks ourselves, but I am wonder if there is a built-in way to listen for changes to the view/screen? The goal is hide the snackbar if it's being displayed, if the user navigates.
You have two ways to listen to screen changes:
Subscribe to state changes, you can read more here
Using the onStateChange prop of the NavigationContainer, you can read more here
You could do your checks there and hide the snackbar whenever you want. The advantage it has over wrapping the useNavigation hook is that it will work not only with your custom hook but also with the navigation prop passed to all the screens within your navigator.
I want to emit a tap event as if the user had tapped the app at a certain location on a view. I believe this will involve NativeEventEmitter but I don't see which NativeModules to configure the NativeEventEmitter with and what events would be produced.
Maybe have a look at panresponder: https://facebook.github.io/react-native/docs/panresponder
Here is an Example how to use: https://stackoverflow.com/a/38769295/1256697
Rather than the onPress event triggering when a touch is pressed onto the TouchableWithoutFeedback component, it is triggered when a touch is released. Is this how the onPress event is supposed to work..?
Is there an event for the actual touch press rather than the touch release.
Yes, triggering the onPress event on release is the intended behavior.
You can use onPressIn if you want to trigger an action immediately when a button is clicked.
How can i can detect onScroll ScrollView event from a user vs an animation
in React Native the "onScroll" event is returned when a user makes a move and also when I move it using code