Is it not possible to change styles through JS in React Native? - react-native

Question

Can't RN do style changes using JS?
...
const PR = PanResponder.create({
onStartShouldSetPanResponder: (e, gestureState) => true,
onPanResponderStart: (e, gestureState) => {
console.log("start");
},
onPanResponderMove: (e, gestureState) => {
const dx = Math.abs(gestureState.dx);
**target.current.style.backgroundColor** = `rgba(${dx},${dx / 2},106,1)`;
},
onPanResponderEnd: (e, gestureState) => {
const dx = Math.abs(gestureState.dx);
if (!dx) {
target.current.style.backgroundColor = "green";
}
console.log("End");
},
});
...
As above, it is difficult to change the style on mobile.
Thank you for your reply.
The useState hook was not what I was expecting.
help me..

Answer 1

In the code above it looks like you were storing the style with useRef, which doesnt trigger component updates when its value changes. Here's a useState example
import * as React from 'react';
import { Text, View, StyleSheet, PanResponder } from 'react-native';
import Animated, {
useSharedValue,
interpolateColor,
} from 'react-native-reanimated';
import Constants from 'expo-constants';
export default function App() {
const [style, setStyle] = React.useState({
borderWidth: 1,
width: '100%',
height: 280,
backgroundColor: 'lightgreen',
});
const PR = PanResponder.create({
onStartShouldSetPanResponder: (e, gestureState) => true,
onPanResponderStart: (e, gestureState) => {
console.log('start');
},
onPanResponderMove: (e, gestureState) => {
const dx = Math.abs(gestureState.dx);
console.log(dx);
setStyle((prev) => ({
...prev,
backgroundColor: `rgba(${dx},${dx / 2},106,1)`,
}));
},
onPanResponderEnd: (e, gestureState) => {
const dx = Math.abs(gestureState.dx);
console.log(dx);
if (!dx) {
setStyle((prev) => ({ ...prev, backgroundColor: 'green' }));
}
console.log('End');
},
});
return (
<View style={styles.container}>
<View style={style} {...PR.panHandlers} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
While it works, the best results would come from using Animated.View and some Animated values

Answer 2

Look into this panResponder . It has some example of how to use
PanResponderGestureState
in
react-native