usage

install

 npm install splitlayout --save

example one: heade/body/info/button layout

 import SplitLayout from 'splitlayout'
 import React, { Component } from 'react'
 import { StyleSheet, Text } from 'react-native'
 export default class Demo1 extends Component {
 render() {
 return (
 <SplitLayout split="-" style={ styles.box }>{/* flexDirection column */}
 
 {/* fixedHight tittle */}
 <SplitLayout height={ 44 } style={ styles.title }>
 <Text>Top Tittle</Text>
 </SplitLayout>
 {/* flex body */}
 <SplitLayout flex={ 1 } split="|" style={ styles.body }>
 
 {/* width rate */}
 <SplitLayout flex={ 3 } style={ styles.part1 }>
 <Text>Info Part One</Text>
 </SplitLayout>
 <SplitLayout flex={ 2 } style={ styles.part2 }>
 <Text>Info Part Two</Text>
 </SplitLayout>
 {/* percentage width */}
 <SplitLayout width={ '33.33vw' } style={ styles.action }>
 <Text>Perhaps One Button</Text>
 </SplitLayout>
 </SplitLayout>
 </SplitLayout>
 )
 }
 }
 const styles = StyleSheet.create({
 box: {
 borderWidth: 1,
 height: 200
 },
 title: {
 justifyContent: 'center'
 },
 body: {
 backgroundColor: '#ccc'
 },
 part1: {
 borderRightWidth: 1
 },
 action: {
 borderLeftWidth: 1 
 }
 })

example two header/body/image/footer layout

 import SplitLayout from 'splitlayout'
 import React, { Component } from 'react'
 import { StyleSheet, Text, Image } from 'react-native'
 export default class Demo2 extends Component {
 render() {
 return (
 <SplitLayout split="-" style={ style.item }>
 <SplitLayout height={ 44 } style={ style.title }>
 <Text>Some Tittle</Text>
 </SplitLayout>
 
 {/* fix reate container, height is 33.33% of width */}
 <SplitLayout height={ '33.33vw' }>
 <Image style={ style.image } source={{ uri: 'https://www.google.com/logos/doodles/2016/james-welchs-76th-birthday-5636092473638912.2-hp.png' }} />
 </SplitLayout>
 
 <SplitLayout split="|">
 <SplitLayout flex={ 1 }>
 <Text style={ style.desc } numberOfLines={ 1 }> Get Image from Today's Google</Text>
 </SplitLayout>
 <SplitLayout split='|' width={ 120 } style={ style.tags }>
 <Text style={ style.tag }> Hot ↑</Text>
 </SplitLayout>
 </SplitLayout>
 </SplitLayout>
 )
 }
 }
 
 let style = StyleSheet.create({
 item: {
 backgroundColor: '#fff',
 margin: 5,
 borderWidth: StyleSheet.hairlineWidth,
 borderColor: '#eee'
 },
 title: {
 justifyContent: 'center',
 borderBottomWidth: StyleSheet.hairlineWidth
 },
 image: {
 flex: 1, 
 resizeMode: 'cover'
 },
 desc: {
 color: '#ccc',
 fontSize: 12,
 lineHeight: 24
 },
 tags: {
 justifyContent: 'flex-end',
 alignItems: 'center'
 },
 tag: {
 color: '#fff',
 backgroundColor: '#f00'
 }
 })