Question 33525 in React native Question posted in
The official React Native documentation can be found here.

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

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..

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search