react-native-gesture-handler#PanGestureHandler JavaScript Examples

Catalog = ({
  collection, selectedRecordsGroupedByType, navigation, timelineIntervals,
}) => {
  const noRecords = timelineIntervals.recordCount === 0;
  return (
    <PanGestureHandler
      activeOffsetX={-10}
      failOffsetX={[-20, 0]}
      onGestureEvent={() => navigation.navigate('CollectionDetails')}
    >
      <View style={styles.drawerContainer}>
        <FilterDrawer>
          <CatalogScreenHeader collection={collection} navigation={navigation} />
          <Timeline noRecords={noRecords} />
          {noRecords && (
          <View style={styles.zeroStateContainer}>
            <Text style={styles.zeroStateText}>
              No Records available based on the Filters or the time interval.
            </Text>
          </View>
          )}
          {!noRecords && (
          <>
            <ResourceTypePicker />
            <ScrollView style={styles.scrollView}>
              <SubTypeAccordionsContainer data={selectedRecordsGroupedByType} />
            </ScrollView>
          </>
          )}
        </FilterDrawer>
      </View>
    </PanGestureHandler>
  );
}

render() {
    const { children, flush } = this.props;

    return (
      <View style={styles.container} ref={el => (this.container = el)}>
        <PanGestureHandler
          ref={this.drawerHandler}
          onGestureEvent={this.panEvent}
          onHandlerStateChange={this.onHandlerStateChange}
        >
          <Animated.View style={{ flex: 1 }}>
            <Animated.View
              style={[
                styles.darkened,
                {
                  backgroundColor: 'rgba(0, 0, 0, 1.0)',
                  opacity: this.translateY.interpolate({
                    inputRange: [0, windowHeight],
                    outputRange: [0.5, 0]
                  })
                }
              ]}
            />

            <Animated.View
              style={{
                flex: 1,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
                backgroundColor: '#f0f0f0',
                opacity: this.opacity,
                transform: [
                  {
                    translateY: this.translateY.interpolate({
                      inputRange: [0, windowHeight],
                      outputRange: [0, windowHeight],
                      extrapolate: 'clamp'
                    })
                  }
                ]
              }}
            >
              <View style={[styles.content, !flush && { paddingTop: 15 }]}>
                {typeof children === 'function'
                  ? children({
                      panEvent: this.panEvent,
                      onHandlerStateChange: this.onHandlerStateChange
                    })
                  : children}
              </View>
              <View style={styles.header}>
                <View style={styles.closeHandle} />
              </View>
            </Animated.View>
          </Animated.View>
        </PanGestureHandler>
      </View>
    );
  }

render() {
    const { shouldCheckScrollPan, forcedHeight } = this.state;
    const {
      renderHeader,
      renderScroll = this.defaultRenderScroll
    } = this.props;

    return (
      <BottomSheet
        ref={el => (this.sheet = el)}
        onMove={this.onMove}
        {...this.props}
      >
        {({ panEvent, onHandlerStateChange }) => {
          return (
            <View style={{ flex: 1 }}>
              {renderHeader && renderHeader()}
              <PanGestureHandler
                ref={this.checkScrollHandler}
                enabled={shouldCheckScrollPan}
                activeOffsetY={20}
                failOffsetY={[-1, 10000]}
                onGestureEvent={panEvent}
                onHandlerStateChange={onHandlerStateChange}
                simultaneousHandlers={this.scrollWrapperHandler}
              >
                <Animated.View style={{ flex: 1 }}>
                  <PanGestureHandler
                    ref={this.scrollWrapperHandler}
                    simultaneousHandlers={[
                      this.scrollHandler,
                      this.checkScrollHandler
                    ]}
                    onGestureEvent={this.onScrollPan}
                  >
                    <View
                      style={
                        forcedHeight
                          ? { flex: 1, paddingBottom: forcedHeight }
                          : { flex: 1 }
                      }
                    >
                      <NativeViewGestureHandler
                        ref={this.scrollHandler}
                        simultaneousHandlers={this.scrollWrapperHandler}
                        {...(shouldCheckScrollPan
                          ? { waitFor: this.checkScrollHandler }
                          : {})}
                      >
                        {renderScroll({
                          ref: el => (this.scrollView = el),
                          automaticallyAdjustContentInsets: false,
                          onScrollBeginDrag: this.onScrollBeginDrag,
                          onScrollEndDrag: this.onScrollEndDrag,
                          onScroll: this.onScroll,
                          onMomentumScrollEnd: this.onMomentumScrollEnd,
                          scrollEventThrottle: 1
                        })}
                      </NativeViewGestureHandler>
                    </View>
                  </PanGestureHandler>
                </Animated.View>
              </PanGestureHandler>
            </View>
          );
        }}
      </BottomSheet>
    );
  }

render() {
    const {
      type,
      categoryGroups,
      month,
      monthBounds,
      editMode,
      refreshControl,
      onPrevMonth,
      onNextMonth,
      onAddCategory,
      onReorderCategory,
      onReorderGroup,
      onShowBudgetDetails,
      onOpenActionSheet,
      onBudgetAction
    } = this.props;
    let { editingCategory } = this.state;
    let currentMonth = monthUtils.currentMonth();

    return (
      <NamespaceContext.Provider value={monthUtils.sheetForMonth(month, type)}>
        <View
          style={{ flex: 1, backgroundColor: 'white' }}
          data-testid="budget-table"
        >
          <BudgetHeader
            currentMonth={month}
            monthBounds={monthBounds}
            editMode={editMode}
            onDone={() => this.props.onEditMode(false)}
            onOpenActionSheet={onOpenActionSheet}
            onPrevMonth={onPrevMonth}
            onNextMonth={onNextMonth}
          />
          <View
            style={{
              flexDirection: 'row',
              paddingHorizontal: 10,
              paddingVertical: 10,
              paddingRight: 14,
              backgroundColor: 'white',
              borderBottomWidth: 1,
              borderColor: colors.n9
            }}
          >
            {type === 'report' ? (
              <Saved projected={month >= currentMonth} />
            ) : (
              <ToBudget
                toBudget={rolloverBudget.toBudget}
                onPress={onShowBudgetDetails}
              />
            )}
            <View style={{ flex: 1, zIndex: -1 }} />

            <View style={{ width: 90 }}>
              <Label title="BUDGETED" style={{ color: colors.n1 }} />
              <CellValue
                binding={reportBudget.totalBudgetedExpense}
                type="financial"
                style={[
                  styles.smallText,
                  { color: colors.n1, textAlign: 'right', fontWeight: '500' }
                ]}
                formatter={(value) => {
                  return format(-parseFloat(value || '0'), 'financial');
                }}
              />
            </View>
            <View style={{ width: 90 }}>
              <Label title="BALANCE" style={{ color: colors.n1 }} />
              <CellValue
                binding={rolloverBudget.totalBalance}
                type="financial"
                style={[
                  styles.smallText,
                  { color: colors.n1, textAlign: 'right', fontWeight: '500' }
                ]}
              />
            </View>
          </View>

          <AndroidKeyboardAvoidingView includeStatusBar={true}>
            {!editMode ? (
              <ScrollView
                ref={(el) => (this.list = el)}
                keyboardShouldPersistTaps="always"
                refreshControl={refreshControl}
                style={{ backgroundColor: colors.n10 }}
                automaticallyAdjustContentInsets={false}
              >
                <BudgetGroups
                  type={type}
                  categoryGroups={categoryGroups}
                  editingId={editingCategory}
                  editMode={editMode}
                  gestures={this.gestures}
                  month={month}
                  onEditCategory={this.onEditCategory}
                  onAddCategory={onAddCategory}
                  onReorderCategory={onReorderCategory}
                  onReorderGroup={onReorderGroup}
                  onBudgetAction={onBudgetAction}
                />
              </ScrollView>
            ) : (
              <DragDrop>
                {({
                  dragging,
                  onGestureEvent,
                  onHandlerStateChange,
                  scrollRef,
                  onScroll
                }) => (
                  <NativeViewGestureHandler
                    enabled={!dragging}
                    waitFor={this.gestures.pan}
                    ref={this.gestures.scroll}
                  >
                    <Animated.ScrollView
                      ref={(el) => {
                        scrollRef.current = el;
                        this.list = el;
                      }}
                      onScroll={onScroll}
                      keyboardShouldPersistTaps="always"
                      scrollEventThrottle={16}
                      scrollEnabled={!dragging}
                      style={{ backgroundColor: colors.n10 }}
                    >
                      <PanGestureHandler
                        avgTouches
                        minDeltaX={2}
                        minDeltaY={2}
                        maxPointers={1}
                        onGestureEvent={onGestureEvent}
                        onHandlerStateChange={onHandlerStateChange}
                        ref={this.gestures.pan}
                        waitFor={this.gestures.scroll}
                      >
                        <Animated.View>
                          <BudgetGroups
                            categoryGroups={categoryGroups}
                            editingId={editingCategory}
                            editMode={editMode}
                            gestures={this.gestures}
                            onEditCategory={this.onEditCategory}
                            onAddCategory={onAddCategory}
                            onReorderCategory={onReorderCategory}
                            onReorderGroup={onReorderGroup}
                          />
                        </Animated.View>
                      </PanGestureHandler>

                      <DragDropHighlight />
                    </Animated.ScrollView>
                  </NativeViewGestureHandler>
                )}
              </DragDrop>
            )}
          </AndroidKeyboardAvoidingView>
        </View>
      </NamespaceContext.Provider>
    );
  }

render() {
    const { transaction, exiting, getCategoryName, amountSign } = this.props;

    return (
      <View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          justifyContent: 'flex-end'
        }}
        pointerEvents={exiting ? 'none' : 'auto'}
      >
        <Animated.View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            backgroundColor: 'black',
            opacity: this.gestureY.interpolate({
              inputRange: [0, 400],
              outputRange: [0.4, 0],
              extrapolate: 'clamp'
            })
          }}
        />
        <PanGestureHandler
          onGestureEvent={this.gestureEvent}
          onHandlerStateChange={this.onHandlerStateChange}
        >
          <Animated.View
            style={{
              justifyContent: 'flex-end',
              backgroundColor: 'white',
              margin: 10,
              borderRadius: 4,
              overflow: 'hidden',
              transform: [{ translateY: this.gestureY }]
            }}
          >
            <View
              style={{
                borderBottomWidth: 1,
                borderColor: '#f0f0f0',
                flexDirection: 'row',
                justifyContent: 'center',
                padding: 15
              }}
            >
              <Text style={mobileStyles.header.headerTitleStyle}>
                Edit Split Transaction
              </Text>
            </View>
            <View
              style={{
                backgroundColor: '#FBFCFC'
              }}
            >
              <View style={{ alignItems: 'center', marginVertical: 15 }}>
                <FieldLabel
                  title="Amount"
                  flush
                  style={{ marginBottom: 0, paddingLeft: 0 }}
                />
                <FocusableAmountInput
                  value={transaction.amount}
                  sign={amountSign}
                  style={{ height: 26, transform: [] }}
                  focusedStyle={{
                    width: 'auto',
                    paddingVertical: 0,
                    paddingHorizontal: 10,
                    minWidth: 100,
                    transform: [{ translateY: -0.5 }]
                  }}
                  onBlur={value =>
                    this.props.onEdit(transaction, 'amount', value.toString())
                  }
                  textStyle={{ fontSize: 20, textAlign: 'center' }}
                />
              </View>

              <FieldLabel title="Category" flush />
              <TapField
                value={getCategoryName(transaction.category)}
                onTap={this.onEditCategory}
              />

              <FieldLabel title="Notes" />
              <InputField
                defaultValue={transaction.notes}
                multiline={true}
                numberOfLines={10}
                style={{ height: 60, marginBottom: 25 }}
                paddingTop={10}
                paddingBottom={10}
                onUpdate={value =>
                  this.props.onEdit(transaction, 'notes', value)
                }
              />
            </View>
          </Animated.View>
        </PanGestureHandler>
      </View>
    );
  }

export function PatternLock(props) {
  const [isError, setIsError] = useState(false);
  const canTouch = useSharedValue(true);
  const patternPoints = useSharedValue();
  const selectedIndexes = useSharedValue([]);
  const endPoint = useSharedValue();
  const containerLayout = useSharedValue({ width: 0, height: 0, min: 0 });
  const R = useDerivedValue(
    () =>
      (containerLayout.value.min / props.rowCount - props.patternMargin * 2) / 2
  );
  const cvc = useAnimatedStyle(() => ({
    flexDirection: "row",
    flexWrap: "wrap",
    marginBottom: `${
      Math.max(
        0,
        containerLayout.value.height / containerLayout.value.width - 1.25
      ) * 50
    }%`,
    width: containerLayout.value.min,
    height: containerLayout.value.min,
  }));
  const msgX = useSharedValue(0);
  const msgColor = { color: isError ? props.errorColor : props.activeColor };
  const msgStyle = useAnimatedStyle(() => {
    return { transform: [{ translateX: msgX.value }] };
  });
  const onContainerLayout = ({
    nativeEvent: {
      layout: { x, y, width, height },
    },
  }) =>
    (containerLayout.value = {
      width,
      height,
      min: Math.min(width, height),
    });
  const onPatternLayout = ({ nativeEvent: { layout } }) => {
    const points = [];
    for (let i = 0; i < props.rowCount; i++) {
      for (let j = 0; j < props.columnCount; j++) {
        points.push({
          x: layout.x + (layout.width / props.columnCount) * (j + 0.5),
          y: layout.y + (layout.height / props.rowCount) * (i + 0.5),
        });
      }
    }
    patternPoints.value = points;
  };
  const onEndJS = (res) => {
    if (props.onCheck) {
      canTouch.value = false;
      if (!props.onCheck(res)) {
        setIsError(true);
        const closeError = () => setIsError(false);
        runOnUI(() => {
          cancelAnimation(msgX);
          //修复iOS上原地spring不动的问题。
          msgX.value = withSpring(
            msgX.value === 0 ? 0.1 : 0,
            {
              stiffness: 2000,
              damping: 10,
              mass: 1,
              velocity: 2000,
            },
            (finished) => {
              runOnJS(closeError)();
              canTouch.value = true;
              selectedIndexes.value = [];
            }
          );
        })();
      } else {
        setIsError(false);
        setTimeout(() => {
          selectedIndexes.value = [];
          canTouch.value = true;
        }, 1000);
      }
    }
  };
  const panHandler = useAnimatedGestureHandler({
    onStart: (evt) => {
      if (
        canTouch.value &&
        patternPoints.value &&
        selectedIndexes.value.length === 0
      ) {
        const selected = [];
        patternPoints.value.every((p, idx) => {
          if (
            (p.x - evt.x) * (p.x - evt.x) + (p.y - evt.y) * (p.y - evt.y) <
            R.value * R.value
          ) {
            selected.push(idx);
            return false;
          }
          return true;
        });
        selectedIndexes.value = selected;
      }
    },
    onActive: (evt) => {
      if (
        canTouch.value &&
        patternPoints.value &&
        selectedIndexes.value.length > 0
      ) {
        patternPoints.value.every((p, idx) => {
          if (
            (p.x - evt.x) * (p.x - evt.x) + (p.y - evt.y) * (p.y - evt.y) <
            R.value * R.value
          ) {
            if (selectedIndexes.value.indexOf(idx) < 0) {
              selectedIndexes.value = [...selectedIndexes.value, idx];
            }
            return false;
          }
          return true;
        });
        endPoint.value = { x: evt.x, y: evt.y };
      }
    },
    onEnd: (evt) => {
      if (!canTouch.value) return;
      endPoint.value = null;
      if (selectedIndexes.value.length > 0)
        runOnJS(onEndJS)(selectedIndexes.value.join(""));
    },
  });
  const animatedProps = useAnimatedProps(() => {
    let d = "";
    selectedIndexes.value.forEach((idx) => {
      d += !d ? " M" : " L";
      d += ` ${patternPoints.value[idx].x},${patternPoints.value[idx].y}`;
    });
    if (d && endPoint.value) d += ` L${endPoint.value.x},${endPoint.value.y}`;
    if (!d) d = "M-1,-1";
    return { d };
  });

  return (
    <PanGestureHandler onGestureEvent={panHandler}>
      <Animated.View style={styles.container} onLayout={onContainerLayout}>
        <TapGestureHandler onGestureEvent={panHandler}>
          <Animated.View style={styles.container}>
            <View style={styles.msgc}>
              <Animated.Text style={[msgColor, msgStyle]}>
                {props.message}
              </Animated.Text>
            </View>
            <Animated.View style={cvc} onLayout={onPatternLayout}>
              {Array(props.rowCount * props.columnCount)
                .fill(0)
                .map((_, idx) => {
                  const patternColor = useDerivedValue(() => {
                    if (selectedIndexes.value.findIndex((v) => v === idx) < 0) {
                      return props.inactiveColor;
                    } else if (isError) {
                      return props.errorColor;
                    } else {
                      return props.activeColor;
                    }
                  });
                  const outer = useAnimatedStyle(() => {
                    return {
                      borderWidth: 2,
                      width: 2 * R.value,
                      height: 2 * R.value,
                      alignItems: "center",
                      justifyContent: "center",
                      borderColor: patternColor.value,
                      borderRadius: 2 * R.value,
                      margin: props.patternMargin,
                    };
                  });
                  const inner = useAnimatedStyle(() => {
                    return {
                      width: R.value * 0.8,
                      height: R.value * 0.8,
                      borderRadius: R.value * 0.8,
                      backgroundColor: patternColor.value,
                    };
                  });
                  return (
                    <Animated.View key={idx} style={outer}>
                      <Animated.View style={inner} />
                    </Animated.View>
                  );
                })}
            </Animated.View>
            <Svg style={styles.svg} width="100%" height="100%">
              <AnimatedPath
                fill="none"
                strokeWidth={3}
                animatedProps={animatedProps}
                stroke={isError ? props.errorColor : props.activeColor}
              />
            </Svg>
          </Animated.View>
        </TapGestureHandler>
      </Animated.View>
    </PanGestureHandler>
  );
}

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>
  );
}