Cross Platform Bootstrap components built for React Native

React Native Bootstrap

The idea behind is similar to react-bootstrap, to write Bootstrap component for React Native. The project is still in early phases, contributions are welcome.

📦 Table of Content

• Getting Started
• Components
• Demo App

🚀 Getting Started

1. Type below command to get install package from github

   yarn add react-native-bootstrap
   # or with npm
   npm install react-native-bootstrap

✨ Components

Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variants.

import { Alert } from 'react-native-bootstrap';

[
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map(variant => (
  <Alert
    variant={variant}
    containerStyle={{ marginBottom: 8 }}
    messageStyle={{ fontSize: 16 }}
    message={`This is a ${variant} alert—check it out!`}
  />
))

Heading

Alerts can also contain heading.

<Alert
  title="Heading"
  message="This is a primary alert—check it out!"
/>

Dismissing

Add the dismissible prop to add a functioning dismiss button to the Alert.

const [alert, showAlert] = useState(true);

return (
  {alert ? (
    <Alert
      dismissible
      title="Dismissible Alert"
      containerStyle={{ marginBottom: 8 }}
      onClose={() => showAlert(false)}
      message="This is a primary alert—check it out!"
    />
  ) : (
    <Button title="Show Alert" onPress={() => showAlert(true)} />
  )}
)

Props

Prop	Type	Description	Required	Default
variant	primary | secondary | success | danger | warning | info | light | dark	The Alert visual variant	❌	primary
message	string	Message to be displayed in Alert	✔️	-
title	string	Title to be displayed in Alert	❌	-
dismissible	boolean	Renders a properly aligned dismiss button, as well as adding extra horizontal padding to the Alert	❌	false
onClose	function	Callback fired when alert is closed	❌	-
containerStyle	View style (object)	Style for the container which host the text message	❌	{}
messageStyle	Text style (object)	Text style for message	❌	{}
titleStyle	Text style (object)	Text style for title	❌	{}

📱 Demo App

Checkout the official React Native Bootstrap App which uses all of the React Native Bootstrap components.

Author

Sanjeev Yadav

🛡 License

This project is licensed under the GNU v3 Public License License - see the LICENSE.md file for details.