Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

screensdev/styles

Open more actions menu

Styles

Cross-platform styles for React Native without the complexity.

  • Fully Typesafe
  • No Babel Plugin Required
  • No native code (Works in Expo Go)

Installation

Add to your project using one of the following:

yarn add @screensdev/styles
bun add @screensdev/styles
npm install @screensdev/styles

Basic Usage

import { Text, View } from 'react-native';
import { createStyleSheet, useStyles } from '@screensdev/styles';

export default function Component() {
  const styles = useStyles(styleSheet);

  return (
    <View style={styles.container}>
      <Text style={styles.text}></Text>
    </View>
  );
}

const styleSheet = createStyleSheet({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  text: {
    color: 'red',
  },
});

Features

  • Theme Support
  • Media queries
  • Container queries
  • Variants
  • Responsive Variants
  • Breakpoints

Attribution

The foundation for this library was adapted from v2 of the react-native-unistyles library.

Original source: https://github.com/jpudysz/react-native-unistyles/tree/v2.43.0 Author: Jacek Pudysz License: MIT

Compared to the original the following modifications have been made:

  • Container queries
  • Improved TypeScript support with stricter types
  • Performance improvements
  • Additional unit tests
  • Overhauled theming system
  • Removed native runtime
  • Removed plugin support
  • Removed dynamic style objects

License

MIT


Made with create-react-native-library

About

Cross-platform styles for React Native without the complexity.

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.