react-native-stylesheet-plus v0.3.0

react-native-stylesheet-plus

An alternative to react native stylesheet

Installation

npm install react-native-stylesheet-plus

Usage

import * as React from 'react';
import { View, Text } from 'react-native';
import { getStyleSheet } from 'react-native-stylesheet-plus';

// make only one global StyleSheetPlus
// but if you want different breakpoints for different pages
// you can create as many StyleSheetPlus objects as you want
export const StyleSheetPlus = getStyleSheet();
// const StyleSheetPlus = getStyleSheet({ tablet: 700, laptop: 1100, desktop: 1500 })

function App() {
  const { styles } = StyleSheetPlus.useStyles(rawStyles);
  return (
    <View style={styles.container}>
      <Text style={styles.text}>This is some random text!!</Text>
      <Text style={styles.text}>This is some random text!!</Text>
    </View>
  );
}

const rawStyles = StyleSheetPlus.createStyles({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: ['column', 'row'],
  },
  text: {
    fontSize: [20, 25],
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT