Skip to content

1.2.0

Latest
Latest
Compare
Choose a tag to compare
@whidrubeld whidrubeld released this 24 Aug 11:22
· 3 commits to main since this release
1.2.0
ba6d0ff

Release Date: August 24, 2025

🎯 Overview

Major version release with significant API improvements and modernization. This release introduces breaking changes to create a more consistent, intuitive, and type-safe API for the React Native Reanimated Modal component.

🆕 What changed (high level)

  • BREAKING: Renamed Modal props: animationConfig → animation, swipeConfig → swipe
  • BREAKING: Changed animation config property: animation → type in all config interfaces
  • BREAKING: Unified backdrop properties into single backdrop prop with multiple configuration options
  • BREAKING: Renamed TypeScript type SwipeConfig → ModalSwipeConfig
  • Updated documentation with new QR code and comprehensive API examples
  • Improved type safety and developer experience across the codebase

🧩 Details

API Modernization (BREAKING)

Modal Props Rename

  • Changed: animationConfig → animation, swipeConfig → swipe
    • Rationale: Shorter, cleaner prop names that are more intuitive and follow modern React patterns
    • Migration: 
      // Before
<Modal animationConfig={{ type: 'fade', duration: 300 }} swipeConfig={{ enabled: true }} />

// After
<Modal animation={{ type: 'fade', duration: 300 }} swipe={{ enabled: true }} />

Animation Config Property Rename

  • Changed: animation property → type in all animation config interfaces
    • Rationale: Avoids naming confusion with the new animation prop and makes the purpose clearer
    • Migration: 
      // Before
{ animation: 'fade', duration: 300 }

// After
{ type: 'fade', duration: 300 }

Backdrop API Unification (BREAKING)

  • Unified: hasBackdrop, backdropColor, backdropOpacity, renderBackdrop → single backdrop prop
    • Rationale: Simpler API with better type safety, clearer intent, and more flexible configuration
    • New Type: ModalBackdrop = ModalBackdropConfig | ReactNode | false
    • Migration: 
      // Before - Disable backdrop
<Modal hasBackdrop={false} />

// After
<Modal backdrop={false} />

// Before - Styled backdrop
<Modal backdropColor="red" backdropOpacity={0.5} />

// After
<Modal backdrop={{ color: "red", opacity: 0.5 }} />

// Before - Custom backdrop
<Modal renderBackdrop={() => <BlurView />} />

// After
<Modal backdrop={<BlurView />} />

TypeScript Improvements

Type Rename

  • Renamed: SwipeConfig → ModalSwipeConfig
    • Rationale: Clarifies that the configuration applies specifically to the Modal component and avoids potential name collisions
    • Migration: 
      // Before
import type { SwipeConfig } from 'react-native-reanimated-modal'

// After
import type { ModalSwipeConfig } from 'react-native-reanimated-modal'

New Types Added

  • ModalBackdropConfig - Configuration object for backdrop styling
  • ModalBackdrop - Union type for all backdrop configuration options

📚 Updated Files

  • src/types.ts - New backdrop types, prop renames, animation config updates
  • src/component.tsx - Updated to use new prop names and backdrop API
  • src/config.ts - New backdrop configuration utilities, renamed logic properties
  • src/examples.ts - Updated all examples to use new API
  • example/src/use-cases/* - All example components updated with new API
  • src/__tests__/* - All tests updated for new APIs and improved coverage
  • README.md - Comprehensive documentation updates with new examples and QR code
  • RELEASE.md - This file

⚠️ Breaking Changes & Migration Guide

Required Code Updates

  1. Props: Rename animationConfig → animation, swipeConfig → swipe
  2. Animation configs: Change animation property → type
  3. Backdrop: Replace backdrop-related props with single backdrop prop
  4. TypeScript: Update SwipeConfig imports → ModalSwipeConfig

Migration Example

// Before (v1.1.x)
import type { SwipeConfig } from 'react-native-reanimated-modal';

<Modal
  animationConfig={{ animation: 'slide', duration: 300 }}
  swipeConfig={{ enabled: true, direction: 'down' }}
  hasBackdrop={true}
  backdropColor="black"
  backdropOpacity={0.7}
/>

// After (v1.2.0)
import type { ModalSwipeConfig } from 'react-native-reanimated-modal';

<Modal
  animation={{ type: 'slide', duration: 300 }}
  swipe={{ enabled: true, direction: 'down' }}
  backdrop={{ enabled: true, color: 'black', opacity: 0.7 }}
/>

✅ Benefits

  • Cleaner API: More intuitive prop names and better organization
  • Better TypeScript: Improved type safety and more precise type definitions
  • Flexible Backdrop: Unified backdrop configuration with support for custom renderers
  • Consistency: Standardized naming patterns across the entire codebase
  • Future-proof: Better foundation for future feature additions

📈 Version History

  • 1.2.0 (August 24, 2025) - Major API modernization with breaking changes
  • 1.1.5 (August 24, 2025) - Intermediate development version
  • 1.1.4 - Previous stable release

🔗 Links

Assets 2
Loading