drag and resize a shape in react-native

Question

im new to react-native and overhelmed with all the options in the www. thats why i'm a bit confused how to complete this task in the best possible way.

i want to make something similar to this, but in react-native. A square-shape, which i can drag all over the view + resize it by dragging it's corners. I already took a look into exponent IDE and the given ThreeView-Component, but i think three.js is a bit over the top for this task, right?

[1]: http://codepen.io/abruzzi/pen/EpqaH

Answer 1

react-native-gesture-handler is the most appropriate thing for your case. I have created minimal example in snack. Here is the minimal code:

  let FlatItem = ({ item }) => {
  let translateX = new Animated.Value(0);
  let translateY = new Animated.Value(0);
  let height = new Animated.Value(20);
  let onGestureEvent = Animated.event([
    {
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
      },
    },
  ]);
  let onGestureTopEvent = Animated.event([
    {
      nativeEvent: {
        translationY: height,
      },
    },
  ]);
  let _lastOffset = { x: 0, y: 0 };
  let onHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      _lastOffset.x += event.nativeEvent.translationX;
      _lastOffset.y += event.nativeEvent.translationY;
      translateX.setOffset(_lastOffset.x);
      translateX.setValue(0);
      translateY.setOffset(_lastOffset.y);
      translateY.setValue(0);
    }
  };
  return (
    <View>
      <PanGestureHandler onGestureEvent={onGestureTopEvent}>
        <Animated.View
          style={{
            widht: 10,
            height,
            backgroundColor: 'blue',
            transform: [{ translateX }, { translateY }],
          }}
        />
      </PanGestureHandler>
      <PanGestureHandler
        onGestureEvent={onGestureEvent}
        onHandlerStateChange={onHandlerStateChange}>
        <Animated.View
          style={[
            styles.item,
            { transform: [{ translateX }, { translateY }] },
          ]}>
          <Text>{item.id}</Text>
        </Animated.View>
      </PanGestureHandler>
    </View>
  );
};

let data = [
  { key: 1, id: 1 },
];
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatItem item={data[0]} />
      </View>
    );
  }
}

Here is the snack link if you want to test! PS: I have made only top resizing. The rest is for you to do! It should be enough to understand the way how to it!