GithubHelp home page GithubHelp logo

react-native-elements / react-native-elements-storybook Goto Github PK

View Code? Open in Web Editor NEW
27.0 27.0 15.0 2.8 MB

Storybook for React Native Elements UI Library

License: MIT License

JavaScript 15.82% HTML 82.92% Java 0.22% Objective-C 0.61% CSS 0.13% Starlark 0.31%
react-native react-native-elements react-native-web storybook

react-native-elements-storybook's Introduction

react-native-elements

Cross Platform React Native UI Toolkit



Installation

npm install @rneui/themed @rneui/base

Follow these instructions to install React Native Elements!

Packages

Package Version Downloads
@rneui/base badge npm
@rneui/themed badge npm

Quick Start

Start using the components or try it on Snack.

import { Button } from '@rneui/base';

const App = () => <Button title="Hello World!" />;

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Expo demo app

Checkout the official React Native Elements App on Expo which uses all of the React Native Elements components.

If you are looking to contribute to the React Native Elements App, here to view the implementation & Use this command to start example app locally

yarn example:start

VS Code Extension

Install the React Native Elements VS Code Extension to speed up development.

Documentation

View the full docs here

Contributing

Interested in contributing to this repo? Check out our Contributing Guide, Setup Guide and submit a PR for a new feature/bug fix.

A big shoutout to all our contributors! You could be here too!

First Contributors

We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label Good First Issue on the issues. Click here to see them.

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

Community

  • Discord - In case you have any other question or would like to come say Hi! to the RNE community, join our Discord Server. See you on the other side! ๐Ÿ‘‹๐Ÿ˜ƒ

  • Twitter - Follow us on Twitter to get the latest updates.

Backers

Become a backer and show your support for React Native Elements.

React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer

Sponsors

Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info. Check our sponsors on website.

React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer

react-native-elements-storybook's People

Contributors

haruelrovix avatar naturalclar avatar theodorusyoga avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-native-elements-storybook's Issues

Unable to start metro, react-native start hit error

Running react-native start to start the metro bundler gives the following error:

UnhandledPromiseRejectionWarning: Error: `fsevents` unavailable (this watcher can only be used on Darwin) at new FSEventsWatcher

Could not get unknown property 'mergeResourcesProvider' when running on Android

Steps to reproduce:
I got this error while running on Android: yarn android (react-native run-android).

Where:
Script '/Users/theoyoga/Documents/react-native-elements-storybook/node_modules/react-native/react.gradle' line: 95
What went wrong:
A problem occurred configuring project ':app'.
> Could not get unknown property 'mergeResourcesProvider' for object of type com.android.build.gradle.internal.api.ApplicationVariantImpl.

Temporary solution:
I found the issue and a quick workaround from this link: facebook/react-native/24022#474717616. I solved it by upgrading gradle version and SDK versions, etc in android/build.gradle.

@haruelrovix I also submitted a PR related to this error. Please take a look.

Thanks.

Potential security vulnerability in one of your dependencies

An issue was discovered in lib/Server.js in webpack-dev-server before 3.1.11. Attackers are able to steal developer's code because the origin of requests is not checked by the WebSocket server, which is used for HMR (Hot Module Replacement). Anyone can receive the HMR message sent by the WebSocket server via a ws://127.0.0.1:8080/ connection from any origin.

Need to upgrade webpack-dev-server to version 3.1.11 or later.

chore: needed issue and pull request templates.

There should be proper templates to extract out useful information about contribution.

Templates need to be added are:

  • bug report template
  • pull request template
  • feature request template

The following asset(s) exceed the recommended size limit

To reproduce, run yarn build-storybook. There are two asset size limit warnings that can impact web performance.

yarn build-storybook
yarn run v1.15.2
$ build-storybook -c .storybook -o .out
info @storybook/react v5.0.6
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (12 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.587e785d3b39ea07a8b4.bundle.js (1.19 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.19 MiB)
WARN       runtime~main.6ac4c33d73ae9704bbb9.bundle.js
WARN       vendors~main.587e785d3b39ea07a8b4.bundle.js
WARN       main.78dd7914b17fa05a2a5e.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading custom webpack config (extending mode).
info => Using base config because react-scripts is not installed.
info => Compiling preview..
 10% building 1/1 modules 0 active(node:1679) DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
info => Preview built (19 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.233f5970e9ab16c4055e.bundle.js (1.66 MiB)
WARN   iframe.html (385 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.67 MiB)
WARN       runtime~main.233f5970e9ab16c4055e.bundle.js
WARN       vendors~main.233f5970e9ab16c4055e.bundle.js
WARN       main.233f5970e9ab16c4055e.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/

Solution: implement Code Splitting.

Catch up with latest React Native Web version

Current RNW:

โžœ  react-native-elements-storybook git:(master) npm show react-native-web

[email protected] | MIT | deps: 10 | versions: 210
React Native for Web
https://github.com/necolas/react-native-web#readme

keywords: react, react-component, react-native, web

dist
.tarball: https://registry.npmjs.org/react-native-web/-/react-native-web-0.11.7.tgz
.shasum: d173d5a9b58db23b6d442c4bc4c81e9939adac23
.integrity: sha512-w1KAxX2FYLS2GAi3w3BnEZg/IUu7FdgHnLmFKHplRnHMV3u1OPB2EVA7ndNdfu7ds4Rn2OZjSXoNh6F61g3gkA==
.unpackedSize: 2.5 MB

dependencies:
array-find-index: ^1.0.2      fbjs: ^1.0.0                  prop-types: ^15.6.0
create-react-class: ^15.6.2   hyphenate-style-name: ^1.0.2  react-timer-mixin: ^0.13.4
debounce: ^1.2.0              inline-style-prefixer: ^5.0.3
deep-assign: ^3.0.0           normalize-css-color: ^1.0.2

maintainers:
- necolas <[email protected]>

dist-tags:
latest: 0.11.7        next: 0.11.0-alpha.3

published 2 months ago by necolas <[email protected]>

Meanwhile, this is still v0.9.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.