How to use the react-native-reanimated.interpolate 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 / createKeyframesAnimation.js View on Github external
return ranges.reduce((acc, [name, range]) => {
    const animatedValue = A.interpolate(baseValue, {
      ...range,
      extrapolate: A.Extrapolate.CLAMP,
    });

    acc[name] = animatedValue;

    return acc;
  }, {});
}
github AbelTesfaye / dingo / src / UI / CustomModules / JS / TabBar.js View on Github external
_renderItem = props => ({ route, index }) => {
        const { position } = props;

        const inputRange = [0, 0.48, 0.49, 0.51, 0.52, 1, 1.48, 1.49, 1.51, 1.52, 2, 2.48, 2.49, 2.51, 2.52, 3];

        const scale = Animated.interpolate(position, {
            inputRange,
            outputRange: inputRange.map(x => (Math.trunc(x) === x ? 2 : 0.1)),
        });

        const opacity = Animated.interpolate(position, {
            inputRange,
            outputRange: inputRange.map(x => {
                const d = (x - Math.trunc(x)).toFixed(2);
                return d === (0.49).toFixed(2) || d === (0.51).toFixed(2) || Math.round(x) !== index ? 0 : 1;
            }),
        });
        return (
            <View style={{ ...styles.tab, alignItems: 'center', justifyContent: 'center' }}>
                <Animated.View style={[styles.item]}>
                    {
                        <Animated.View
github wcandillon / can-it-be-done-in-react-native / season3 / src / UberEats / TabHeader.tsx View on Github external
export default ({ transition, y, tabs, scrollView }: TabHeaderProps) => {
  const index = new Value<number>(0);
  const [measurements, setMeasurements] = useState<number[]>(
    new Array(tabs.length).fill(0)
  );
  const opacity = transition;
  const indexTransition = withTransition(index);
  const width = interpolate(indexTransition, {
    inputRange: tabs.map((_, i) => i),
    outputRange: measurements
  });
  const translateX = interpolate(indexTransition, {
    inputRange: tabs.map((_tab, i) => i),
    outputRange: measurements.map((_, i) => {
      return (
        -1 *
          measurements
            .filter((_measurement, j) => j < i)
            .reduce((acc, m) => acc + m, 0) -
        8 * i
      );
    })
  });
  const style = {
github react-navigation / stack / example / src / StackAnimationConsumerStack.tsx View on Github external
{value => (
        <Animated.Text
          style={{
            fontSize: 24,
            opacity: value
              ? Animated.interpolate(value.closing, {
                  inputRange: [0, 1],
                  outputRange: [1, 0],
                })
              : 1,
          }}
        >
          Disappears only when closing
        </Animated.Text>
      )}
    </StackCardAnimationContext.Consumer>
github wix / react-native-ui-lib / src / components / sharedTransition / SharedArea.js View on Github external
getElementStyle() {
    const {sourceLayout, targetLayout} = this.state;
    if (sourceLayout && this.transition) {
      return {
        position: 'absolute',
        width: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.width, targetLayout.width],
        }),
        height: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.height, targetLayout.height],
        }),
        top: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.y, targetLayout.y],
        }),
        left: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.x, targetLayout.x],
        }),
      };
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 react-native-community / react-native-tab-view / example / src / CoverflowExample.tsx View on Github external
}
    });
    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,
    };
  }, [index, layout, length, position]);
github wcandillon / can-it-be-done-in-react-native / season3 / src / UberEats / TabHeader.tsx View on Github external
export default ({ transition, y, tabs, scrollView }: TabHeaderProps) => {
  const index = new Value<number>(0);
  const [measurements, setMeasurements] = useState<number[]>(
    new Array(tabs.length).fill(0)
  );
  const opacity = transition;
  const indexTransition = withTransition(index);
  const width = interpolate(indexTransition, {
    inputRange: tabs.map((_, i) => i),
    outputRange: measurements
  });
  const translateX = interpolate(indexTransition, {
    inputRange: tabs.map((_tab, i) => i),
    outputRange: measurements.map((_, i) => {
      return (
        -1 *
          measurements
            .filter((_measurement, j) => j < i)
            .reduce((acc, m) => acc + m, 0) -
        8 * i
      );
    })
  });
  const style = {
    borderRadius: 24,
    backgroundColor: "black",
    width,
    flex: 1
github wix / react-native-ui-lib / src / components / sharedTransition / SharedArea.js View on Github external
if (sourceLayout && this.transition) {
      return {
        position: 'absolute',
        width: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.width, targetLayout.width],
        }),
        height: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.height, targetLayout.height],
        }),
        top: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.y, targetLayout.y],
        }),
        left: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.x, targetLayout.x],
        }),
      };
    }
  }
github FormidableLabs / react-native-interactions-workshop / app / src / components / misc / Header.js View on Github external
const getFloatingPositions = (index, zoom) => {
  const arr = Array.from({ length: CELL_NUM });
  const opacity = Animated.interpolate(zoom, {
    inputRange: [0, 0.5, 1],
    outputRange: [1, 0, 0]
  });

  return arr.map((_, i) => {
    const offsetX = -1 * i * CELL_WIDTH - theme.sizes.mid;
    const offsetY = -1 * theme.sizes.mid;
    const isZooming = Animated.eq(index, i);

    const translateX = Animated.interpolate(zoom, {
      inputRange: [0, 0.8, 1],
      outputRange: [0, offsetX, offsetX]
    });

    const translateY = Animated.interpolate(zoom, {
      inputRange: [0, 0.8, 1],