Skip to content

Latest commit

 

History

History
181 lines (148 loc) · 5.25 KB

README.md

File metadata and controls

181 lines (148 loc) · 5.25 KB

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