awesome-text
Version:
A feature-rich React Native Text component offering smooth animations (zoom & bounce with Material Design easing), extensive typography (h1-h3, body, caption), custom styling (color, weight, alignment), and container customization. Perfect for creating en
220 lines (219 loc) • 8.19 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_native_1 = require("react-native");
var AwesomeText = function (_a) {
var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, _c = _a.color, color = _c === void 0 ? '#000000' : _c, _d = _a.weight, weight = _d === void 0 ? 'normal' : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, customStyle = _a.customStyle, children = _a.children, _f = _a.animation, animation = _f === void 0 ? 'none' : _f, _g = _a.duration, duration = _g === void 0 ? 1000 : _g, _h = _a.delay, delay = _h === void 0 ? 0 : _h, containerStyle = _a.containerStyle, _j = _a.minZoom, minZoom = _j === void 0 ? 0.8 : _j, _k = _a.maxZoom, maxZoom = _k === void 0 ? 1.2 : _k, props = __rest(_a, ["variant", "color", "weight", "align", "customStyle", "children", "animation", "duration", "delay", "containerStyle", "minZoom", "maxZoom"]);
var _l = (0, react_1.useState)(false), isMounted = _l[0], setIsMounted = _l[1];
// Animation values
var bounceValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
var zoomValue = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
var animationRef = (0, react_1.useRef)(null);
// Bounce Animation
var startBounceAnimation = function () {
if (animationRef.current) {
animationRef.current.stop();
}
animationRef.current = react_native_1.Animated.loop(react_native_1.Animated.sequence([
react_native_1.Animated.timing(bounceValue, {
toValue: 1,
duration: duration / 2,
useNativeDriver: true,
easing: react_native_1.Easing.out(react_native_1.Easing.bounce),
isInteraction: false,
}),
react_native_1.Animated.timing(bounceValue, {
toValue: 0,
duration: duration / 2,
useNativeDriver: true,
easing: react_native_1.Easing.in(react_native_1.Easing.bounce),
isInteraction: false,
}),
]), { iterations: -1 });
animationRef.current.start();
};
// Zoom Animation
var startZoomAnimation = function () {
if (animationRef.current) {
animationRef.current.stop();
}
animationRef.current = react_native_1.Animated.loop(react_native_1.Animated.sequence([
react_native_1.Animated.timing(zoomValue, {
toValue: maxZoom,
duration: duration,
useNativeDriver: true,
easing: react_native_1.Easing.bezier(0.4, 0, 0.2, 1),
isInteraction: false,
}),
react_native_1.Animated.timing(zoomValue, {
toValue: minZoom,
duration: duration,
useNativeDriver: true,
easing: react_native_1.Easing.bezier(0.4, 0, 0.2, 1),
isInteraction: false,
}),
]), {
iterations: -1,
resetBeforeIteration: true
});
animationRef.current.start();
};
(0, react_1.useEffect)(function () {
setIsMounted(true);
return function () { return setIsMounted(false); };
}, []);
(0, react_1.useEffect)(function () {
if (!isMounted)
return;
// Reset animations
bounceValue.setValue(0);
zoomValue.setValue(minZoom);
// Start new animations after a small delay
var animationTimeout = setTimeout(function () {
if (animation === 'bounce') {
requestAnimationFrame(function () { return startBounceAnimation(); });
}
else if (animation === 'zoom') {
requestAnimationFrame(function () { return startZoomAnimation(); });
}
}, delay);
// Cleanup function to stop animations
return function () {
clearTimeout(animationTimeout);
if (animationRef.current) {
animationRef.current.stop();
}
bounceValue.stopAnimation();
zoomValue.stopAnimation();
};
}, [animation, duration, delay, bounceValue, zoomValue, isMounted]);
var getVariantStyle = function () {
switch (variant) {
case 'h1':
return styles.h1;
case 'h2':
return styles.h2;
case 'h3':
return styles.h3;
case 'caption':
return styles.caption;
default:
return styles.body;
}
};
var getWeightStyle = function () {
switch (weight) {
case 'bold':
return styles.bold;
case 'light':
return styles.light;
default:
return styles.normal;
}
};
var getAnimationStyle = function () {
if (animation === 'bounce') {
return {
transform: [
{
translateY: bounceValue.interpolate({
inputRange: [0, 1],
outputRange: [0, -15],
}),
},
],
};
}
if (animation === 'zoom') {
return {
transform: [
{ scale: zoomValue }
],
};
}
return {};
};
var AnimatedText = react_native_1.Animated.createAnimatedComponent(react_native_1.Text);
return (<react_native_1.View style={[styles.container, containerStyle]}>
<AnimatedText style={[
getVariantStyle(),
getWeightStyle(),
{ color: color, textAlign: align },
getAnimationStyle(),
customStyle,
]} {...props}>
{children}
</AnimatedText>
</react_native_1.View>);
};
var styles = react_native_1.StyleSheet.create({
container: {
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
},
h1: {
fontSize: 32,
lineHeight: 40,
},
h2: {
fontSize: 24,
lineHeight: 32,
},
h3: {
fontSize: 20,
lineHeight: 28,
},
body: {
fontSize: 16,
lineHeight: 24,
},
caption: {
fontSize: 12,
lineHeight: 16,
},
bold: {
fontWeight: 'bold',
},
normal: {
fontWeight: 'normal',
},
light: {
fontWeight: '300',
},
});
exports.default = AwesomeText;