import { ModeToggle } from '@/components/ui/mode-toggle';
import React from 'react';

export function ModeToggleDemo() {
  return <ModeToggle />;
}

Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add mode-toggle
Copy

Usage

Copyimport { ModeToggle } from '@/components/ui/mode-toggle';

Copy<ModeToggle />

Examples

Default

import { ModeToggle } from '@/components/ui/mode-toggle';
import React from 'react';

export function ModeToggleDemo() {
  return <ModeToggle />;
}

API Reference

ModeToggle

An animated button that toggles between light and dark themes.

The component uses the Button component internally, so it inherits button styling and behavior.

Animation Details

Icon Transition

• Scale Animation: Icons scale down to 0, change, then scale back to 1
• Duration: 150ms for each scale phase (300ms total)
• Icons: Sun for light mode, Moon for dark mode

Sun Rotation

• Rotation: 180° rotation when switching to light mode
• Duration: 300ms
• Effect: Creates a spinning sun rays effect
• Timing: Only rotates when switching to sun icon

Theme Integration

The ModeToggle requires:

• useModeToggle hook for theme switching logic
• Theme context that provides isDark state
• toggleMode function to change themes

Example theme hook:

Copyconst { toggleMode, isDark } = useModeToggle();

Performance

The component is optimized for smooth animations:

• Uses react-native-reanimated for 60fps animations
• Animations run on the UI thread
• Minimal re-renders with useSharedValue
• Efficient icon switching with runOnJS

Accessibility

The ModeToggle maintains accessibility:

• Uses semantic button component
• Screen readers announce theme changes
• Maintains proper focus behavior
• Works with keyboard navigation
• Respects system accessibility settings

Integration Example

Copy// App.tsx
import { ModeToggle } from '@/components/ui/mode-toggle';
import { ThemeProvider } from '@/context/theme';
 
export default function App() {
  return (
    <ThemeProvider>
      <View style={styles.header}>
        <Text>My App</Text>
        <ModeToggle />
      </View>
      {/* Rest of your app */}
    </ThemeProvider>
  );
}

Dependencies

The component requires these utilities to function:

• useModeToggle: Hook for theme switching logic
• Button: Base button component
• Icon: Themed icon wrapper
• Theme context with isDark and toggleMode