react-native-layout
v0.0.3
Published
Semantic JSX layout components for react-native
Downloads
12
Maintainers
Readme
react-native-layout
Semantic JSX layout components for react-native
This project contains react-native layout components which brings more semantic to your JSX code.
It contains a "little bit more complex" BorderLayout, as well as really simple layout modules like Center, Fill, Header, Footer, and it also renames a view group as LinearLayout.
API, documentation and unit tests are WIP. Ideas, discussions and contributions are welcome: Open an issue
If your brave install the alpha version (0.0.x):
npm install react-native-layout --save
You can expect a beta version (0.1.0) soon.
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.
Examples
An example project is coming soon. Currently please checkout the examples
folder and the following inline codes.
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:
<Fill>
<Top><Text>Header</Text></Top>
<Bottom><TextFooter</Text></Bottom>
<View><Text>Content</Text></View>
</Fill>