React-native-lopigrid NPM

react-native-lopigrid

A (not yet responsive) grid system for react-native.

IMPORTANT: Under development so it might not work properly and change between versions. Should not yet be used in production.

Installation

yarn add react-native-lopigrid

Usage

import Lopigrid from "react-native-lopigrid";

<Container>
  <Column>
    <Row size={40} style={{ backgroundColor: 'green' }} />
    <Row size={20} style={[styles.text, null, { backgroundColor: 'red' }]}/>
    <Row size={25} />
    <Row size={15} />
  </Column>
</Container>

StyleProps

Prop	default	type	style
p	`undefined`	`number or number[]`	`padding`
m	`undefined`	`number or number[]`	`margin`
h	`undefined`	`number`	`height`
w	`undefined`	`number`	`width`
bg	`undefined`	`string`	`background-color`
border	`undefined`	`string`	`border-color`
borderWidth	`undefined`	`number`	`border-width`
debug	`false`	`boolean`	`random background-color`

FlexProps

The following flex props are available:

alignContent
alignItems
flexWrap
justifyContent
overflow
flex
flexBasis
flexDirection
flexGrow
flexShrink

Example

There is an example food order application for restaurants using Ghulam Rasool's designs.

Free stock images used:

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Unreleased

Idea

add background image as bg, from url or local file
add tests
set up ci/cd to run tests?
Generate each component with debug prop an id, so we can generate a custom color for them and propagate the debug prop down the tree. this would give nice visualization on our grid just by applying one props on the top element. Should be a unique color by props or something, to always get the same color generated for a given component.

Fix

borderB adds extra width and height on component

0.3.1 - 2020-12-23

Fixed

unable to add p and m as a number (only working with an array)
a bit updated documentation

0.2.3 - 2020-10-20

Fixed

Apparenlty react-native fails to refresh the component's flexBasis after orientation change so a simple store was added to trigger a rerender on an orientation change. Not the best solution but works for now.