07 Sep 10:37

3ef6d9c

1.2.1 Latest

Latest

Release Date: September 7, 2025

🎯 Overview

This is a patch release with enhanced backdrop control functionality and comprehensive documentation improvements. The release introduces a new way to control backdrop behavior for better modal control and fixes several documentation issues.

🆕 New Features

Enhanced Backdrop Control

NEW: Support for onBackdropPress={false} to prevent backdrop clicks from closing the modal
Improvement: Better backdrop behavior control for critical modals and forms
Type Safety: Enhanced TypeScript support for the new backdrop API

Implementation Details

When onBackdropPress={false} is set:

Backdrop pressing will not trigger modal closure
Even if onHide is provided, backdrop won't call it
Modal can only be closed programmatically or through other enabled gestures
Useful for critical confirmations, forms, or loading states

// Prevent backdrop closing
<Modal
  visible={visible}
  onBackdropPress={false}
  onHide={() => setVisible(false)}
>
  {/* Critical content that shouldn't be accidentally dismissed */}
</Modal>

� Documentation Improvements

Enhanced API Documentation

Fixed: Corrected onBackdropPress type definition in documentation tables
Enhanced: Added comprehensive examples for backdrop control scenarios
Improved: Better type descriptions and usage patterns
Added: Practical examples for different backdrop configurations

Test Coverage Information

Added: Instructions for generating test coverage reports using jest --coverage
Improved: Better testing documentation and examples
Enhanced: More comprehensive test suite with new backdrop scenarios

Code Examples

Added: New backdrop control examples in README
Enhanced: Better inline documentation and comments
Improved: More practical usage scenarios and edge cases

🧪 Testing Improvements

New Test Cases

Test for onBackdropPress={false} blocking modal closure
Test for fallback to onHide when onBackdropPress is not provided
Test for closable={false} respecting backdrop press prevention
Enhanced edge case coverage for backdrop behavior

Test Coverage

Run tests with coverage using:

npm test -- --coverage

Current coverage: ~52% overall, focusing on critical user interactions and API surface.

🔧 Technical Changes

Type System Updates

Enhanced: onBackdropPress type from (() => void) | undefined to (() => void) | false | undefined
Improved: Better type inference and IDE support
Fixed: TypeScript compilation warnings and type overlaps

Component Logic

Updated: Backdrop press handler logic to respect false value
Improved: Conditional rendering logic for better performance
Enhanced: Event handling flow for more predictable behavior

🚀 Breaking Changes

None - All changes are backward compatible. Existing code will continue to work without modifications.

📚 Updated Files

src/types.ts: Enhanced type definitions for onBackdropPress
src/component.tsx: Updated backdrop press handling logic
src/__tests__/Modal.backdrop.test.tsx: Added comprehensive backdrop behavior tests
README.md: Enhanced documentation with new examples and corrected API tables

✅ Migration Guide

No migration required - this is a backward compatible enhancement. If you want to use the new feature:

// Before: backdrop always closes modal if onHide is provided
<Modal visible={visible} onHide={() => setVisible(false)}>
  {/* content */}
</Modal>

// After: backdrop can be disabled while keeping programmatic closing
<Modal
  visible={visible}
  onBackdropPress={false}
  onHide={() => setVisible(false)}
>
  {/* content */}
</Modal>

🔍 Use Cases for `onBackdropPress={false}`

Critical Confirmations: Prevent accidental dismissal of important dialogs
Form Modals: Ensure users complete or explicitly cancel forms
Loading States: Prevent dismissal during ongoing operations
Multi-step Processes: Control navigation flow in wizards
Error Dialogs: Ensure users acknowledge critical errors

🔗 Links

Assets 2

24 Aug 11:22

whidrubeld

1.2.0

ba6d0ff

1.2.0

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

Props: Rename animationConfig → animation, swipeConfig → swipe
Animation configs: Change animation property → type
Backdrop: Replace backdrop-related props with single backdrop prop
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

05 Aug 07:44

whidrubeld

1.1.4

571b578

1.1.4

Release Date: August 5, 2025

🎯 Overview

This is a minor release focused on comprehensive documentation improvements, enhanced example application, and a brand new Expo Go build. The release significantly improves developer experience with complete API documentation and better examples.

� Documentation Enhancements

Complete API Reference: Added missing property descriptions and comprehensive API documentation
Enhanced README: Improved visual presentation with centered sections and adaptive GIF sizing
Missing Properties: Added detailed descriptions for previously undocumented props and configuration options
Better Examples: Updated code examples with clearer explanations and practical use cases
TypeScript Support: Enhanced type definitions documentation and usage examples

🚀 Example Application Improvements

Modernized Examples: Updated example application with better demonstration of modal capabilities
Enhanced User Interface: Improved visual presentation and user experience in example app
New Use Cases: Added additional modal examples showcasing different animation and gesture configurations
Better Code Organization: Cleaner code structure and improved maintainability in examples

🎮 New Expo Go Build

Fresh Build: Created a new Expo Go build with all latest improvements and examples
Updated QR Code: New QR code for easy access to the improved example application
Enhanced Testing: Better testing experience with the latest example implementations
Instant Access: Immediate access to all new features and improvements via Expo Go

🛠️ Development Experience

Improved Documentation: Better developer onboarding with comprehensive API reference
Visual Enhancements: Centered and adaptive documentation presentation
Easy Testing: One-click access to examples via updated Expo Go build
Better Discoverability: Enhanced documentation structure for easier navigation

🚀 Breaking Changes

None - All changes are backward compatible. No code changes required for existing implementations.

📚 Updated Files

README.md: Major documentation improvements with centered sections, adaptive GIF, and complete API reference
example/: Enhanced example application with improved user interface and new use cases
RELEASE.md: Updated release notes focusing on documentation and example improvements

🔗 Links

Assets 2

03 Aug 23:46

whidrubeld

1.1.3

7e936cf

1.1.3

Release Date: August 4, 2025

🎯 Overview

This is a minor release that includes code improvements, documentation updates, and enhanced example application. The release focuses on better developer experience and improved project maintainability.

🔧 Code Improvements

Modal Component: Minor optimizations and code quality improvements in the core modal component
Performance: Enhanced callback handling and reduced unnecessary re-renders
Code Quality: Improved type safety and better error handling

� Documentation Updates

README: Updated documentation with clearer examples and better API descriptions
Code Examples: Improved code snippets and usage patterns
API Reference: Enhanced documentation for better developer understanding

🚀 Example Application

Example Upgrade: Modernized example application with latest dependencies
Better Demos: Improved modal examples showcasing various use cases
Enhanced UI: Better visual presentation of modal capabilities

� Development Experience

Expo Go Build: Updated Expo Go build for easier testing and development
Testing: Improved testing capabilities and easier project setup
Development Tools: Enhanced development workflow and debugging experience

🚀 Breaking Changes

None - All changes are backward compatible. No code changes required for existing implementations.

📚 Updated Files

README.md: Documentation improvements and better examples
example/: Upgraded example application with modern dependencies
src/component.tsx: Minor code optimizations and improvements

🔗 Links

Assets 2

03 Aug 17:54

whidrubeld

1.1.2

41cca2b

1.1.2

Release Date: August 3, 2025

🎯 Overview

This is a patch release that fixes critical state synchronization issues and improves modal stability. Internal refactoring eliminates animation deadlocks and ensures reliable parent-child state communication.

🐛 Fixed Issues

✅ State Synchronization: Fixed critical problems with parent state synchronization in various use cases
✅ Soft-lock Resolution: Eliminated animation soft-locks during rapid user interactions
✅ Multiple Callbacks: Prevented multiple onHide callback executions (reduced from 3-4 calls to 1)
✅ Animation Deadlocks: Resolved modal getting stuck in animation states during rapid clicks

🔧 Improvements

Internal Refactoring: Improved modal state management architecture for better reliability
Gesture Stability: Enhanced gesture handling to prevent conflicts with modal lifecycle
Performance: Optimized callback execution and state transitions

🚀 Breaking Changes

None - No changes required in existing code. All improvements are internal.

📚 Updated Files

src/component.tsx: Internal refactoring for improved state synchronization

🔗 Links

Assets 2

01 Aug 21:52

whidrubeld

1.1.0

e49a721

1.1.0

Release Date: August 2, 2025

🎯 Overview

This is a major release that introduces a new configuration-based API for better type safety, maintainability, and developer experience. This release focuses on modernizing the API while removing legacy props to clean up the codebase.

✨ New Features

🔧 Configuration-Based API

animationConfig: New unified configuration object for animations
- Supports fade, slide, and scale animations with type-safe properties
- Generic type ModalAnimationConfig<T> for full TypeScript support
- Backward compatible with string animation types
swipeConfig: New configuration object for swipe gestures
- directions: Array of allowed swipe directions (SwipeDirection[])
- enabled: Toggle swipe functionality
- threshold: Customizable swipe distance
- bounceSpringConfig: Custom bounce animation configuration
- bounceOpacityThreshold: Fine-tune bounce opacity behavior

🎨 Scale Animation Support

New scale animation with customizable scale factor
Smooth zoom-in/zoom-out effects for modal appearance
Configurable scale factor (0-1) for different animation intensities

🔄 API Changes

New Configuration Objects

// Animation Configuration
<Modal
  animationConfig={{
    animation: 'scale',
    duration: 400,
    scaleFactor: 0.8,
  }}
  swipeConfig={{
    enabled: true,
    directions: ['down', 'left', 'right'],
    threshold: 120,
  }}
>
  {/* Content */}
</Modal>

Enhanced Type Safety

Full TypeScript support with discriminated unions
Generic ModalAnimationConfig<T> type for animation-specific properties
Comprehensive type checking for configuration objects

Exported Constants

New constants available for custom configurations:

import {
  DEFAULT_MODAL_ANIMATION_DURATION,    // 300ms
  DEFAULT_MODAL_SCALE_FACTOR,          // 0.8
  DEFAULT_MODAL_BACKDROP_OPACITY,      // 0.7
  DEFAULT_MODAL_BACKDROP_COLOR,        // 'black'
  DEFAULT_MODAL_SWIPE_THRESHOLD,       // 100px
  DEFAULT_MODAL_BOUNCE_SPRING_CONFIG,  // Spring animation config
  DEFAULT_MODAL_BOUNCE_OPACITY_THRESHOLD, // 0.05
} from 'react-native-reanimated-modal';

🗑️ Breaking Changes

Removed Legacy Props

The following legacy props have been completely removed:

~~animation~~ → Use animationConfig.animation
~~animationDuration~~ → Use animationConfig.duration
~~swipeDirection~~ → Use swipeConfig.directions
~~swipeEnabled~~ → Use swipeConfig.enabled
~~swipeThreshold~~ → Use swipeConfig.threshold
~~bounceSpringConfig~~ → Use swipeConfig.bounceSpringConfig
~~bounceOpacityThreshold~~ → Use swipeConfig.bounceOpacityThreshold

Removed Functions

~~legacyPropsToConfig()~~ - No longer needed as legacy support is removed

📦 Updated Dependencies

Maintains compatibility with React Native Reanimated 3.x
Maintains compatibility with React Native Gesture Handler 2.x
No additional dependencies added

🧪 Testing

21 test suites pass successfully
All existing functionality thoroughly tested with new API
TypeScript compilation without errors
Updated example applications to use new configuration API

📝 Migration Guide

Before (v1.0.x)

<Modal
  visible={visible}
  animation="scale"
  animationDuration={500}
  swipeDirection={['down', 'left']}
  swipeThreshold={120}
  onHide={() => setVisible(false)}
>
  {/* Content */}
</Modal>

After (v1.1.0)

<Modal
  visible={visible}
  animationConfig={{
    animation: 'scale',
    duration: 500,
    scaleFactor: 0.8, // New scale-specific property
  }}
  swipeConfig={{
    directions: ['down', 'left'],
    threshold: 120,
  }}
  onHide={() => setVisible(false)}
>
  {/* Content */}
</Modal>

🎨 New Animation Examples

Scale Animation

const scaleConfig = {
  animation: 'scale',
  duration: 400,
  scaleFactor: 0.7, // Start from 70% size
};

Advanced Slide Animation

const slideConfig = {
  animation: 'slide',
  duration: 500,
  direction: {
    start: 'down',           // Slides in from bottom
    end: ['down', 'right'],  // Can dismiss by swiping down or right
  },
};

Swipe Configuration

const swipeConfig = {
  enabled: true,
  directions: ['up', 'down', 'left', 'right'], // All directions
  threshold: 100,
  bounceSpringConfig: {
    stiffness: 300,
    dampingRatio: 0.8,
    duration: 400,
  },
};

🚨 Important Notes

Breaking Changes: This is a major version update with breaking changes
Migration Required: Legacy props are completely removed - migration to new API is required
TypeScript: Full TypeScript support with improved type safety
Performance: No performance regressions - maintains 60fps animations
Bundle Size: Reduced bundle size by removing legacy code

📚 Documentation

Updated README.md with new API examples
Full TypeScript documentation
Migration guide for upgrading from v1.0.x
New configuration examples and best practices

🐛 Bug Fixes

Improved animation timing consistency
Better gesture handling edge cases
Enhanced TypeScript type inference

🔗 Links

👥 Contributors

@WhidRubeld - Core development and API design

Happy Coding! 🎉

Assets 2

31 Jul 23:43

whidrubeld

1.0.3

6085574

1.0.3

🆕 What's new in this release

This release brings new customization options, improved documentation, and a better developer experience.

✨ Added

renderBackdrop prop: Now you can provide a custom backdrop (e.g. BlurView, gradients) via the new renderBackdrop property.
Pointer events propagation: Modal now correctly propagates pointerEvents for advanced interaction scenarios.
TypeDoc documentation: All public API and props are now fully covered with TSDoc/TypeDoc for better IDE and website docs.

💎 Improved

Example app: The example project is expanded and now published in Expo Go for instant tryout.
Code annotations: All major props and internal logic are now documented with clear TSDoc comments.

� Fixed

Minor bugfixes and polish for edge-cases and prop handling.

🚀 Try it live

Expo Go: Scan the QR code in the README or open the published example in Expo Go to see all features in action.

📖 Documentation

Full API and usage docs: https://whidrubeld.github.io/react-native-reanimated-modal/

📦 How to update

Update your dependency:

npm install react-native-reanimated-modal@latest

🔗 Links

📦 NPM: https://www.npmjs.com/package/react-native-reanimated-modal
📖 Docs: https://whidrubeld.github.io/react-native-reanimated-modal/
🐛 Issues: https://github.com/WhidRubeld/react-native-reanimated-modal/issues
💬 Discussions: https://github.com/WhidRubeld/react-native-reanimated-modal/discussions

Assets 2

29 Jul 14:30

whidrubeld

1.0.0

2cabb3b

1.0.0

A complete rework of animation sequencing, improved backdrop behavior, and new advanced props for maximum flexibility.

✨ Added

New Props:
- closable: Controls whether the modal can be closed by user actions (backdrop press, swipe, hardware back).
- bounceSpringConfig: Allows customizing the spring config for bounce-back animation after a failed swipe.
- bounceOpacityThreshold: Fine-tunes the threshold for backdrop opacity correction during bounce.

💎 Improved

Animation Sequence: The entire animation flow is now fully synchronized and robust, eliminating race conditions and glitches during open/close and swipe interactions.
Backdrop Opacity: Backdrop fading logic has been rewritten for smoother, more natural transitions, especially during bounce-back.

📝 Updated

Documentation: All new props and behaviors are documented in the API section of the README.

⚠️ Breaking Change

Internal animation and state logic has been refactored. If you relied on undocumented behaviors or timing, please review

📦 How to update

Just update your dependency:

npm install react-native-reanimated-modal@latest

🔗 Links

📦 NPM Package: https://www.npmjs.com/package/react-native-reanimated-modal
📖 Documentation: https://github.com/WhidRubeld/react-native-reanimated-modal/blob/main/README.md#-api-documentation
🐛 Report Issues: https://github.com/WhidRubeld/react-native-reanimated-modal/issues
💬 Discussions: https://github.com/WhidRubeld/react-native-reanimated-modal/discussions

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Assets 2

28 Jul 10:14

whidrubeld

0.1.3

5897fb5

0.1.3

🚀 Documentation Update

The Basic Usage example in the README tutorial has been fixed for clarity and correctness.
Now you can copy-paste the example and it will work as expected with the latest API.

No code changes, just improved documentation for a smoother getting started experience.

📦 How to update

No action required if you are already on the latest version.
Check out the updated README for the correct usage example.

🔗 Links

📦 NPM Package: https://www.npmjs.com/package/react-native-reanimated-modal
📖 Documentation: https://github.com/WhidRubeld/react-native-reanimated-modal/blob/main/README.md#-api-documentation
🐛 Report Issues: https://github.com/WhidRubeld/react-native-reanimated-modal/issues
💬 Discussions: https://github.com/WhidRubeld/react-native-reanimated-modal/discussions

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Assets 2

28 Jul 10:07

whidrubeld

0.1.2

d098878

0.1.2

🚀 Minor Release

Major improvements and new features for better DX and testability.

✨ Added

Test IDs: New props backdropTestID, contentTestID, and containerTestID for easier and more robust testing.
Tests: Added modular unit tests covering core modal scenarios.

💥 Breaking Change

Prop Renamed: isVisible has been replaced with visible for consistency with the React Native Modal API.

📝 Updated

Documentation: All docs updated to reflect the new visible prop, testID usage, and testing best practices.

📦 How to update

Just update your dependency:

npm install react-native-reanimated-modal@latest

🔗 Links

📦 NPM Package: https://www.npmjs.com/package/react-native-reanimated-modal
📖 Documentation: https://github.com/WhidRubeld/react-native-reanimated-modal/blob/main/README.md#-api-documentation
🐛 Report Issues: https://github.com/WhidRubeld/react-native-reanimated-modal/issues
💬 Discussions: https://github.com/WhidRubeld/react-native-reanimated-modal/discussions

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Assets 2

Releases: whidrubeld/react-native-reanimated-modal

1.2.1

🎯 Overview

🆕 New Features

Enhanced Backdrop Control

Implementation Details

� Documentation Improvements

Enhanced API Documentation

Test Coverage Information

Code Examples

🧪 Testing Improvements

New Test Cases

Test Coverage

🔧 Technical Changes

Type System Updates

Component Logic

🚀 Breaking Changes

📚 Updated Files

✅ Migration Guide

🔍 Use Cases for onBackdropPress={false}

🔗 Links

Uh oh!

1.2.0

🎯 Overview

🆕 What changed (high level)

🧩 Details

API Modernization (BREAKING)

Modal Props Rename

Animation Config Property Rename

Backdrop API Unification (BREAKING)

TypeScript Improvements

Type Rename

New Types Added

📚 Updated Files

⚠️ Breaking Changes & Migration Guide

Required Code Updates

Migration Example

✅ Benefits

📈 Version History

🔗 Links

Uh oh!

1.1.4

🎯 Overview

� Documentation Enhancements

🚀 Example Application Improvements

🎮 New Expo Go Build

🛠️ Development Experience

🚀 Breaking Changes

📚 Updated Files

🔗 Links

Uh oh!

1.1.3

🎯 Overview

🔧 Code Improvements

� Documentation Updates

🚀 Example Application

� Development Experience

🚀 Breaking Changes

📚 Updated Files

🔗 Links

Uh oh!

1.1.2

🎯 Overview

🐛 Fixed Issues

🔧 Improvements

🚀 Breaking Changes

📚 Updated Files

🔗 Links

Uh oh!

1.1.0

🎯 Overview

✨ New Features

🔧 Configuration-Based API

🎨 Scale Animation Support

🔄 API Changes

New Configuration Objects

Enhanced Type Safety

Exported Constants

🗑️ Breaking Changes

Removed Legacy Props

🔍 Use Cases for `onBackdropPress={false}`