Version 1 π
- Written from scratch π»
- Typescript πͺ
- Much better API
- Better customizations
- Much better library fundamentals
- Husky Setup πΆ
- Commit Linter
- Prettier
Add the dependency:
npm i react-native-basic-modal
"react-native-modal": ">= 11.4.0"
import BasicModal, { Button } from "react-native-basic-modal";
<BasicModal
isVisible
title="Hold on!"
description="Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh."
/>
<BasicModal
isVisible
title="Hold on!"
description="Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh."
headerComponent={
<View>
<Text>Hey Header</Text>
</View>
}
footerComponent={
<View>
<Text>Hey Footer</Text>
</View>
}
/>
Of course you do not need to use built-in
Button component from library. You can put anything into the children
_Note:_If you need to customize the default buttons, you should use this method instead, it will be much easier and customizable
<BasicModal
isVisible
title="Hold on!"
description="Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh.">
<View style={styles.buttonsContainer}>
<Button text="Cancel" onPress={() => {}} />
<Button text="Okay" onPress={() => {}} />
</View>
</BasicModal>
The prop onBackdropPress
allows you to handle this situation:
<BasicModal
isVisible={this.state.isVisible}
onBackdropPress={() => this.setState({ isVisible: false })}
/>
You can check out the example project π₯°
Simply run
npm i
react-native run-ios/android
should work of the example project.
Property | Type | Default | Required | Description |
---|---|---|---|---|
isVisible | bool | false | π’ | set the modal's visibility |
title | string | Hold on! | π’ | set your own title text |
description | string | default | π’ | set your own description text |
primaryButtonText | string | default | π‘ | change default primary button's text |
secondaryButtonText | string | default | π‘ | change default secondary button's text |
onPrimaryButtonPress | function | default | π‘ | set the function when the primary button is pressed |
onSecondaryButtonPress | function | default | π‘ | set the function when the secondary button is pressed |
onBackdropPress | function | default | π‘ | set the function when the backdrop of the modal is pressed |
headerComponent | component | none | π‘ | set your own component if you need to add/customize header component |
footerComponent | component | none | π‘ | set your own component if you need to add/customize footer component |
style | ViewStyle | default | π‘ | set/override the default style |
modalContainerStyle | ViewStyle | default | π‘ | set/override the default style |
contentContainerStyle | ViewStyle | default | π‘ | set/override the default style |
buttonsContainerStyle | ViewStyle | default | π‘ | set/override the default style |
titleTextStyle | TextStyle | default | π‘ | set/override the default style |
descriptionTextStyle | TextStyle | default | π‘ | set/override the default style |
Property | Type | Default | Required | Description |
---|---|---|---|---|
text | string | Hold on! | π‘ | set text |
style | ViewStyle | default | π‘ | set/override the default style |
onPress | function | default | π‘ | set the function |
textStyle | TextStyle | default | π‘ | set/override the default style |
I inspired by Orizon Design Thank you so much guys, nice UI / UX :)
-
LICENSE -
Typescript -
Version 1.0.0 - Write an article about the lib on Medium
FreakyCoder, kurayogun@gmail.com
React Native Basic Modal is available under the MIT license. See the LICENSE file for more info.