Skip to content

jerolimov/react-native-layout

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-native-layout

Semantic JSX layout components for react-native

This library contains multiple easy-to-use react-native layout components which brings more semantic into your JSX code.

Install

npm install react-native-layout --save

Why?

Developing apps with react-native is great. But sometimes the JSX markup loses its simplicity with a growing number of components and view elements. Especially when you extracts and imports the stylesheets from an external file.

Usage

Load any of the layout components you would like.

var NativeLayout = require('react-native-layout');

var {
  BorderLayout,
  Center,
  Footer,
  Header,
  Fill,
  LinearLayout,
  HorizontalLinearLayout,
  VerticalLinearLayout,
} = NativeLayout;

var { FillLayout, Top, Left, Right, Bottom } = BorderLayout;

Or using ES6 modules and destructuring..

import NativeLayout, {
  BorderLayout,
  Center,
  Footer,
  Header,
  Fill,
  LinearLayout,
  HorizontalLinearLayout,
  VerticalLinearLayout
} from 'react-native-layout';

const { FillLayout, Top, Left, Right, Bottom } = BorderLayout;

Then use them as shown below...

Examples

Checkout the examples folder!

Screenshot of BorderLayoutExample1
BorderLayoutExample1.js

Screenshot of BorderLayoutExample2
BorderLayoutExample2.js

Screenshot of BorderLayoutExample3
BorderLayoutExample3.js

Center Content

Instead of:

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Center Content</Text>
</View>

Write:

<Center>
    <Text>Center Content</Text>
</Center>

BorderLayout

Instead of:

<View style={{ flex: 1 }}>
    <View><Text>Header</Text></View>
    <View style={{ flex: 1 }}><Text>Content</Text></View>
    <View><Text>Footer</Text></View>
</View>

You could write:

<FillLayout>
    <Top><Text>Header</Text></Top>
    <Bottom><TextFooter</Text></Bottom>
    <View><Text>Content</Text></View>
</FillLayout>

About

Semantic layout components for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published