@chainplatform/animated

Animation lib from Chain Platform (Bros Chain).

DancingText — text animation.

ImageView — Smooth image loading with shimmer or solid placeholder. Supports React Native, React Native Web, and SVG images.

📦 Installation

npm install @chainplatform/animated
# or
yarn add @chainplatform/animated

🚀 Usage

import { View } from "react-native";
import { DancingText, ImageView } from '@chainplatform/animated';

export default function Home() {

  return (
    <View style={{ flex: 1 }}>
      <DancingText 
        letters={"Chain Platform"}
        textStyle={{
          fontSize: 14,
          fontWeight: "500",
          color: "red"
        }}
      />
      <ImageView
          imageType="link"
          source="https://example.com/logo.png"
          resizeMode="contain"
          placeholderType="shimmer"
          placeholderColor="#f0f0f0"
          shimmerAngle={20}
          shimmerWidth={24}
          shimmerSpeed={1200}
          shimmerIntensity={0.6}
          transitionDuration={300}
          style={{
            width: 120,
            height: 60,
            borderRadius: 8,
            backgroundColor: '#eee',
          }}
          onImageLoaded={() => console.log('Image loaded!')}
        />
    </View>
  );
}

⚙️ DancingText Props

| Prop | Type | Default | Description | |------|------|----------|-------------| | letters | string | — | aniamted text | | textStyle | object | — | Container or image style |

⚙️ ImageView Props

| Prop | Type | Default | Description | |------|------|----------|-------------| | imageType | "link" | "local" | — | Image source type | | source | string | require() | — | Image URL or local file | | resizeMode | string | 'cover' | React Native Image resize mode | | placeholderType | "solid" | "shimmer" | "shimmer" | Type of loading placeholder | | placeholderColor | string | #e0e0e0 | Background color for placeholder | | transitionDuration | number | 300 | Fade-in transition duration | | shimmerAngle | number | 15 | Angle of shimmer highlight (in degrees) | | shimmerWidth | number | 20 | Width of shimmer band | | shimmerSpeed | number | 1300 | Animation duration for shimmer loop | | shimmerIntensity | number | 0.55 | Brightness of shimmer center | | onImageLoaded | (loaded: boolean) => void | — | Callback fired when image finishes loading | | style | object | — | Container or image style |

💡 Notes

• Fully compatible with React Native Web.
• Supports SVG via react-native-svg.
• Automatically detects SVG format from URL.
• Animation uses useNativeDriver when possible for smoother performance.

🪪 License

MIT © 2025 Chain Platform

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Cryptocurrency | Address | |----------------|----------| | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀