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.

• Desktop and tablet
• Mobile

Free stock images used:

• foods:
  • carbonara-in-gray-bowl
  • green-leafy-vegetable-dish-in-gray-steel-bowl-with-fork
  • vegetable-sandwich-on-plate
  • basil-leaves-and-avocado-on-sliced-bread-on-white-ceramic-plate
  • cooked-food-with-meats-and-vegetables-inside-white-bowl
  • flat-lay-photography-of-vegetable-salad-on-plate
• other:

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.

[0.1.3] - 2020-06-20

Added

• Debug props on Components so they get a random background color to easier debug.

Changed

• Grid Component renamed to Container

Fixed

• Fix converting m and p props as array to style

[0.1.3] - 2020-06-19

Added

• Margin & Padding as array

Fiexed

• Resonsive problems

[0.1.2] - 2020-06-18

Fixed

• fixed AbstractComponent::computeProps to fix style props not applying problems.

[0.1.1] - 2020-06-14

Added

• Grid Component to serve as a main View to contain Columns and Rows
• Column Component
• Row Component
• Responsive sizes

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT