Is it possible to change an image and have it stay rendered when the phone is shaken? Currently, I am able to change the image on shake but it reverts back once the condition is not met:
function Shaker(){
useEffect(() => {
const subscription = accelerometer.subscribe(({ x, y, z }) =>
setSensorData({ x, y, z })
);
}, []);
const acceleration = Math.sqrt(sensorData.x * sensorData.x + sensorData.y * sensorData.y + sensorData.z * sensorData.z);
const imgChange = acceleration > 12 ? 'imgThatIWantToRenderAfterConditionAndStay.png' : 'DefaultImg.png' ;
return (
<View>
<Image style={{ width: 100, height: 100 }} source={{ uri: imgChange }} />
</View>
}
When I tried using a boolean instead of acceleration > 12, I encountered a read-only error:
let accelerationObtained = false;
if (acceleration > 12) { accelerationObtained = true; }
const ifImg = accelerationObtained ? imgUri : 'https://www.nicepng.com/png/full/416-4167329_shot-glass.png' ;
I feel like my solution is not ideal and would like to learn a better way to handle this scenario.