react-native-onboarding-flow
Version:
Beautiful, customizable onboarding flows for React Native with smooth animations
52 lines (51 loc) • 1.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.createSlideTransition = exports.createScaleInAnimation = exports.createSlideUpAnimation = exports.createFadeInAnimation = void 0;
const react_native_1 = require("react-native");
const createFadeInAnimation = (animatedValue, duration = 500, delay = 0) => {
return react_native_1.Animated.timing(animatedValue, {
toValue: 1,
duration,
delay,
easing: react_native_1.Easing.out(react_native_1.Easing.quad),
useNativeDriver: true,
});
};
exports.createFadeInAnimation = createFadeInAnimation;
const createSlideUpAnimation = (animatedValue, duration = 600, delay = 0) => {
return react_native_1.Animated.timing(animatedValue, {
toValue: 0,
duration,
delay,
easing: react_native_1.Easing.out(react_native_1.Easing.back(1.2)),
useNativeDriver: true,
});
};
exports.createSlideUpAnimation = createSlideUpAnimation;
const createScaleInAnimation = (animatedValue, duration = 400, delay = 0) => {
return react_native_1.Animated.spring(animatedValue, {
toValue: 1,
delay,
tension: 100,
friction: 8,
useNativeDriver: true,
});
};
exports.createScaleInAnimation = createScaleInAnimation;
const createSlideTransition = (fadeOut, fadeIn, duration = 300) => {
return react_native_1.Animated.sequence([
react_native_1.Animated.timing(fadeOut, {
toValue: 0,
duration: duration / 2,
easing: react_native_1.Easing.in(react_native_1.Easing.quad),
useNativeDriver: true,
}),
react_native_1.Animated.timing(fadeIn, {
toValue: 1,
duration: duration / 2,
easing: react_native_1.Easing.out(react_native_1.Easing.quad),
useNativeDriver: true,
}),
]);
};
exports.createSlideTransition = createSlideTransition;