https://github.com/fiberjw/react-native-stylehooks

Responsive React Native styles made simple.
https://github.com/fiberjw/react-native-stylehooks

css expo react react-native style stylesheet

Last synced: 18 days ago
JSON representation

Responsive React Native styles made simple.

• Host: GitHub
• URL: https://github.com/fiberjw/react-native-stylehooks
• Owner: FiberJW
• License: mit
• Created: 2019-11-23T07:27:56.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-01T05:18:39.000Z (over 4 years ago)
• Last Synced: 2024-10-13T11:13:27.279Z (about 1 month ago)
• Topics: css, expo, react, react-native, style, stylesheet
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-stylehooks
• Size: 3.47 MB
• Stars: 46
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





`react-native-stylehooks`





  Responsive React Native [Web] styles made simple.



---



[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://github.com/expo/expo)

[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://github.com/expo/expo)

[![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://github.com/expo/expo)



## Getting Started

- Run `yarn add react-native-stylehooks` in your React Native [Web] app

- Use it similarly to the example shown below

```jsx

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { View, Text } from 'react-native';

import { StyleSheet } from 'react-native-stylehooks';

function App() {

  const styles = useStyles();

  return (

    

      Hello, Stylehooks

    

  );

}

const breakpoints = {

  tablet: 1024,

  mobile: 400,

};

const useStyles = StyleSheet.create({

  container: ({ window: { width } }) => {

    return {

      flex: 1,

      justifyContent: 'center',

      height: '100vh',

      alignItems: 'center',

      backgroundColor: width <= breakpoints.tablet ? '#4630eb' : '#000020',

      borderColor: width <= breakpoints.mobile ? '#decd50' : '#93d9de',

      borderWidth: 8,

    };

  },

  text: _ => {

    return { color: 'white', fontSize: 32 };

  },

});

ReactDOM.render(, document.getElementById('root'));

```