Quick Start

Step 1: Install Dependencies

Install React Native Reanimated (required by all components):

npx expo install react-native-reanimated

Step 2: Choose a Component

Let's start with the AnimatedNumber component - it's simple and doesn't require Skia:

Visit the AnimatedNumber documentation
Copy the AnimatedNumber.tsx file to your project
Save it as components/AnimatedNumber.tsx

Step 3: Use the Component

Create a simple example:

App.tsx

import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import AnimatedNumber from './components/AnimatedNumber';

export default function App() {
  const [number, setNumber] = useState('1234');

  return (
    <View style={styles.container}>
      <AnimatedNumber
        number={number}
        textStyle={styles.numberText}
        containerStyle={styles.numberContainer}
        separator="comma"
        separatorAnimation="swap"
        animationConfig={{
          type: "spring",
          damping: 20,
          stiffness: 120
        }}
      />
      
      <TextInput
        style={styles.input}
        value={number}
        onChangeText={setNumber}
        placeholder="Enter a number"
        keyboardType="numeric"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  numberContainer: {
    marginBottom: 40,
  },
  numberText: {
    fontSize: 48,
    fontWeight: 'bold',
    color: '#333',
  },
  input: {
    width: '100%',
    height: 50,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 16,
    fontSize: 18,
    backgroundColor: 'white',
  },
});