@ffsm/native-animate

Only React Native and Javascript Animations

Installation

npm i @ffsm/native-animate

OR

yarn add @ffsm/native-animate

Using

import { Pressable, StyleSheet, useWindowDimensions } from "react-native";
import { Animated, flattenStyle, useNativeAnimate } from "@ffsm/native-animate";

export default function App() {
  const { width, height } = useWindowDimensions();
  const animated = useNativeAnimate();

  const animate = animated.animate({
    opacity: [0, 0.5, 1],
    scale: [0.4, 0.8, 1.2, 1.6],
  });

  const handlePress = async () => {
    // Timing to opacity: 0.5
    await animated.timing(1/2).start();

    // Timing to scale 0.8
    await animated.timing(1/3).start();

    // Timing to scale 1.2
    await animated.timing(2/3).start();
  };

  return (
    <View style={flattenStyle([
      styles.screen,
      {
        width,
        height,
      }
    ])}>
      <Animated.View style={flattenStyle([
        styles.box,
        animate
      ])}>
        <Animated.Text>
          Box
        </Animated.Text>
      </Animated.View>
      <Pressable style={styles.button} onPress={handlePress}>
        <Animated.Text>Press animate</Animated.Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  screen: {
    justifyContent: "center",
    alignItems: "center",
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: "#86EFAC",
  },
  button: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: '#86EFAC',
    marginTop: 16,
  },
});

• Value of timing: {index_of_value}/{last_index_of_outputs}. Inside of timing function, value will be handle with .toFixed(6).

withNativeAnimate

Make a component with initilize animate via nativeAnimate props.

import { Pressable, Text } from "@ffsm/native-animate";

export default function App() {
  return (
    <Pressable
      nativeAnimate={{
        opacity: [0.5, 1],
        auto: true,
        back: true
      }}
    >
      <Text>Auto animate</Text>
    </Pressable>
  );
}