React Native Silver

Reactive styling (light & dark mode) for React Native applications 🎨📱

Installation

npm install react-native-silver

Usage

Import createStyle function

import createStyle from 'react-native-silver';

function App() {
  const { styles } = useStyles();

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

const useStyles = createStyle(({ isDark }) => ({
  container: {
    backgroundColor: isDark ? '#000000' : '#ffffff',
  },
  text: {
    color: isDark ? '#ffffff' : '#000000',
  },
}));

Also properties are available inside component while calling the styles hook

const { styles, width, ... } = useStyles();

Properties

Property	Type	Description
isDark	boolean	Return the current color scheme of the application
width	number	Return application window's width, it's value retrieved from useWindowDimensions hook
height	number	Return application window's height, it's value retrieved from useWindowDimensions hook
fontScale	number	Return the scale of the font currently used, it's value retrieved from useWindowDimensions hook
scale	number	Return the pixel ratio of the device your app is running on, it's value retrieved from useWindowDimensions hook

Contributing

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

License

MIT