import { HelloWave } from '@/components/ui/hello-wave';
import React from 'react';

export function HellowWaveDemo() {
  return <HelloWave>👋</HelloWave>;
}

Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add hello-wave
Copy

Usage

Copyimport { HelloWave } from '@/components/ui/hello-wave';

Copy<HelloWave />

Copy<HelloWave size='lg' />

Copy<HelloWave size='sm'>🙋‍♀️</HelloWave>

Examples

Default

import { HelloWave } from '@/components/ui/hello-wave';
import React from 'react';

export function HellowWaveDemo() {
  return <HelloWave>👋</HelloWave>;
}

API Reference

HelloWave

An animated component that displays a waving hand emoji with rotation animation and customizable sizes.

Size Variants

The component includes three predefined size variants:

Animation Details

• Duration: 150ms for each rotation phase
• Rotation Range: 0° to 25° and back to 0°
• Repetitions: 4 complete wave cycles
• Timing: Runs automatically on component mount
• Easing: Uses default timing function for smooth animation

Customization

Custom Content

You can pass any content as children, not just the default wave emoji:

Copy<HelloWave>🙋‍♀️</HelloWave>
<HelloWave>✨</HelloWave>
<HelloWave size="lg">🎉</HelloWave>

Custom Components

For more complex customization, you can pass React components:

Copy<HelloWave>
  <CustomIcon name='wave' />
</HelloWave>

Styling

The component uses a centered container layout. For additional styling, wrap the component:

Copy<View style={{ margin: 16 }}>
  <HelloWave size='lg' />
</View>

Technical Notes

• Uses react-native-reanimated for smooth 60fps animations
• Animation runs on the UI thread for better performance
• Automatically starts animation when component mounts
• Uses useSharedValue and useAnimatedStyle for optimal performance
• Size variants include margin adjustments for proper vertical alignment
• Supports both string content and React components as children

Accessibility

The HelloWave component:

• Uses semantic emoji that screen readers can interpret
• Maintains proper text sizing for accessibility
• Works with system accessibility settings
• Animation doesn't interfere with screen reader functionality
• Proper font sizing scales with system text size preferences