react-native-component-plus v1.0.1

React Native Component Plus

Global and inline styling for React Native Components

Code Faster by not having to create new style objects or Stylesheet keys for every component.

Features

• Global Styling
• Quick Inline Styling

Usage

npm install react-native-component-plus

Import Component You Need Styling From and setStyle class

import { Text, setStyle } from "react-native-component-plus";

Use setStyle.component('style', 'value') to set a global style

Ex:

setStyle.text("color", "#ff0000");

Result:

For all components you may use style attributes as a direct prop.

Ex:

export const App = () => {
  return (
    <View backgroundColor="#dadada">
      <Text>Hello World</Text>
    </View>
  );
};

Instead of:

export const App = () => {
  return (
    <View style={{ backgrounColor: "#dadada" }}>
      <View>Hello World</Text>
    </View>
  );
};

export const App = () => {
  return (
    <View style={style.bg}>
      <Text>Hello World</Text>
    </View>
  );
};

const style = StyleSheet.create({
  bg: {
    backgroundColor: "#dadada"
  }
});

This makes it less of a hassle to make little style changes.

Supported Styles

• Text
  • textShadowOffset
  • color
  • fontSize
  • fontStyle
  • fontWeight
  • lineHeight
  • textAlign
  • textDecorationLine
  • fontFamily
  • textShadowRadius
  • includFontPadding
  • textAlignVertical
  • fontVariant
  • letterSpacing
  • textDecorationColor
  • textDecorationStyle
  • textTransform
  • writingDirection

• View
  • borderRightColor
  • backfaceVisibility
  • borderBottomColor
  • borderBottomEndRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius
  • borderBottomStartRadius
  • borderBottomWidth
  • borderColor
  • borderEndColor
  • borderLeftColor
  • borderLeftWidth
  • borderRadius
  • backgroundColor
  • borderRightWidth
  • borderStartColor
  • borderStyle
  • borderTopColor
  • borderTopEndRadius
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderTopStartRadius
  • borderTopWidth
  • borderWidth
  • opacity
  • height
  • width
  • margin
  • marginTop
  • marginBottom
  • marginLeft
  • marginRight
  • padding
  • paddingRight
  • paddingLeft
  • paddingTop
  • paddingBottom
  • elevation