React-native-flex-helper NPM

React Native Flex Helper

A compilation of useful style helpers and shorthands in React Native

Installation

yarn add react-native-flex-helper
or
npm i -S react-native-flex-helper

How it works

FlexHelpers.create uses ReactNative's StyleSheet.create to build for you a new stylesheet containing your style rules and the helper rules.

Overlapping names will be overwritten by the styles helpers, be careful.

Usage

Simply import the package

import FlexHelpers from 'react-native-flex-helper';
or
const FlexHelpers = require('react-native-flex-helper');

Find your stylesheet declaration, for example

const styles = StyleSheet.create({
  box: { backgroundColor: 'red' },
  text: { color: '#000' },
});

And just replace StyleSheet.create with FlexHelpers.create Like this

const styles = FlexHelpers.create({
  box: { backgroundColor: 'red' },
  text: { color: '#000' },
});

You are ready to use it !

<View style={[styles.fillCenter]}>
  <View style={[styles.col, styles.shadow(2), styles.box]}>
    <Text style={[styles.textCenter, styles.text]}>Hello</Text>
    <Text style={[styles.textCenter, styles.text]}>World!</Text>
  </View>
</View>

Additional (compatibility with older versions)

You can also use FlexHelpers as a static stylesheet and merge your styles with an array (it may not work with a spread operator).

const styles = StyleSheet.create({
  text: { color: '#000' },
});
...
const HelloWorld = () => (
  <Text style={[FlexHelpers.textCenter, styles.text]}>Hello World!</Text>
);

Quick guide to Flexbox

Flexbox tutorial

Translation

Layout

fill : { flex: 1 }
center : { alignItems: 'center', justifyContent: 'center' }

Orientation

row : { flexDirection: 'row' }
rowReverse : { flexDirection: 'row-reverse' }
column or col : { flexDirection: 'column' }
columnReverse or colReverse : { flexDirection: 'column-reverse' }

Main axis

mainStart : { justifyContent: 'flex-start' }
mainCenter : { justifyContent: 'center' }
mainEnd : { justifyContent: 'flex-end' }
mainSpaceBetween : { justifyContent: 'space-between' }
mainSpaceAround : { justifyContent: 'space-around' }

Cross axis

crossStart : { alignItems: 'flex-start' }
crossCenter : { alignItems: 'center' }
crossEnd : { alignItems: 'flex-end' }
crossStretch : { alignItems: 'stretch' }

Shorthands

rowMain : { flexDirection: 'row', justifyContent: 'center' }
rowCross : { flexDirection: 'row', alignItems: 'center' }
rowCenter : { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }
colMain : { flexDirection: 'column', justifyContent: 'center' }
colCross : { flexDirection: 'column', alignItems: 'center' }
colCenter : { flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }
fillCenter : { flex: 1, alignItems: 'center', justifyContent: 'center' }
fillRow : { flex: 1, flexDirection: 'row' }
fillRowReverse : { flex: 1, flexDirection: 'row-reverse' }
fillRowMain : { flex: 1, flexDirection: 'row', justifyContent: 'center' }
fillRowCross : { flex: 1, flexDirection: 'row', alignItems: 'center' }
fillRowCenter : { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }
fillCol : { flex: 1, flexDirection: 'column' }
fillColReverse : { flex: 1, flexDirection: 'column-reverse' }
fillColMain : { flex: 1, flexDirection: 'column', justifyContent: 'center' }
fillColCross : { flex: 1, flexDirection: 'column', alignItems: 'center' }
fillColCenter : { flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }

Position helpers

relative : { position: 'relative' }
absolute : { position: 'absolute' }
absoluteFill : { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }
absoluteTop : { position: 'absolute', top: 0, left: 0, right: 0 }
absoluteLeft : { position: 'absolute', top: 0, left: 0, bottom: 0 }
absoluteRight : { position: 'absolute', top: 0, right: 0, bottom: 0 }
absoluteBottom : { position: 'absolute', left: 0, right: 0, bottom: 0 }
absoluteTopLeft : { position: 'absolute', top: 0, left: 0 }
absoluteTopRight : { position: 'absolute', top: 0, right: 0 }
absoluteBottomLeft : { position: 'absolute', bottom: 0, left: 0 }
absoluteBottomRight : { position: 'absolute', bottom: 0, right: 0 }

Additional features

overflow : { overflow: 'hidden' }
bashadow(level) : Uses the correct way to display a shadow in the platform (Android, iOS, Web)
circle(size) : Sets width and height to the mentioned size and borderRadius to half of the size
Center : { textAlign: 'center' }
Justify : { textAlign: 'justify' }
Left : { textAlign: 'left' }
Right : { textAlign: 'right' }
backgroundReset : { backgroundColor: 'transparent' } is a fix for a common iOS issue where the backgroundColor of some tags is transferred to children and need to be reset