How to use the react-native.Animated.Value function in react-native

constructor(props) {
    super(props)

    this.state = {
      search: '',
      rotation: new Animated.Value(1),
      scale: new Animated.Value(1),
      opacity: new Animated.Value(1),
      marginTop: new Animated.Value(0),
      openVal: new Animated.Value(0),
      innerMarginTop: new Animated.Value(0),
      modalVisible: false,
      modalOpenVal: new Animated.Value(0),
      topicMarginTop: new Animated.Value(0),
      tabMode: this.props.modeInfo.settingInfo.tabMode,
      _scrollHeight: this.props.modeInfo.height - (StatusBar.currentHeight || 0) - 38 + 1
      // _scrollHeight:
    }
  }

constructor(props) {
    super(props)

    this.state = {
      search: '',
      rotation: new Animated.Value(1),
      scale: new Animated.Value(1),
      opacity: new Animated.Value(1),
      marginTop: new Animated.Value(0),
      openVal: new Animated.Value(0),
      innerMarginTop: new Animated.Value(0),
      modalVisible: false,
      modalOpenVal: new Animated.Value(0),
      topicMarginTop: new Animated.Value(0),
      tabMode: this.props.modeInfo.settingInfo.tabMode,
      _scrollHeight: this.props.modeInfo.height - (StatusBar.currentHeight || 0) - 38 + 1
      // _scrollHeight:
    }
  }

constructor(props) {
    super(props)
    this.state = {
      growAnimation: new Animated.Value(0)
    }
    this.spin()
  }
  spin() {

y: number;
  label: string;
}

interface IntroProps {
  steps: Step[];
}

interface IntroState {
  index: number
}

export default class Intro extends React.PureComponent {
  x = new Animated.Value(0);

  y = new Animated.Value(0);

  state = {
    index: -1,
  };

  componentDidMount() {
    this.nextStep();
  }

  nextStep = () => {
    const { x, y } = this;
    const { steps } = this.props;
    const { index } = this.state;
    if (index + 1 >= steps.length) {
      this.setState({ index: -1 });
    } else {

constructor(props) {
    super(props)
    this.state = {
      rotate: new Animated.Value(0),
      dash: new Animated.Value(62),
    }
  }
  componentDidMount() {

    this.animatedBoxWidths = props.levels.map(() => new Animated.Value(0));
  }

constructor(props) {
    super(props);

    this.state = {
      focus: false,
      cancelOpacity: new Animated.Value(0),
      inputWidth: new Animated.Value(100),
      text: ''
    };

    this.onBlur = this.onBlur.bind(this);
    this.onCancel = this.onCancel.bind(this);
    this.onFocus = this.onFocus.bind(this);
  }

constructor(props) {
    super(props);

    this.state = {
      itemWidth: new Animated.Value(0),
    };
  }

constructor(props: Props) {
		super(props);

		this.state = {
			loaded: [this.props.navigationState.index],
			layout: {
				...this.props.initialLayout,
				measured: false,
			},
			position: new Animated.Value(this.props.navigationState.index),
		};
	}

* - Spacer is used to dynamically positioning its child component when keyboard is toggled.
 *   Technically, the view position will be calculate and update (positioning translateY property)
 *   while keyboard appear/disappear
 * - Usage
  <spacer>
    
  </spacer>
 */
const windowHeight = Dimensions.get('window').height;
const showListenerEvent =
    Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow';
const hideListenerEvent =
    Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide';

export default class Spacer extends React.PureComponent {
    _topValue = new Animated.Value(0);
    _viewHeight = 0;
    _locationY = 0;
    _toValue = 0;

    componentDidMount() {

        Keyboard.addListener(showListenerEvent, this._keyboardWillShow);
        Keyboard.addListener(hideListenerEvent, this._keyboardWillHide);

        this._spaceMargin = this.props.spaceMargin;
        this._isActive = false
    }

    componentWillUnmount() {
        Keyboard.removeListener(showListenerEvent, this._keyboardWillShow);
        Keyboard.removeListener(hideListenerEvent, this._keyboardWillHide);