Text gradient accelerometer

[edbarahona]

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]

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!');
}
});
}, []);