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

Theme

It's possible to create a theme and provide manual props to createStyle.

Step 1:

Create a theme in theme.ts file

import { createTheme } from 'react-native-silver';

const theme = createTheme({
  color: {
    primary: '#69758a',
    black: '#000000',
    white: '#ffffff',
  },
  size: {
    s: 7,
    m: 12,
    l: 18,
    xl: 26,
    xxl: 32,
  },
});

export default theme;
// In javascript project ignore below
export type Theme = typeof theme;

Step 2:

Provide the created theme to the SilverProvider in App.tsx

import React from 'react';
import createStyle, { SilverProvider } from 'react-native-silver';

import theme from './theme'

export default function App(){
  return (
    <SilverProvider theme={theme}>
      <Home />
    </SilverProvider>
  )
}

Step 3 (typescript only):

Create type file silver.d.ts in your types folder and add below code

import type {StyleProps} from 'react-native-silver'

import type {Theme} from './theme'

declare module 'react-native-silver' {
  interface StyleProps extends Theme {}
}

Using theme props:

const useStyles = createStyle(({color, size}) => ({
  container: {
    padding: size.xl,
    backgroundColor: color.primary
  }
}))

Configs

It's possible to control isDark value manually.

import React from 'react';
import createStyle, { SilverProvider } from 'react-native-silver';

export default function App(){
  return (
    <SilverProvider config={{isDark: false}}>
      <Home />
    </SilverProvider>
  )
}

isDark property also accepts a function

<SilverProvider config={{isDark: () => true}}>

Contributing

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

License

MIT