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
npm install react-native-layout --save
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.
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...
Checkout the examples folder!
Instead of:
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Center Content</Text>
</View>Write:
<Center>
<Text>Center Content</Text>
</Center>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>