Interactable not drag on Android.

[xclidongbo]

package.json

    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-screens": "2.10.1",
    "react-native-reanimated": "1.13.4",
    "react-navigation": "3.13.0",

Is there anything wrong?

code

import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import React, {Component} from 'react';
// import Animated, {Easing} from 'react-native-reanimated';
import SplashScreen from 'react-native-splash-screen';
import Interactable from '../../components/DragButton/Interactable';
const {width, height} = Dimensions.get('screen');
const source = require('../../common/img/home/boy.png');


const positiones = [...Array(10)].map((_, i) => i);
const backSize = 70;
const itemSize = 70;
// ceil 向上取整，round 四舍五入, floor向下取整
// const offsetY = Math.floor((height - backSize) / Math.ceil(positiones.length / 2));

export default class DragActions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // borderRadius: new Animated.Value(0)
      isShow: true,
      backWidth: 70,
      snapPoints: [],
    };
    // const clock = new Clock();
  }

  handleSnapPoints = (backWidth) => {
    // const { backWidth } = this.state;
    const snapPoints = positiones.map((_, i) => {
      console.log(Math.floor(i % 2));
      // console.log(Math.floor(i/2));
      // 确定横坐标位置
      const x =
        i % 2 === 0 ? -(width - backWidth) / 2 : (width - backWidth) / 2;
      // 当前所在行数
      const currentColumn = Math.floor(i / 2);
      // 总行数
      const totalColumn = Math.ceil(positiones.length / 2);
      // 总行数是奇偶, 不等于0为奇数
      const isOdd = totalColumn % 2 !== 0;
      // 中心点所在行数
      const centerColumn = Math.floor(totalColumn / 2);
      // 一格的高度
      const elemHeight = height / (totalColumn + 1);
      const y =
        (currentColumn - centerColumn) * elemHeight +
        (isOdd ? 0 : elemHeight / 2);
      return {
        x,
        y,
      };
    });
    console.log(snapPoints);
    const initPosition = snapPoints[positiones.length - 1];
    this.setState({initPosition, snapPoints, backWidth});
  };
  componentDidMount() {
    SplashScreen.hide();
    this.handleSnapPoints(70);
  }
  onPressItem = () => {
    console.log(1111);
    // this.handleSnapPoints(200);
  };
  render() {
    const {
      isShow,
      borderRadius,
      snapPoints,
      initPosition,
      backWidth,
    } = this.state;
    return (
      <View style={styles.container}>
        {/* <TouchableOpacity */}
        {/*   style={{padding: 0, width: 100, height: 100}} */}
        {/*   onPress={() => this.onPressItem()}> */}
        {/*   <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}}> */}
        {/*     <Text>1111</Text> */}
        {/*   </View> */}
        {/* </TouchableOpacity> */}
        {snapPoints.length > 0 ? (
          <View style={styles.baseStyle}>
            <Interactable.View
              snapPoints={snapPoints}
              initialPosition={initPosition}
              // dragEnabled={false}
              onSnap={({nativeEvent}) => {
                console.log(nativeEvent);
              }}>
              <TouchableOpacity
                style={{padding: 0}}
                onPress={() => {
                  console.log(111);
                }}>
                <View style={[styles.backStyle, {width: backWidth}]}>
                  <Image source={source} style={styles.imageStyle} />
                </View>
              </TouchableOpacity>
            </Interactable.View>
          </View>
        ) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  baseStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: 'skyblue'
  },
  backStyle: {
    width: backSize,
    height: backSize,
    backgroundColor: 'red',
    borderRadius: backSize / 2,
  },
  imageStyle: {
    width: backSize,
    height: backSize,
  },
});