React Native UI components built by
dooboolab
We love react-hooks and willing to share our react-native ui components built in functional components using hooks. Also the dooboo-ui
is built on top of our favorite stacks like styled-components, typescript, jest, react-testing-library, expo, storybook, and so on.
- Hosted in github pages
- See also
- dooboolab's vision-and-mission
- dooboolab's code of conduct
- Contributing
- Please run
yarn pre
so that the packages are prepared.- If you are having trouble, try to run
yarn install-packages
.
- If you are having trouble, try to run
- Try to make awesome UI components and test them in
storybook
. Ensure to test in platforms we provide which areiOS
,android
andweb
. Then it's all good to go forpull request
. Give it a try ๐ผ.
- Please run
- While implementing UI components you should run
yarn watch
in order to build typescript files dynamically while implementing. This is currently the best solution to sync with your typescript code usingpackage.json
. If you find something more efficient, please give a pull request.
We aim to support react-native
ui components in all platforms and we are currently targeting iOS
, android
and web
. If you read issue on plan for unifying dooboo-ui, you can see in more detail how we want to drive this project.
package | version |
---|---|
react | >=16.9 |
react-native | >=0.58 |
styled-components | >=4.4.0 |
- Accordion
- Button
- ButtonGroup
- EditText
- LoadingIndicator
- RadioButton
- Rating
- SearchInput
- Slider
- SwitchToggle
You can use most light weight components in
dooboo-ui
by importing it which are listed above. However, we also support individual imports using seperate installation which are more UI heavy. Those packages start with@dooboo-ui/*
like@dooboo-ui/gifted-chat
and is listed below.
Below elements are not included in
dooboo-ui
package since it depends on other packages that may overload its package.
You need to set webpack for using "dooboo-ui" in expo-web.
-
Install @expo/webpack-config in your expo's project.
yarn add @expo/webpack-config
ornpm install @expo/webpack-config
-
Create webpack.config.js in root path and Add below code. See issue below for more details.
const createExpoWebpackConfigAsync = require('@expo/webpack-config'); module.exports = async function(env, argv) { const config = await createExpoWebpackConfigAsync( { ...env, babel: { dangerouslyAddModulePathsToTranspile: [ 'dooboo-ui', ], }, }, argv ); return config; };
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Please be our Backers.
Please make sure to read the Contributing Guide before making a pull request. Thank you to all the people who helped to maintain and upgrade this project!