react-native-bootstrap-5

react-native-bootstrap-5

A custom React Native library for responsive UI components inspired by Bootstrap 5. This library brings familiar Bootstrap-like components such as Container, Row, Col, Tabs, NavBar, and more to React Native, making layout design easier and more responsive.

Note: This library is currently incomplete, and we're looking for contributors to help maintain and develop it further. See the Contribution section if you're interested.

Table of Contents

• Installation
• Usage
• Components
  • Container
  • Row
  • Col
  • Tabs
  • NavBar
• Contribution
• License

Installation

Install the library via npm:

npm install react-native-bootstrap-5

Usage

After installing, import the components you need and use them in your React Native application.

import React from 'react';
import { Container, Row, Col, Tabs, Tab, NavBar } from 'react-native-bootstrap-5';

const App = () => {
  return (
    <Container>
      <NavBar>
        <NavBar.Brand href="/" />
      </NavBar>
      <Row>
        <Col>
          <Tabs defaultActiveKey="home">
            <Tab eventKey="home" title="Home">
              <Text>Home Content</Text>
            </Tab>
          </Tabs>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

Components

Container

The Container component wraps your content with consistent padding.

<Container>
  <Text>Your content goes here.</Text>
</Container>

Row and Col

Use Row and Col for creating responsive grid layouts.

<Row>
  <Col xs={6}><Text>Column 1</Text></Col>
  <Col xs={6}><Text>Column 2</Text></Col>
</Row>

Tabs

Easily create tabbed content with the Tabs component.

<Tabs defaultActiveKey="profile">
  <Tab eventKey="home" title="Home">
    <Text>Home Content</Text>
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Text>Profile Content</Text>
  </Tab>
</Tabs>

NavBar

Create a responsive NavBar component with links and brand support.

<NavBar>
  <NavBar.Brand href="/">Brand</NavBar.Brand>
</NavBar>

Contribution

We're looking for contributors to help expand and maintain react-native-bootstrap-5! If you have experience with React Native and would like to contribute, please feel free to open an issue or submit a pull request. Contributions to add more components, improve styles, or fix bugs are very welcome.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

This README should help users understand how to install, use, and contribute to react-native-bootstrap-5.