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>