How to use the react-native-reanimated.Extrapolate function in react-native-reanimated

To help you get started, we’ve selected a few react-native-reanimated examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github terrysahaidak / react-native-reanimatable / lib / core / createInterpolationTransitionAnimation.js View on Github external
const item = config.values[key];

        const inputRange = [0, config.animation.duration];
        const outputRange = [item.from, item.to];

        // reverse input range
        // in order to animate value in reverse way
        // from `to` to `from`
        if (stateValue) {
          outputRange.reverse();
        }

        const valueAnimation = A.interpolate(interpolator, {
          inputRange,
          outputRange,
          extrapolate: A.Extrapolate.CLAMP,
        });

        animatedBlock.push(valueAnimation);

        animationValues[key] = A.block(animatedBlock);
      });
github osdnk / react-native-reanimated-bottom-sheet / Example / src / screen / AppleMusic.tsx View on Github external
const AppleMusic = () => {
  let bottomSheetRef = React.createRef<BottomSheet>()
  let fall = new Animated.Value(1)

  const animatedSongCoverTopPosition = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: songCoverTopPositions.slice().reverse(),
    extrapolate: Animated.Extrapolate.CLAMP,
  })

  const animatedSongCoverSize = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: [songCoverSizes[0], songCoverSizes[1]].slice().reverse(),
    extrapolate: Animated.Extrapolate.CLAMP,
  })

  const animatedHeaderContentOpacity = Animated.interpolate(fall, {
    inputRange: [0.75, 1],
    outputRange: [0, 1],
    extrapolate: Animated.Extrapolate.CLAMP,
  })

  const onFlatListTouchStart = () => {
    bottomSheetRef.current!.snapTo(0)
github terrysahaidak / react-native-retween / src / common.ts View on Github external
(
    value: A.Value<number>,
    input1: A.Adaptable<number>,
    input2: A.Adaptable<number>,
    output1: A.Adaptable<number>,
    output2: A.Adaptable<number>,
  ) =>
    A.interpolate(value, {
      inputRange: [input1, input2],
      outputRange: [output1, output2],
      extrapolate: A.Extrapolate.EXTEND,
    }),
);
github bamlab / react-native-image-header-scroll-view / src / modules / Overlay / Overlay.component.tsx View on Github external
interpolateOnImageHeight(outputRange: Array<number>) {
    const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
    return this.props.scrollValue.interpolate({
      inputRange: [0, headerScrollDistance],
      outputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
  }
github bamlab / react-native-image-header-scroll-view / src / modules / FixedContent / FixedContent.component.tsx View on Github external
render() {
    const { scrollValue } = this.props;
    const headerScale = scrollValue.interpolate({
      inputRange: [-this.props.maxHeight, 0],
      outputRange: [3, 1],
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    let height: ReturnType<typeof scrollValue.interpolate> | number = this.props.maxHeight;

    if (this.props.isForeground && this.props.minHeight) {
      const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
      height = scrollValue.interpolate({
        inputRange: [0, headerScrollDistance],
        outputRange: [this.props.maxHeight, this.props.minHeight],
        extrapolate: Animated.Extrapolate.CLAMP,
      });
    }

    const headerTransformStyle = {
      height,
      transform: !this.props.disableHeaderGrow ? [{ scale: headerScale }] : undefined,
    };

    return (
      <Animated.View
        style={[styles.header, headerTransformStyle, this.props.headerContainerStyle]}
        testID={this.props.testId || 'header'}
      >
        {this.props.render()}
      </Animated.View>
    );
github terrysahaidak / react-native-reanimatable / lib / core / createDelegateAnimation.js View on Github external
return Object.keys(normalized).reduce((acc, name) => {
    const pairs = normalized[name];

    const { inputRange, outputRange } = generateRanges(pairs);

    const animatedValue = A.interpolate(baseValue, {
      inputRange,
      outputRange,
      extrapolate: A.Extrapolate.CLAMP,
    });

    acc[name] = animatedValue;

    return acc;
  }, {});
}
github rainbow-me / rainbow / src / screens / CurrencySelectModal.js View on Github external
if (type === CurrencySelectionTypes.input) {
      headerTitle = 'Swap';
      assets = assetsAvailableOnUniswap;
    } else if (type === CurrencySelectionTypes.output) {
      headerTitle = 'Receive';
    }

    const listItems = filterList(assets, searchQuery, 'uniqueId');

    return (
      <KeyboardFixedOpenLayout>
        <Animated.View
          style={{
            ...position.sizeAsObject('100%'),
            opacity: interpolate(transitionPosition, {
              extrapolate: Animated.Extrapolate.CLAMP,
              inputRange: [0, 1],
              outputRange: [0, 1],
            }),
          }}
        >
          <Modal
            containerPadding={0}
            height="100%"
            overflow="hidden"
            radius={exchangeModalBorderRadius}
          >
            <GestureBlocker type="top" />
            <NavigationEvents
              onDidBlur={this.handleDidBlur}
              onWillBlur={this.handleWillBlur}
              onWillFocus={this.handleWillFocus}
github rainbow-me / rainbow / src / screens / ExchangeModal.js View on Github external
const isSlippageWarningVisible =
      isSufficientBalance && !!inputAmount && !!outputAmount;
    return (
      <KeyboardFixedOpenLayout>
        <NavigationEvents onWillFocus={this.handleKeyboardManagement} />
        <Centered
          {...position.sizeAsObject('100%')}
          backgroundColor={colors.transparent}
          direction="column"
        >
          <AnimatedFloatingPanels
            margin={0}
            style={{
              opacity: interpolate(tabPosition, {
                extrapolate: Animated.Extrapolate.CLAMP,
                inputRange: [0, 1],
                outputRange: [1, 0],
              }),
            }}
          >
            <FloatingPanel
              radius={exchangeModalBorderRadius}
              overflow="visible"
            >
              <GestureBlocker type="top" />
              <ExchangeModalHeader />
              <ExchangeInputField
                inputAmount={inputAmountDisplay}
                inputCurrencySymbol={get(inputCurrency, 'symbol', null)}
                inputFieldRef={this.assignInputFieldRef}
                isAssetApproved={isAssetApproved}
github react-native-community / react-native-tab-view / example / src / CoverflowExample.tsx View on Github external
} else {
        return 0.7;
      }
    });
    const opacityOutputRange = inputRange.map(i => {
      if (index === i) {
        return 1;
      } else {
        return 0.3;
      }
    });

    const translateX = Animated.interpolate(position, {
      inputRange,
      outputRange: translateOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
    const scale = Animated.interpolate(position, {
      inputRange,
      outputRange: scaleOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
    const opacity = Animated.interpolate(position, {
      inputRange,
      outputRange: opacityOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    return {
      transform: [{ translateX }, { scale }],
      opacity,
    };
github bamlab / react-native-image-header-scroll-view / src / modules / FixedContent / FixedContent.component.tsx View on Github external
render() {
    const { scrollValue } = this.props;
    const headerScale = scrollValue.interpolate({
      inputRange: [-this.props.maxHeight, 0],
      outputRange: [3, 1],
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    let height: ReturnType<typeof scrollValue.interpolate> | number = this.props.maxHeight;

    if (this.props.isForeground && this.props.minHeight) {
      const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
      height = scrollValue.interpolate({
        inputRange: [0, headerScrollDistance],
        outputRange: [this.props.maxHeight, this.props.minHeight],
        extrapolate: Animated.Extrapolate.CLAMP,
      });
    }

    const headerTransformStyle = {
      height,
      transform: !this.props.disableHeaderGrow ? [{ scale: headerScale }] : undefined,