I was trying to move all things that I could to useNativeDriver. I tried this:
onPanResponderMove: Animated.event([null, { dy:this.state.appearAnim }], { useNativeDriver:true }),
However this causes the error of:
config.onPanResponderMove is not a function
If I just set useNativeDriver to false, it works as per expectations.
Does anyone have any idea on how to use native driver with PanResponder?
I quote from the react-native github repository:
PanResponder can't work with Animated.event([], {useNativeDriver: true});
This is a current limitation of native Animated.event. It doesn't work with PanResponder because it is implemented in JavaScript. You can have a look at https://github.com/wix/react-native-interactable which can handle gestures with native animated values.
Looks like it is currently not possible to useNativeDriver with the PanResponder in react native.
Related
I am writing a puzzle app in React Native where the user can solve a puzzle by changing their device's Appearance to dark mode. I'm using React Native's Appearance module to accomplish this, by calling Appearance.getColorScheme() to get the initial color scheme, and registering an event listener for when the color scheme changes using Appearance.addChangeListener() within the useEffect hook:
useEffect(() => {
const originalColorScheme = Appearance.getColorScheme();
Appearance.addChangeListener((event) => {
if (Appearance.getColorScheme() !== originalColorScheme) {
setSolved(true);
}
});
}, []);
This is working fine, but I'd like to be able to unit test my component by simulating a change to dark mode in Jest and/or React Native Testing Library (or similar), after which I can check for changes to the content of the page (a "congratulations" message, in this case).
In my mind, it could look something like:
const text = await screen.findByText("good luck!");
// fireEvent("changeColorScheme", { colorScheme: "dark" });
const text2 = await screen.findByText("congratulations!");
Is anything like this possible? I'm guessing it has something to do with mocks, but it's a little over my head at the moment. Thanks for any help you can provide!
I am new to react Native. am stuck in a issue, is it possible to lock a Particular screen in Landscape in react-native ? in other words can we config the screen orientation for particular screen ?
Help me to solve this?
You can use react-native-orientation or react-native-orientation-locker.
https://www.npmjs.com/package/react-native-orientation
https://www.npmjs.com/package/react-native-orientation-locker
React native orientation provided following API which help to achieve screen orientation
Orientation.lockToPortrait()
Orientation.lockToLandscape()
Orientation.lockToLandscapeLeft()
Orientation.lockToLandscapeRight()
Orientation.unlockAllOrientations()
Orientation.getOrientation((err, orientation) => {})
Orientation.getSpecificOrientation((err, specificOrientation) => {})
Please check following code snippet
import Orientation from 'react-native-orientation'
componentDidMount() {
Orientation.unlockAllOrientations();
}
componentWillUnmount() {
Orientation.lockToPortrait();
}
I have tried both packages.
https://www.npmjs.com/package/react-native-orientation https://www.npmjs.com/package/react-native-orientation-locker
Both the packages work fine in android but I am getting the issue in ios devices it does not lock the orientation to landscape.
I'm trying to make a metronome using react native, but I'm having trouble with the sound playback. I've used ExpoAV to play sound, but when I run it on the expo app it's very choppy and sometimes plays offbeat. I'm guessing the best way to play sounds on time is to use native modules? Is there a way to fix it right in react native?
Here's the code I use:
const soundTimer = setInterval(() => {
if (clickSound._loaded) {
try {
clickSound.replayAsync();
} catch (err) {
console.log(err.message);
}
}
}, 60000/tempo);
Edit:
After some more intensive searching, I found an already answered question on here on Stack Overflow (I know, could've done that before...). Basically, the problem wasn't with the expo-av module, but with the JavaScript timer which is made to balance precision and performance on a single thread. Here is the link.
I created the demo: https://snack.expo.io/SJSNohTYS
Changed the workflow of the code with useEffect and async await.
I am working on a react-native app where I want to auto Reload a page can anyone tell me how can we do that in react-native code,
I have three component in which one component has to drop down I just want to reload the current screen this is the image of my page in which when a person changes the language i want to reload the page
use setTimeout on componentDidMount() to reload page.
example:
setTimeout(() => {
this.setState({time: true})
}, 1000)
You can use forceupdate see https://reactjs.org/docs/react-component.html#forceupdate
forceupdate will re-render the component.
https://facebook.github.io/react-native/docs/refreshcontrol.html
this is the guide for react native Refresh Component, usually we create function _onRefresh(), and you can callit at some specific time intervel.
Hope this answer will help you.
I'm assuming you are talking about auto-refreshing altered components in the simulator.
You would want to Enable Hot Reloading in the iOS or Android simulator.
You can pull up the developer screen in the iOS simulator showing Hot Reloading by pressing CMD + D.
Simple precise and clear!
componentWillMount(){
this._subscribe = this.props.navigation.addListener('didFocus', () => {
this.LoadData();
//Put your Data loading function here instead of my this.LoadData()
});}
I'm using the Lottie imperative API to display a looping animation.
The imperative API works fine on all of my components except one that uses React Native Sound. I assume the problem is that both libraries are called with .play(). Is this possible?
Lottie: this.animation.play();
React Native Sound: this.sound.play()
After calling the Lottie method, I'm getting the Error Message:
Cannot read property 'play' of undefined
Any Ideas?
Thanks in advance.
I eventually figured it out. React Native Sound of course wasn't the problem - it might have just delayed the initialization of Lottie and thus animation was still undefined when I called it.
The solution is to build in a timer and was already suggested in this thread: https://github.com/airbnb/lottie-react-native/issues/21
componentDidMount() {
this.initAnimation();
}
initAnimation(){
if (!this.animation){
setTimeout(() => {
this.initAnimation();
}, 100);
} else {
this.animation.play();
}
}