react-native-silver v0.5.1

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

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