In the android emulator, the following RN code does nothing (no log, no handler called)
<Pressable style={[styles.fullscreenContainer]}
onPressIn={()=> {console.log("onPress");this.props.touchHandler()}}>
However, if I insert a onPress handler, in otherwise exactly the same code, both logs appear and both handlers are called when the component is pressed.
<Pressable style={[styles.fullscreenContainer]}
onPress= {()=> {console.log("onPress"); this.props.touchHandler()}}
onPressIn={()=> {console.log("onPressIn");this.props.touchHandler()}}>
Why does onPressIn not work on its own?
FYI onPressIn works correctly on iOS in the expo client
onPressIn is followed by onPress, but if you haven't given onPress any logic to perform, then nothing will happen. You'll only get an onPressIn response, even though onPress is technically still triggered behind the scenes. (It's just a blank onPress).
Related
I have a react native compnent that shows a popup message at the bottom of my mobile screen with data from my API http request. Trying to hide the numeric keyboard to be able to see the popup that is behind the keyboard. Calling keyboard.dismiss() when the API response comes does nothing.
Expecting keyboard to be dismissed while using import { Keyboard } from 'react-native' and calling the keyboard.dismiss() from the API response.
You are calling keyboard.dismiss() from an async () method, that's why the keyboard is not hiding.
You will have to call keyboard.dismiss() from the main thread.
I'm attempting to write some tests for my react native app. A component in my app focuses a TextInput after a parent Pressable receives a press. I'm using a ref to identify and focus the TextInput element.
My desired functionality works just fine when running my app through expo, but my test is failing because it seems that the onFocus event is not being called.
Why isn't ref.current.focus() being called when running tests via the #testing-library/react-native library?
Here's my code:
Foo.js
import {Pressable, TextInput} from "react-native";
import {useRef} from "react";
const Foo = (props) => {
const inputRef = useRef()
return (
<Pressable testID={"pressable"} onPress={() => inputRef.current.focus()}>
<TextInput ref={inputRef} testID={"input"} onFocus={props.onFocus} />
</Pressable>
)
}
export default Foo;
Foo.test.js
import { render, screen, fireEvent } from '#testing-library/react-native';
import Foo from "./foo";
test('onFocus is called after press', () => {
const mockFocus = jest.fn();
render(<Foo onFocus={mockFocus} />)
// fireEvent(screen.getByTestId("input"), 'focus');
fireEvent.press(screen.getByTestId("pressable"));
expect(mockFocus).toHaveBeenCalled()
});
This test fails with the following message:
Error: expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
I created an issue on the RNTL GitHub page and received a response from a contributor. Copying and pasting here for easy reference for anyone who might stumble upon this thread.
This is expected as React Test Renderer which we use for rendering
does not support refs. Check #1006 for more details.
Since the behaviour of focus() triggering onFocus event would probably
involve roundtrip to native side (from JS side), then you actually
cannot test such behaviour using RNTL as we do not run native code (see
here for details).
That leaves you with following options:
Call fireEvent.focus to manually trigger onFocus on relevant
TextInput. Recommended in case focus assertion would be a part of a
step in a bigger test.
Use createNodeMock to pass ref creating function to render method, More details here. Recommended in case you
just want to assert pressing button triggers onFocus.
Is it possible to add code to callback function for componentWillUnmount that will stop callback from unmounting? I want to provide message to user that says "are you sure you want to quit?"
BackHandler module could solve your issue in android. For ios, you need to add gestureEnabled: false in react navigation props and bind alert function with back button on header.
I am using react-native. I want to trigger the function when the user releases the screen. However, onPressOut fires even if the user drags the finger.
Is there any simple way that I can detect the timing when the user releases their finger?
onPressIn={() => {
console.warn('Pressed!');
}}
onPressOut={() => {
console.warn('Released');
}}
onPressOut will be called the moment you drag something even if the user still touching the screen.
You should check onPanResponderRelease, it will trigger when the user releases the touch after dragging. Documentation here
AppState.addEventListener('change', ...)
The listener does not getting any call. I'm using StackNavigator to put root screen and the screen with AppState
(Updated) It's been called when I restart the app. But the Component where I use AppState is not yet the active screen
In my case, I just want to get notified when a navigation come back to or leave a screen. So I can simply do this
this.props.navigation.addListener('didFocus', ...);
this.props.navigation.addListener('didBlur', ...);
The problem with AppState still remains