rifqifadh / dev-rn

Welcome to dev-rn 👋

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!

You can see all the configurations available on the theme page.

Run tests

npm run test

Components included:

• Layout
  • Container
  • Grid
• Input
  • Button
  • CheckBox
  • Counter
  • Date / Time
  • FieldLabel
  • RadioButton
  • SearchBar
  • Slider
  • Switch
• Navigation
  • Bottom Navigation
  • Drawer
  • Menu
  • Stepper
  • Tabs
• Surface
  • App Bar
  • Card
  • Accordion
• Feedback
  • Progress
  • Dialog
  • Snackbar
• Data Display
  • Avatar
  • Badge
  • Chip
  • Divider
  • Icon
  • List
  • Tooltip
  • Typography / Text

Author

👤 Egi Ari Wibowo

• Github: @egiwibowo13

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator