Flexible react-native modal with animated gestures and scrollable integration.
npm install @hyoper/rn-animated-modal
A highly customizable React Native modal component. Perfect for mobile applications, this modal enhances user experience by combining fluid animations with gesture-friendly controls. For full API documentation and usage examples, check out the 📖 API.
---
``bash`
npm install @hyoper/rn-animated-modal`bash``
yarn add @hyoper/rn-animated-modal
2- You must have completed the installation steps for the Reanimated and Gesture Handler packages.
`json`
{
"react": ">=18.2.0",
"react-native": ">=0.78.0",
"react-native-gesture-handler": ">=2.26.0",
"react-native-reanimated": ">=3.19.0"
}
The dependencies listed here are optional. You can use FlashList (ScrollableFlashList) or LegendList (ScrollableLegendList) within the modal. Supported versions are as follows.
`json`
{
"@legendapp/list": ">=2.0.0",
"@shopify/flash-list": ">=2.0.0"
}
`typescript jsx
import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Modal} from '@hyoper/rn-animated-modal';
const Example = () => {
const [visible, setVisible] = useState(false);
return (
visible={visible}
// Use Fade/Scale/Slide animations. (Optional)
animation={{
type: 'slide',
direction: {start: 'up', end: 'down'},
duration: 350,
}}
// Activate and customize the draggable modal. (Optional)
swipe={{
enabled: true,
directions: ['up', 'down', 'left', 'right'],
distance: 120,
velocity: 800,
closable: true,
}}
// Customize the backdrop component. (Optional)
backdrop={{
enabled: true,
backgroundColor: 'black',
opacity: 0.5,
}}
// Triggered when the modal is closed.
onHide={() => setVisible(false)}
// Triggered when the modal is opened. (Optional)
onShow={() => {}}
// Triggered when the android back button is pressed. (Optional)
onBackPress={() => setVisible(false)}
// Triggered when the backdrop is pressed. (Optional)
onBackdropPress={() => setVisible(false)}
// Triggered when the drag operation is completed. (Optional)
onSwipeComplete={() => setVisible(false)}
// Triggered when the drag operation is canceled. (Optional)
onSwipeCancel={() => {}}>
);
};
const styles = StyleSheet.create({
content: {
width: 320,
height: 240,
backgroundColor: 'white',
padding: 20,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
},
});
`
- Scrollable (Wrapper) – Show
- ScrollableFlatList (Child) – Show
- ScrollableSectionList (Child) – Show
- ScrollableView (Child) – Show
- ScrollableFlashList (Child) – Show
- ScrollableLegendList (Child) – Show
`typescript jsx
import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Modal, Scrollable, ScrollableFlatList} from '@hyoper/rn-animated-modal';
const Example = () => {
const [visible, setVisible] = useState(false);
return (
swipe={{enabled: true, directions: ['up', 'down', 'left', 'right']}}
onSwipeComplete={() => setVisible(false)}
onHide={() => setVisible(false)}>
orientation={'vertical'}
// Determine whether the list should be reversed. (Optional)
inverted={false}
// Listen to the list's callbacks. (Optional)
onScroll={() => {}}
onBeginDrag={() => {}}
onEndDrag={() => {}}
onMomentumBegin={() => {}}
onMomentumEnd={() => {}}>
{options => {
return (
data={Array.from({length: 20}, (_, i) => i + 1)}
keyExtractor={item => item.toString()}
renderItem={({item}) => (
)}
/>
);
}}
);
};
const styles = StyleSheet.create({
content: {
width: 320,
height: 240,
backgroundColor: 'white',
padding: 20,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
},
item: {
backgroundColor: '#F4F4F4',
padding: 10,
marginBottom: 8,
marginHorizontal: 4,
},
itemText: {
fontSize: 16,
color: '#333',
},
});
``