مساعدة في تحويل Functional Component إلى Class Component في رياكت

• لا داع لاستخدام useRef في مكونات الصفوف حيث يمكن انشاء متحولات ثابتة في this مباشرة
• لا داع لاستخدام useCallback لنفس السبب السابق
• للتزامن بين حالة المكون والعوامل props الممررة يمكن الاستفادة من التابع getDerivedStateFromProps

يصبح المكون بالشكل التالي

import React, { memo } from "react";
import {
  StyleSheet,
  Animated,
  View,
  TouchableWithoutFeedback,
  I18nManager,
} from "react-native";
import { ISwitchInter } from "./types";

export class Switch extends React.Component<ISwitchInter> {
  constructor(props: any) {
    super(props);

    const { isActive = false } = this.props;

    this.state = { active: false };

    this.slideInOut = new Animated.Value(isActive ? 1 : 0);
  }

  toggleActive = () => {
    this.setState({ active: !this.state.active });

    this.props.onValueChange && this.props.onValueChange(this.state.active);

    Animated.spring(this.slideInOut, {
      toValue: this.state.active ? 0 : 1,
      useNativeDriver: true,
    }).start();
  };

  static getDerivedStateFromProps(props, state) {
    if ((props.isActive || false) !== state.active) {
      return { active: props.isActive };
    }
    return null;
  }

  render() {
    const { contentContainerStyle, thumbStyle } = this.props;

    const translate = {
      transform: [
        {
          translateX: this.slideInOut.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 18.5],
          }),
        },
      ],
    };

    return (
      <TouchableWithoutFeedback onPress={this.toggleActive}>
        <View
          style={[
            styles.container,
            contentContainerStyle,
            { borderColor: this.state.active ? "#FDEC00" : "#707070" },
          ]}>
          <Animated.View
            style={[
              styles.thumb,
              translate,
              thumbStyle,
              !this.state.active && { backgroundColor: "#707070" },
            ]}
          />
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

export default memo(Switch);

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    width: 40,
    height: 18,
    borderRadius: 50,
    padding: 3,
    justifyContent: "center",
    alignItems: I18nManager.isRTL ? "flex-end" : "flex-start",
  },
  thumb: {
    width: 15,
    height: 15,
    borderRadius: 25,
    backgroundColor: "#FDEC00",
  },
});