0.1.0 • Published 3 years ago
react-native-slidingup-modal v0.1.0
react-native-slidingup-modal
SlidingUp modal for React Native
Installation
npm install react-native-slidingup-modal
Usage
import * as React from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import ReactNativeSlidingUpModal from 'react-native-slidingup-modal';
export default function App() {
const [visible, setVisible] = React.useState<boolean>(false);
const handleToggleVisible = React.useCallback(() => {
setVisible(!visible);
}, [visible]);
const handleRequestClose = React.useCallback(() => {
setVisible(false);
}, []);
return (
<>
<View style={styles.container}>
<TouchableOpacity onPress={handleToggleVisible}>
<Text>Toggle modal</Text>
</TouchableOpacity>
</View>
<ReactNativeSlidingUpModal
visible={visible}
style={styles.modalStyle}
onRequestClose={handleRequestClose}
>
<SafeAreaView>
<Text>Modal content</Text>
</SafeAreaView>
</ReactNativeSlidingUpModal>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffffff',
},
modalStyle: {
marginTop: 60,
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
paddingTop: 16,
paddingLeft: 16,
paddingRight: 16,
},
});
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
0.1.0
3 years ago