Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-basic-modal

WrathChaos10MIT1.0.2TypeScript support: included

Basic & Elegant UI Modal for React Native

pop-up, popup, alert, modal, basic, ui, front-end, elegant, FreakyCoder, freakycoder, kuray, Kuray, react, react-native, javascript, ui-lib, rn

readme

React Native Basic Modal

Battle Tested ✅

Basic & Elegant UI Modal for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Basic Modal

Version 1 😍

  • Written from scratch 🍻
  • Typescript 💪
  • Much better API
  • Better customizations
  • Much better library fundamentals
  • Husky Setup 🐶
    • Commit Linter
    • Prettier

Installation

Add the dependency:

npm i react-native-basic-modal

Peer Dependencies

IMPORTANT! You need install them
"react-native-modal": ">= 11.4.0"

Usage

Import

import BasicModal, { Button } from "react-native-basic-modal";

BasicModal Usage

Default Usage

<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>
  }
/>

Advanced Usage with custom buttons

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>

How can I hide the modal by pressing outside its content?

The prop onBackdropPress allows you to handle this situation:

<BasicModal
  isVisible={this.state.isVisible}
  onBackdropPress={() => this.setState({ isVisible: false })}
/>

For more FAQ about Modal:

Example Project 😍

You can check out the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props

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

Configuration - Props [Button] Component

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

Credits

I inspired by Orizon Design Thank you so much guys, nice UI / UX :)

Future Plans

  • <input checked="" disabled="" type="checkbox"> LICENSE
  • <input checked="" disabled="" type="checkbox"> Typescript
  • <input checked="" disabled="" type="checkbox"> Version 1.0.0
  • <input disabled="" type="checkbox"> Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Basic Modal is available under the MIT license. See the LICENSE file for more info.