Awesome
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.
- It contains really simple flex-based layout modules like
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!
<img width="200" alt="Screenshot of BorderLayoutExample1" src="https://raw.githubusercontent.com/jerolimov/react-native-layout/master/screenshots/BorderLayoutExample1.png"><br/> BorderLayoutExample1.js
<img width="200" alt="Screenshot of BorderLayoutExample2" src="https://raw.githubusercontent.com/jerolimov/react-native-layout/master/screenshots/BorderLayoutExample2.png"><br/> BorderLayoutExample2.js
<img width="200" alt="Screenshot of BorderLayoutExample3" src="https://raw.githubusercontent.com/jerolimov/react-native-layout/master/screenshots/BorderLayoutExample3.png"><br/> 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>