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