react-native-enhanced-components v0.3.0

react-native-enhanced-components provides a simple way to manage styling through your app. Out of the box several helpful higher order components are provided making it easy to apply basic layout styling to core or custom react-native components.

Getting Started

yarn add react-native-enhanced-components or npm i react-native-enhanced-components

Basic Example

Adding a margin top and overall padding of 5 to a view. The view component includes all flex styling below.

import { Block } from 'react-native-enhanced-components'
import { Text } from 'react-native'

<Block mt={5} p={5}>
	<Text>Hello World!</Text>
</Block>

Wrap your own component

Wrapping the text component with some basic styling.

import { withStyles } from 'react-native-enhanced-components';
import { Text as RNText, StyleSheet } from 'react-native';

const textStyles = {
  center: {
    textAlign: 'center',
  },
  body: {
    color: '#ccc',
  },
  light: {
    color: '#eee',
  },
};

const Text = withStyles(RNText, textStyles);

<View>
  <Text white center>
    Hello World
  </Text>
</View>;

Out of the box styles

Several common styles are provided out of the box

import { flexStyles } from 'react-native-enhanced-components'
import { TouchableOpacity, Text } from 'react-native'

<TouchableOpacity style={[flexStyles.flex, flexStyles.row]}>
	<Text>Hey Hello</Text>
</TouchableOpacity>

See all out of the box styles

See all out of the box styles