https://github.com/ecreeth/rn-flex

React Native Flexbox Component
https://github.com/ecreeth/rn-flex

component flexbox flexbox-layout react-native

Last synced: 5 days ago
JSON representation

React Native Flexbox Component

• Host: GitHub
• URL: https://github.com/ecreeth/rn-flex
• Owner: ecreeth
• License: mit
• Created: 2019-04-25T02:40:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-26T13:51:45.000Z (about 5 years ago)
• Last Synced: 2024-11-01T01:46:33.049Z (20 days ago)
• Topics: component, flexbox, flexbox-layout, react-native
• Language: JavaScript
• Size: 20.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @ecreeth/rn-flex

## Flex Component Props

#### `direction`

|  Property   |   Type  | Required | Default |

|------------|--------|---------|---------|

| `row `      | string  | no | -|

| `row-reverse `      | string  | no | - |

| `column `      | string  | no | **yes** |

| `column-reverse `      | string  | no | -|

#### `justify`

|  Property   |   Type  | Required | Default |

|------------|--------|---------|---------|

| `flex-start `      | string  |no|**yes**|

| `flex-end `      | string  |no|-|

| `center `      | string  |no|-|

| `space-between `      | string  |no|-|

| `space-around `      | string  |no|-|

| `space-evenly `      | string  |no|-|

#### `align`

|  Property   |   Type  | Required | Default |

|------------|--------|---------|---------|

| `flex-start `      | string  |no| - |

| `flex-end `      | string  |no| - |

| `center `      | string  |no| - |

| `baseline `      | string  |no| - |

| `stretch `      | string  |no| **yes** |

#### `wrap`

|  Property   |   Type  | Required | Default |

|------------|--------|---------|---------|

| `nowrap`      | string  |no| **yes**|

| `wrap`      | string  |no|-|

| `wrap-reverse`      | string  |no|-|

#### `flex`

|   Type  | Required | Default |

|--------|---------|---------|

| number  |no| **1**|

## Quick Start

### Installation

Create a new React Native App:

```bash

$ react-native init HelloWorld

$ cd HelloWorld

```

Install `@ecreeth/rn-flex` to your project:

```bash

$ yarn add @ecreeth/rn-flex or

$ npm install @ecreeth/rn-flex

```

### Examples

```jsx

import React from "react";

import { StyleSheet, Text, View } from "react-native";

import Flex from "@ecreeth/rn-flex";

function App() {

  return (

    

      

        Default Behavior

      

      

        

        

        

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    paddingHorizontal: 10

  },

  box: {

    width: 200,

    height: 200,

    borderRadius: 5

  },

  red: {

    backgroundColor: "#f5222d"

  },

  blue: {

    backgroundColor: "#096dd9"

  },

  green: {

    backgroundColor: "#237804"

  }

});

export default App;

```