react-native-zero-ui

Just an extension to standard Text component from react-native with added support to styling through themes

Usage

import { View } from 'react-native-zero-ui';

<View styleName="flex center horizontal">
    <View styleName="flex"/> 
    <View styleName="flex"/>
</View>

Predefined styles

Some styles are predefined within the plugin. You can add your in your own theme file. Only thing you need is to extend it through zero.ui.View key

Usage

const theme = {
    'zero.ui.View': {
        // my global custom styling for View
        '.myStyle': {
            // custom styling for myStyle class
        },
        defaultProps: {
            // my default props
        }
    }
}

<View styleName="myStyle" />

List of styles

• horizontal

• vertical

• flex

• center

• center-content

• center-items

• end-content

• end-items

• start-content

• start-items

• fill-width

• fill-height

  ​

horizontal

Makes child components distribute horizontally (flexbox row)

flexDirection: 'row'

vertical

Makes child components distribute vertically (flexbox column)

flexDirection: 'column'

flex

Fills parent flexbox with flex 1

flex: 1

center

Centers child components (horizontally and vertically)

justifyContent: 'center',
alignItems: 'center'

center-content

Makes child components center horizontally (flexbox row) or vertically (flexbox column)

justifyContent: 'center'

center-items

Makes child components center vertically (flexbox row) or horizontally (flexbox column)

alignItems: 'center'

end-content

Makes child components align right (flexbox row) or bottom (flexbox column)

justifyContent: 'end'

end-items

Makes child components align bottom (flexbox row) or right (flexbox column)

alignItems: 'end'

start-content

Makes child components align left (flexbox row) or top (flexbox column)

justifyContent: 'start'

start-items

Makes child components align top (flexbox row) or left (flexbox column)

alignItems: 'start'

fill-width

Makes component fill width of the parent component as much as possible

width: '100%'

fill-height

Makes component fill height of the parent component as much as possible

height: '100%'

Props

All properties are identical to those from View component within react-native