1.1.0 • Published 7 years ago
react-native-alert-modal v1.1.0
react-native-alert-modal
React-Native-Alert-Modal is a simple to use modal for Android & IOS.
Demo
Description
This package is developed for the convenience of ReactNative programmers so they can easily use Modals.
Soon new features like Effects are added.
Installation
- Run:
$ npm install react-native-alert-modal --save - Add:
import Modal from 'react-native-alert-modal'
Props
| Prop | Description | Default |
|---|---|---|
msg | Message display in alert | None |
btnMsgStyleProps | To change or add style of modal message | None |
modalStyle | An extra style props to change or add custom style | None |
visible | The type is boolean (True to visible and False to hidden) | None |
position | top or bottom of screen | None |
animationSpeed | Speed of vertical modal animation (millisecond) | 600 ms |
timeToShow | Modal time display (millisecond) | 2000 ms |
btnText | Text of modal button | None |
btnTextStyleProps | To change or add style of modal button text | None |
onBtnPress | Callback operation of clicked modal button | None |
Time to test
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
showModal: true
}
}
componentWillMount() {
setTimeout(() => {
this.setState({
showModal: false
});
}, 2000);
}
render() {
return (
<View style={styles.container}>
<Modal
msg="Hello world !"
modalStyle={{ backgroundColor: '#34495e'}}
visible={this.state.showModal}
position="bottom"
animationSpeed={300}
timeToShow={3000}
btnText="Test"
btnMsgStyleProps={{ color: '#eee' }}
textStyleProps={{ color: '#eee'}}
onBtnPress={() => console.log('Btn Pressed !')}
/>
<Text>Modal !</Text>
</View>
);
}
}