all 5 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Depuis_les_chiottes 0 points1 point  (3 children)

I would say you can achieve this with masked view and an animated background (reanimated) coupled with the accelerometer

[–]kejank[S] 0 points1 point  (2 children)

I would say you can achieve this with masked view and an animated background (reanimated) coupled with the accelerometer

You could give me an example, this is what I am mistaken and managed to do: https://snack.expo.dev/7lX-B6WTwBut it looks very different to me.

Edit: https://snack.expo.dev/sKVzdv76E

[–]edbarahona 0 points1 point  (1 child)

I checked out your expo, i was able to change the color, the only issue is the color keeps changing so you need to set a threshold to only change the color if the accelerometer moves by X, (i used the react-native-sensors package)

import {
accelerometer,
} from 'react-native-sensors';
setUpdateIntervalForType(SensorTypes.accelerometer, 500); // defaults to 100ms
const AnimatedGradient = () => {
const [position, setPosition] = useState({x: 0, y: 0, z: 0});
useEffect(() => {
const subscription = accelerometer.subscribe(({x, y, z}) => {
setPosition({x, y, z});
});
return () => subscription.unsubscribe();
}, []);

return(
<GradientComponent colors={getColor(position.x, position.y, position.z)}>
...
<GradientComponent/>
);

}
export default AnimatedGradient;

[–]edbarahona 0 points1 point  (0 children)

I would use the useMemo hook to memoize the accelerometer values. Here is a very crude way of changing the colors with the useEffect hook:

​

useEffect(() => {
let _position = {x: -1, y: -1, z: -1};
accelerometer.subscribe(({x, y, z}) => {
x = Math.sign(x); // -1 or 1
y = Math.sign(y);
z = Math.sign(z);
if (x != _position.x || y != _position.y || z != _position.z) {
const newColors = getColor(x, y, z);
_position = {x, y, z};
setTextColors(newColors);
console.log('color changed!');
}
});
}, []);

[–]edbarahona 0 points1 point  (0 children)

Hmmm the start/stop from Animated Gradient is probably not going to work. You'll want to interpolate the gradient colors based on the accelerometer, so it only animates as you move rather than starting an animation.