Morioh
Login
Fethawi Nasih

Fethawi Nasih

3 years ago

React Native UI Components with React Hook (Web, Ios, android)

dooboo-ui

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.

Documentation

Contributing to dooboo-ui

dooboo-ui

  • See also
  • Contributing
    • Please run yarn pre so that the packages are prepared.
      • If you are having trouble, try to run yarn install-packages.
    • Try to make awesome UI components and test them in storybook. Ensure to test in platforms we provide which are iOS, android and web. Then it’s all good to go for pull request. Give it a try 🌼.
  • 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 using package.json. If you find something more efficient, please give a pull request.

Usage

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.

Compatibility

package version
react >=16.13
react-native >=0.62
styled-components >=5.1.1

List of independent components in @dooboo-ui/*

Below elements are not included in dooboo-ui package since it depends on other packages that may overload its package.

Troubleshoot

Workaround when you face error in expo web

You need to set webpack for using “dooboo-ui” in expo-web.

  1. Install @expo/webpack-config in your expo’s project. yarn add @expo/webpack-config or npm install @expo/webpack-config

  2. Create webpack.config.js in root path and Add below code. See issue below for more details.

    ```javascript
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          'dooboo-ui',
        ],
      },
    },
    argv
  );
  return config;
};

Download Details:

Author: dooboolab

Source Code: https://github.com/dooboolab/dooboo-ui

#react-native #react #mobile-apps

React Native UI Components with React Hook (Web, Ios, android)
6.20 GEEK