react-native-bootstrap-html

HTML-like tags and class-based styling for React Native. Use familiar web tags (div, span, p, h1–h6, a, img, ul, ol, form, table, etc.) with a className (or class) prop, just like in HTML.

Installation

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

Requires react and react-native as peer dependencies.

Quick Start

import {
  div,
  span,
  p,
  h1,
  h2,
  a,
  button,
  img,
  ul,
  li,
  input,
  form,
  label,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
} from 'react-native-bootstrap-html';

function App() {
  return (
    <div className="container p-4">
      <h1 className="text-primary mb-2">Hello</h1>
      <p className="text-muted">Use HTML-like tags with class names.</p>
      <div className="row align-center">
        <button className="btn btn-primary m-2" onPress={() => {}}>
          <span className="text-white">Submit</span>
        </button>
        <a className="link p-2" onPress={() => {}}>
          <span>Link</span>
        </a>
      </div>
      <img
        className="img-fluid rounded"
        source={{ uri: 'https://example.com/image.png' }}
      />
      <form className="form">
        <label className="form-label">Name</label>
        <input className="form-control" placeholder="Enter name" />
      </form>
    </div>
  );
}

Supported Tags

Import any of these from react-native-bootstrap-html:

| Tag | React Native equivalent | Notes | |-----------|-------------------------|--------------------------| | div | View | Block container | | section | View | Semantic section | | article | View | Semantic article | | header | View | Header area | | footer | View | Footer area | | nav | View | Navigation | | main | View | Main content | | aside | View | Side content | | ul | View | Unordered list container| | ol | View | Ordered list container | | li | View | List item | | form | View | Form container | | table | View | Table container | | thead | View | Table header group | | tbody | View | Table body | | tr | View | Table row | | th | View | Table header cell | | td | View | Table data cell | | hr | View | Horizontal rule | | br | View | Line break / spacer | | figure | View | Figure container | | span | Text | Inline text | | p | Text | Paragraph | | h1–h6 | Text | Headings | | label | Text | Form label | | small | Text | Small text | | strong | Text | Bold | | em | Text | Italic | | code | Text | Code | | pre | Text | Preformatted | | blockquote | Text | Quote | | figcaption | Text | Figure caption | | a | Pressable | Link (use onPress) | | button | Pressable | Button (use onPress) | | img | Image | Image | | input | TextInput | Single-line input | | textarea| TextInput | Multi-line input |

Using Classes (like HTML)

Every tag supports:

• className – space-separated class names (e.g. "container p-4 text-center").
• class – alias for className (HTML uses class).
• style – React Native style object (merged after class styles).

Built-in Bootstrap-like classes include:

• Layout: container, row, col, flex-1, flex-row, flex-column, align-center, justify-between, etc.
• Spacing: p-1–p-5, m-1–m-4, pt-1, pb-2, mt-1, mb-2, etc.
• Typography: h1–h6, text-left, text-center, text-right, text-primary, text-muted, text-white, etc.
• Display: d-flex, block, w-100, h-100.
• Borders: border, rounded, rounded-1, rounded-2, rounded-circle.
• Background: bg-primary, bg-secondary, bg-light, bg-dark, bg-white.
• Buttons: btn, btn-primary, btn-secondary, btn-success, btn-danger, btn-outline-primary.
• Form: form, form-group, form-control, form-label.
• Card: card, card-body, card-header, card-footer.
• Badge: badge, badge-primary, badge-secondary.
• Image: img-fluid, img-thumbnail, rounded.

Custom Classes

Register your own class names (like CSS classes):

import { registerClass, registerClasses, div } from 'react-native-bootstrap-html';

// Single class
registerClass('my-card', {
  backgroundColor: '#fff',
  borderRadius: 12,
  padding: 16,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
  elevation: 3,
});

// Multiple classes
registerClasses({
  'mt-10': { marginTop: 40 },
  'text-brand': { color: '#ff6b00' },
});

// Use in JSX
<div className="my-card mt-10">
  <span className="text-brand">Custom styles</span>
</div>

API

• Tags – Use as components: <div className="...">, <span>, <h1>, etc.
• registerClass(name, style) – Register one custom class.
• registerClasses(record) – Register multiple custom classes.
• resolveClassName(className, style?) – Resolve a class string to a style object (for advanced use).
• bootstrapStyles – The built-in StyleSheet object; use for extending or reference.

License

MIT