Getting Started
Learn how to integrate Chisa UI into your React Native project and start creating organic, fluid animations with just a few lines of code.
Chisa UI is a component library built on top of Reanimated. It aims to provide "drop-in" motion components that feel natural and performant at 60fps, even on older devices.
Prerequisites
You need a React Native project set up with react-native-reanimated (v2.0.0+) configured correctly in your babel.config.js.
Installation
Install the package and its peer dependencies via your package manager of choice.
npm install react-native-reanimatedOr if you prefer Yarn:
yarn add react-native-reanimatedUsing the CLI
The easiest way to add components is with our CLI tool. It copies the component source code directly into your project.
# List all available components
npx @chisa-ui/cli list
# Add a specific component
npx @chisa-ui/cli add fade-in
# Add multiple components
npx @chisa-ui/cli add fade-in slide-in bounceBasic Usage
Import the component and wrap your content. The `delay` and animation props allow you to orchestrate the entrance animation effortlessly.
import React from 'react';
import { View, Text } from 'react-native';
import { FadeIn } from './components/FadeIn';
export default function App() {
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
<FadeIn duration={500} delay={300}>
<Text style={{ fontSize: 24 }}>
Hello, fluid world!
</Text>
</FadeIn>
</View>
);
}