react-native-rgrid

    1.0.3 • Public • Published

    React Native RGrid

    React Native Responsive Bootstrap Grid

    npm version NPM code style: prettier

    Build Status Coverage Status

    dependencies Status devDependencies Status peerDependencies Status

    Getting Started

    This library aims to ease the use of the same React Native codebase for mobile and web applications by porting Bootstrap 5 flexbox grid system to React Native.

    It includes the same twelve column system and six responsive tiers of Bootstrap, and uses the same classes names. It uses matchmediaquery to evaluate media queries both in the web and mobile applications, with @expo/match-media as polyfill for mobile applications.

    Styles classes are defined with StyleSheet, taking advantage of the performance and memory optimizations it provides.

    A quick sample, mimicking Bootstraps mix and match sample can be seen below:

    Portrait: 393px width Landscape: 851px width
    Portrait Sample: 393px width Landscape Sample: 851px width

    with the code to create it:

    <RGrid>
      <RView classes="container-fluid">
        {/*Stack the columns on mobile by making one full-width and the other half-width*/}
        <RView classes="row">
          <RView classes="col-md-8">
            <Text>col-md-8</Text>
          </RView>
          <RView classes="col-6 col-md-4">
            <Text>col-6 col-md-4</Text>
          </RView>
        </RView>
    
        {/*Columns start at 50% wide on mobile and bump up to 33.3% wide on wider screens*/}
        <RView classes="row">
          <RView classes="col-6 col-md-4">
            <Text>col-6 col-md-4</Text>
          </RView>
          <RView classes="col-6 col-md-4">
            <Text>col-6 col-md-4</Text>
          </RView>
          <RView classes="col-6 col-md-4">
            <Text>col-6 col-md-4</Text>
          </RView>
        </RView>
    
        {/*Columns are always 50% wide*/}
        <RView classes="row">
          <RView classes="col-6">
            <Text>col-6</Text>
          </RView>
          <RView classes="col-6">
            <Text>col-6</Text>
          </RView>
        </RView>
      </RView>
    </RGrid>

    Installation

    Using npm:

    npm install --save react-native-rgrid

    or using yarn:

    yarn add react-native-rgrid

    Demo Snack

    You can try the library right away on this snack; its code is available on this git repository.

    Usage

    Bootstrap classes

    The Grid system has been implemented following the same Bootstrap guidelines. The breakpoints have been configured with the same values as the Bootstrap grid system and they work in the exact same way.

    The following is a list of the Bootstrap classes you will be able to use with react-native-rgrid:

    • All of the container classes:
      • container
      • container-sm
      • container-md
      • container-lg
      • container-xl
      • container-xxl
      • container-fluid
    • Row class:
      • row: wrappers for columns
    • Columns responsive-classes:
      • col: for equal-width columns on all breakpoints
      • col-{breakpoint}: for equal-width columns on the specified breakpoint and up
      • col-*: for when you need a particularly sized column (e.g. col-4)
      • col-{breakpoint}-*: for when you need a particularly sized column on the specified breakpoint and up (e.g. `col-md-4)
      • col-auto: to size columns based on the natural width of their content on all breakpoints
      • col-{breakpoint}-auto: to size columns based on the natural width of their content on the specified breakpoint and up

    As with Bootstrap, you can mix and match these columns classes, so the content can be distributed on each grid breakpoint. Nesting is also supported.

    Support for row columns, alignment and reordering classes will be added on a future version.

    Components

    The library exports two components: RGrid and RView.

    RGrid

    RGrid stands for Responsive Grid. It's the component in charge of configuring and initializing the Responsive Grid layout and styles classes. It should be used only once in the application:

    export default function App() {
      return (
        <RGrid>
          <Text>React Native RGrid</Text>
        </RGrid>
      );
    }

    RView

    RView stands for Responsive View. The classes ported from Bootstrap will only have effect if they are used in conjunction with RView, so its use is mandatory.

    It defines a prop named classes, which can be either an Array where each item is a responsive class, or a String where responsive classes are separated by space.

    Under the hood RView is replaced with a View component and evaluates the media queries to apply the appropriate styling, so you can expect it to behave in the exact same way as a View. Support for common View props will be added in a future, for now only style is supported.

    export default function App() {
      return (
        <RGrid>
          <RView classes="container">
            <RView classes="row">
              <RView classes="col col-lg-2">
                <Text>1 of 3</Text>
              </RView>
    
              <RView classes="col-md-auto">
                <Text>Variable width content</Text>
              </RView>
    
              <RView classes={["col", "col-lg-2"]}>
                <Text>3 of 3</Text>
              </RView>
            </RView>
          </RView>
        </RGrid>
      );
    }

    Since the style prop is supported, you can apply custom styles to a RView, in the same way you would with a View:

    export default function App() {
      return (
        <RGrid>
          <RView classes="container">
            <RView classes="row">
              <RView classes="col col-lg-2" style={styles.column}>
                <Text>1 of 3</Text>
              </RView>
    
              <RView
                classes="col-md-auto"
                style={[styles.column, { backgroundColor: "#ff0000" }]}
              >
                <Text>Variable width content</Text>
              </RView>
    
              <RView classes={["col", "col-lg-2"]} style={styles.column}>
                <Text>3 of 3</Text>
              </RView>
            </RView>
          </RView>
        </RGrid>
      );
    }
    
    const styles = StyleSheet.create({
      column: {
        backgroundColor: "#27292b08",
        borderWidth: 1,
        borderColor: "#27292b1a",
        paddingTop: 12,
        paddingBottom: 12
      }
    });

    Install

    npm i react-native-rgrid

    DownloadsWeekly Downloads

    6

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • t-medina