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; const App = { return <ThemeProvider value=theme> <Root /> </ThemeProvider> ;}
Step 2. Use component.
//inside any file; const MyScreen = { return <> <TextH1>Your Headline</TextH1> <TextBody1>Your Body</TextBody1> <Button title="Press me" /> </> ;}
Customize
//theme.config.js at rootconst yourFontFamily = fontPrimaryMedium: 'Ubuntu-Medium' const yourTheme = colors: basePrimaryDark: '#B63792' basePrimaryMain: '#B31E72' basePrimaryLight: 'rgba(179, 30, 114, 0.07)' ... typography: h1: fontSize: 24 fontFamily: yourFontFamilyfontPrimaryMedium lineHeight: 36 ... ;
; 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
- Input
- Navigation
- Surface
- Feedback
- Data Display
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