react-native-gesture-handler#State JavaScript Examples

export function Draggable({ id, type, preview, gestures, children }) {
  let context = useContext(DragDropContext);
  let container = useRef(null);

  let _onTapHandlerStateChange = e => {
    if (e.nativeEvent.state === State.ACTIVE) {
      context.onDragStart(id, type, container.current, preview);
    } else if (e.nativeEvent.oldState === State.ACTIVE) {
      context.onDragEnd();
    }
  };

  return (
    <LongPressGestureHandler
      minDurationMs={250}
      onHandlerStateChange={_onTapHandlerStateChange}
      simultaneousHandlers={gestures.pan}
    >
      <Animated.View ref={container} style={{ flex: 1 }}>
        {children}
      </Animated.View>
    </LongPressGestureHandler>
  );
}

render() {
    const backgroundColor = this.animated.interpolate({
      inputRange: DummyDataDateALive.map((_, index) => index),
      outputRange: DummyDataDateALive.map((item) => item.color),
    });

    return (
      <FlingGestureHandler
        key={'UP'}
        direction={Directions.UP}
        onHandlerStateChange={(ev) => {
          if (
            ev.nativeEvent.state === State.END &&
            this.state.activeIndex !== DummyDataDateALive.length - 1
          ) {
            this._setCardActive(this.state.activeIndex + 1);
          }
        }}>
        <FlingGestureHandler
          key={'DOWN'}
          direction={Directions.DOWN}
          onHandlerStateChange={(ev) => {
            if (
              ev.nativeEvent.state === State.END &&
              this.state.activeIndex !== 0
            ) {
              this._setCardActive(this.state.activeIndex - 1);
            }
          }}>
          <View style={styles.container}>
            <Animated.View style={[{flex: 1, backgroundColor}]}>
              <FlatList
                keyExtractor={(item, index) => item + index}
                scrollEnabled={false}
                CellRendererComponent={this._renderCenter}
                data={DummyDataDateALive}
                renderItem={this._renderItem}
                contentContainerStyle={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              />
            </Animated.View>
          </View>
        </FlingGestureHandler>
      </FlingGestureHandler>
    );
  }

export function DragDrop({ makeHighlight, children, style }) {
  let x = useMemo(() => new Animated.Value(0), []);
  let y = useMemo(() => new Animated.Value(0), []);
  let ax = useMemo(() => new Animated.Value(0), []);
  let ay = useMemo(() => new Animated.Value(0), []);
  let scrollRef = useRef(null);
  let container = useRef(null);
  let containerBounds = useRef(null);
  let [currentDropping, setCurrentDropping] = useState(null);
  let [dragState, setDragState] = useState(null);
  let draggable = useRef(null);
  let scrollY = useRef(0);

  let lastDragArgs = useRef(null);

  let onDragMove = useCallback(([x, y]) => {
    if (draggable.current) {
      lastDragArgs.current = [x, y];

      let { droppable, status } = getDroppableInArea(
        [x, y],
        draggable.current.type
      );
      if (
        droppable &&
        (!currentDropping ||
          droppable.id !== currentDropping.droppable.id ||
          status !== currentDropping.status)
      ) {
        setCurrentDropping({ droppable, status });
      }

      let relY = y - containerBounds.current.y;
      let { height } = containerBounds.current;

      if (relY < 100) {
        requestAnimationFrame(() => {
          scrollRef.current
            .getNode()
            .scrollTo({ y: scrollY.current - 4, animated: false });
        });
      } else if (relY > height - 100) {
        requestAnimationFrame(() => {
          scrollRef.current
            .getNode()
            .scrollTo({ y: scrollY.current + 4, animated: false });
        });
      }
    }
  }, []);

  let onGestureEvent = Animated.event([
    {
      nativeEvent: ({
        absoluteX,
        absoluteY,
        translationX: tx,
        translationY: ty,
        state
      }) =>
        A.block([
          A.cond(A.eq(state, State.ACTIVE), [
            A.set(x, tx),
            A.set(y, ty),
            A.set(ax, absoluteX),
            A.set(ay, absoluteY),

           A.call([ax, ay], onDragMove),
          ])
        ])
    }
  ]);

  function onContainerLayout() {
    container.current.measureInWindow((x, y, width, height) => {
      containerBounds.current = { x, y, width, height };
    });
  }

  let onHandlerStateChange = useCallback(e => {
    if (e.nativeEvent.state === State.ACTIVE) {
      setDragState('dragging');
    }
  }, []);

  // Managing drag state
  let onDrag = useCallback((id, type, el, preview) => {
    if (container && preview) {
      el = el.getNode ? el.getNode() : el;
      el.measureLayout(
        findNodeHandle(container.current),
        (x, y, width, height) => {
          draggable.current = {
            id,
            type,
            bounds: { x, y: y - scrollY.current, width, height },
            preview
          };
          setDragState('pending');
        }
      );

      droppables.current.forEach(d => d.onMeasure());
    }
  }, []);
  let onDragStart = (id, type, container, preview) => {
    onDrag(id, type, container, preview);
  };
  let onDragEnd = () => {
    if (draggable.current && currentDropping) {
      let { droppable, status } = currentDropping;
      droppable.onDrop(
        draggable.current.id,
        draggable.current.type,
        droppable,
        status
      );
    }

    draggable.current = null;
    setDragState(null);
    setCurrentDropping(null);
    x.setValue(0);
    y.setValue(0);
  };

  // Handle scrolling
  function onScroll(e) {
    scrollY.current = e.nativeEvent.contentOffset.y;

    if (dragState === 'dragging' && lastDragArgs.current) {
      onDragMove(lastDragArgs.current);
    }
  }

  // Droppables
  let droppables = useRef([]);

  function getDroppableInArea([x, y], type) {
    if (!containerBounds.current) {
      return null;
    }

    x -= containerBounds.current.x;
    y -= containerBounds.current.y - scrollY.current;

    let droppable = droppables.current.find(({ acceptedTypes, layout }) => {
      return (
        acceptedTypes.indexOf(type) !== -1 &&
        layout &&
        x >= layout.x &&
        y >= layout.y &&
        x <= layout.x + layout.width &&
        y <= layout.y + layout.height
      );
    });

    if (droppable) {
      let { layout, getActiveStatus } = droppable;

      if (getActiveStatus) {
        let status = getActiveStatus(x, y, droppable, draggable.current || {});
        if (status) {
          return { droppable, status, position: { x, y } };
        }
      } else {
        return { droppable, status: true, position: { x, y } };
      }
    }
    return {};
  }

  function registerDroppable(id, events) {
    droppables.current = [
      ...droppables.current,
      {
        id,
        ...events,
        layout: { x: 0, y: 0, width: 0, height: 0 }
      }
    ];

    return () => {
      unregisterDroppable(id);
    };
  }

  function unregisterDroppable(id) {
    droppables.current = droppables.current.filter(d => d.id !== id);
  }

  function updateDroppable(id, data) {
    droppables.current = droppables.current.map(d => {
      if (d.id === id) {
        return { ...d, ...data };
      }
      return d;
    });
  }

  return (
    <DragDropContext.Provider
      value={{
        onDragStart,
        onDragEnd,
        container,
        dragging: dragState === 'dragging',

        registerDroppable,
        updateDroppable,
        unregisterDroppable,
        currentDropping
      }}
    >
      <View ref={container} onLayout={onContainerLayout} style={{ flex: 1 }}>
        {children({
          dragState,
          scrollRef,
          onScroll,
          onGestureEvent,
          onHandlerStateChange
        })}

        <Preview
          draggable={draggable.current}
          x={x}
          y={y}
          pending={dragState === 'pending'}
        />
      </View>
    </DragDropContext.Provider>
  );
}

export default function Main() {
  let offset = 0;
  const translateY = new Animated.Value(0);

  const animatedEvent = Animated.event(
    [
      {
        nativeEvent: {
          translationY: translateY,
        },
      },
    ],
    { useNativeDriver: true },
  );

  function onHandlerStateChanged(event) {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      let opened = false;
      const { translationY } = event.nativeEvent;

      offset += translationY;

      if (translationY >= 100) {
        opened = true;
      } else {
        translateY.setValue(offset);
        translateY.setOffset(0);
        offset = 0;
      }

      Animated.timing(translateY, {
        toValue: opened ? 380 : 0,
        duration: 200,
        useNativeDriver: true,
      }).start(() => {
        offset = opened ? 380 : 0;
        translateY.setOffset(offset);
        translateY.setValue(0);
      });
    }
  }

  return (
    <SafeAreaView>
      <Container>
        <Header />
        <Content>
          <Menu translateY={translateY} />

          <PanGestureHandler
            onGestureEvent={animatedEvent}
            onHandlerStateChange={onHandlerStateChanged}
          >
            <Card style={{
              transform: [{
                translateY: translateY.interpolate({
                  inputRange: [-350, 0, 380],
                  outputRange: [-50, 0, 380],
                  extrapolate: 'clamp',
                }),
              }],
            }}
            >
              <CardHeader>
                <Icon name="attach-money" size={28} color="#666" />
                <Icon name="visibility-off" size={28} color="#666" />
              </CardHeader>
              <CardContent>
                <Title>Saldo disponível</Title>
                <Description>R$ 197.611,65</Description>
              </CardContent>
              <CardFooter>
                <Annotation>
                Transferência de R$ 20,00 recebida de Diego Schell Fernandes hoje às 06:00h
                </Annotation>
              </CardFooter>
            </Card>
          </PanGestureHandler>

        </Content>

        <Tabs translateY={translateY} />
      </Container>
    </SafeAreaView>
  );
}

export default function ForecastDetails() {
  let offset = 0;
  const translateY = new Animated.Value(0);

  const animatedEvent = Animated.event(
    [
      {
        nativeEvent: {
          translationY: translateY,
        },
      },
    ],
    {useNativeDriver: true},
  );

  function onHandlerStateChanged(event) {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      const {translationY} = event.nativeEvent;
      let opened = false;
      offset += translationY;

      if (translationY >= 100) {
        opened = true;
      } else {
        translateY.setValue(offset);
        translateY.setOffset(0);
        offset = 0;
      }

      Animated.timing(translateY, {
        toValue: opened ? 500 : 0,
        duration: 300,
        useNativeDriver: true,
      }).start(() => {
        offset = opened ? 500 : 0;
        translateY.setOffset(offset);
        translateY.setValue(0);
      });
    }
  }

  return (
    <PanGestureHandler
      onGestureEvent={animatedEvent}
      onHandlerStateChange={onHandlerStateChanged}>
      <Card
        style={{
          transform: [
            {
              translateY: translateY.interpolate({
                inputRange: [-300, 0, 500],
                outputRange: [-30, 0, 620],
                extrapolate: 'clamp',
              }),
            },
          ],
        }}>
        <Header
          style={{
            opacity: translateY.interpolate({
              inputRange: [0, 400],
              outputRange: [1, 0],
              extrapolate: 'clamp',
            }),
          }}>
          Vreeland
        </Header>
        <Body
          style={{
            opacity: translateY.interpolate({
              inputRange: [0, 400],
              outputRange: [1, 0],
              extrapolate: 'clamp',
            }),
          }}>
          <WeatherInfoContainer>
            <Wind>M7º / L5º</Wind>
            <Temperature>5º</Temperature>
            <WeatherInfo>Light rain</WeatherInfo>
            <Umidity>87 %</Umidity>
          </WeatherInfoContainer>
          <AnimationContainer>
            <LottieView source={LottieAnimationJson} autoPlay loop />
          </AnimationContainer>
        </Body>
        <Bottom>
          <Observations>
            Right now is 5ºC and feels like -1ºC outside. The wind is blowing
            around 8.7 km/h and the pressure is 1009 hPa.
          </Observations>
          <BookmarkButton>
            <ButtonText>Bookmark this location</ButtonText>
          </BookmarkButton>
        </Bottom>
      </Card>
    </PanGestureHandler>
  );
}