Dev-rn NPM | npm.io

A reusabale component library

Install

npm install dev-rn

This library needs react-native-svg & react-native-svg-transformer so go on and install that too. Check out Install guide react-native-svg, react-native-svg-transformer.

Usage

Dev RN uses a centralized theme to provide consistency across all the components.

Step 1. Import ThemeProvider and theme then wrap your root component.

This step is important. We are passing theme as context value that each component will access.

//your root component
import { ThemeProvider, theme } from 'dev-rn';

const App = () => {
  return (
    <ThemeProvider value={theme}>
      <Root />
    </ThemeProvider>
  );
}

Step 2. Use component.

//inside any file
import { Button, Text } from 'dev-rn';

const MyScreen = () => {
  return (
    <>
    <Text.H1>Your Headline</Text.H1>
    <Text.Body1>Your Body</Text.Body1>
    <Button title="Press me" />
    </>
  );
}

Customize

//theme.config.js at root
const yourFontFamily = {
  fontPrimaryMedium: 'Ubuntu-Medium'
}

const yourTheme = {
  colors: {
    basePrimaryDark: '#B63792',
    basePrimaryMain: '#B31E72',
    basePrimaryLight: 'rgba(179, 30, 114, 0.07)',

    ...
  },
  typography: {
    h1: {
      fontSize: 24,
      fontFamily: yourFontFamily.fontPrimaryMedium,
      lineHeight: 36,
    },

    ...
  }
}

export default yourTheme;

import { ThemeProvider } from 'dev-rn';
import yourTheme from './theme.config'

const App = () => {
  return (
    <ThemeProvider value={yourTheme}>
      <Root />
    </ThemeProvider>
  );
}

And we are done!