Animations

A React Native app showcasing various animations and transitions.

Project Structure

src/
├── components/     # Shared components
├── constants/      # Global constants and configurations
├── hooks/         # Custom hooks
├── scenes/        # Individual animation scenes
│   ├── scene1/    # First scene
│   ├── scene2/    # Second scene
│   └── ...        # Additional scenes
├── store/         # State management
└── theme/         # Theme configuration

Development Guidelines

1. Component Naming & Usage

• Use AnimatedView for animated components

• Use View for static components

• Use Text for text components

• Never use StyleSheet from 'react-native'

• Use component props for styling:

  // ❌ Don't do this:
  import { StyleSheet } from 'react-native';
  const styles = StyleSheet.create({ ... });
  <View style={styles.container} />
  
  // ✅ Do this instead:
  <View flex={1} backgroundColor='white' alignItems='center'>

2. Theme & Styling

• Always use string literals for theme colors (e.g., theme.colors.white)
• Use component props for styling instead of StyleSheet
• Follow consistent styling patterns across components

3. Scene Development

1. Create new scene directory in src/scenes/

2. Add scene configuration to src/constants/scenes.ts

3. Create scene component with proper imports and types

4. Add scene to src/App.tsx:

   import { SceneX } from 'scenes/sceneX';
   
   function MainContent() {
     const { currentScene } = useAppStore();
     return (
       <View style={styles.container}>
         {currentScene === 'sceneX' && <SceneX />}
         <StatusBar style='auto' />
       </View>
     );
   }

4. Scene Configuration

Each scene must have configuration in src/constants/scenes.ts:

sceneX: {
  // Required fields
  animation1: number,    // Duration in ms
  animation2?: number,   // Optional secondary animation
  delay?: number,        // Optional initial delay
  // Scene-specific fields
  ...
}

5. Scene Control

• Use useComplete hook for scene completion
• Use AppStore's nextScene for transitions