react-native-elements / playground

Exploring Possibilities with React Native Elements

Cross Platform React Native UI Toolkit

Getting Started 🚀 - Documentation 📚 - Expo demo - Blog - Releases

Installation

npm install @rneui/themed @rneui/base

Follow these instructions to install React Native Elements!

Packages

Package	Version	Downloads
@rneui/base
@rneui/themed

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.

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.

playground's Issues

bug: tooltip doesn't work as expected

Description

Tooltip doesn't work as expected.

Expected behaviour

The tooltip should not overlay the text

Screenshot

PS: There isn't any template for issue or PR should I make one?

What's your opinion @pranshuchittora

To Enable Deselection of item from side bar

Issue:
when we click on any component on sidebar ,we get directed to header page and header gets selected with grey coloured selection .Now, if we click on the playground title , we get redirected to home page , but header was still selected

bug: Incorrect MDX files for some of the playground.

Issue:

• Some of the playgrounds index.js files is importing incorrect MDX files, ex:- listItem Playground, Input Playground, Rating Playground and more.
• Also ListItem is missing its PropDrawer completely.

Query: Does anyone have any solution for this?

I tried various things on the internet, nothing seems to work!

Also some loader missing problem.

I was trying to build the app after changing some settings(adding loader) inside config-overrides.js customized-cra and react-app-rewire

@pranshuchittora, any work around it?

bug:app not working

Description

After the recent #15 PR merge, the app isn't starting.

To Reproduce:

1. run npm start

Screenshots

I found two ways to solve this error:

• by removing the props folder from .gitignore and adding them again
• by removing the local RNE repo from .gitignore and adding the required import path to each file.

PS: I have solved the error by both the methods listed if any better option present kindly mention it. Waiting for the confirmation then I will make the PR.
@pranshuchittora

bug: Apparently a typo in .gitignore

This line seems to be a typo, I am aware of the package-lock.json but not the package-json.lock file.

playground/.gitignore

Line 21 in 562107d

package-json.lock

Is it a specific file that npm creates? There is a possibility I don't know about it.

chore: Code Improvements

Description

The project is in its initial phase, and the code is written with an idea of move fast and break things. So there are many possible improvements. Mentioning some but not limited to these only 😄

• Inline styling to the stylesheet
• Proper Scoping and Abstraction of composable components.
• Improve folder structure, if any
• Improve UI/UX

playground crashes upon irrevelent input to the object parameters in development mode.

Steps to Reproduce:

1. Start the server by yarn start
2. Open the playground for any component
3. Goto any object input field
4. start typing improper input

Expected behaviour:
It shows a pop-up with the error message ( which it does ) and it should not crash which happens after some delay

Actual Behaviour:
https://user-images.githubusercontent.com/44672399/110827446-156f2480-82bc-11eb-8253-a9b2f9195c06.mov

chore: Issue templates

Description

The project do not have any issue template.

Requirements

• bug_report.md
• Pull_request_template.md
• Feature_request.md

Input : Placeholder text always displaying

Here is the link of video pointing out the issue :- https://www.loom.com/share/1617cf3700884c14a235a6a4ef999b17

Visit https://react-native-elements.js.org/#/input
Go to placeholder input box
we can see there that evenafter clicking on input box under placeholder box ,the placeholder text is not disappearing.

Current Behaviour

The placeholder text is not diappearing after we start typing in the placeholder box.

Expected Behaviour

The placeholder text should disappear as soon as we start typing in it.

Fix: Ability to close the navigation drawer in mobile on clicking outside

Deliverables
The navigation drawer should close on clicking outside (on click of grey area)

Possible Fix
Refer MUI docs

Adding upcoming RNE-component Playground : Tab

Adding new Playgrounds

Some new components are added into RNE this month, hence their playgrounds are missing, so I decided to add one of them called Tabs.

Since these components are going to be released in the next version, I was thinking of creating the next branch itself and adding the latest playgrounds there. What do you think? @pranshuchittora.

something like you did @react-native-elements/react-native-elements#2943,

Please look at the PR, I added Tab Component Playground there. Will be adding more New RNE Components after the discussion.

Fix some UI design and text for look more professional

Change some margin and text change

Tooltip: toggling toggleOnPress, withOverlay, withPointer props does nothing

Video Recording of the bug:
https://www.loom.com/share/b3565ac9a0ad43b49c2bf384ca0ec4bd

Bug: Overlay Component is not rendering

This issue seems similar to #19
https://react-native-elements.js.org/#/overlay

ButtonGroup: onPress does not select button and updates selectedIndex

Screen Recording of the issue:
https://www.loom.com/share/2f1d77cf8d8a469faba06b5c242071f4

Expected behavior (Required)
After pressing the button it should be selected (if not disabled)

Cross button (top rightIcon) in the input component not working.

Clicking on the cross button (rightIcon) in the input section must delete the contents of the input section, but it does nothing.
I tried to fix it, but I am not able to do so. Any help?

Error in ToolTip Component in SideBar

Issue:
when clicking on hello there


The pop up shown needs proper alignment and styling .

Possible Solution:
1.Providing proper alignment to "hello there" area .
2. Applying styling so that "hello there" is clearly visible on the pop up area.

CheckBox: clicking on checkbox does nothing, `right` prop does nothing, leftIcon is not a valid prop for the component

Screen recording of the issue: https://www.loom.com/share/a51de785966c415fa91d2dfb410ba687

Expected behavior

• Clicking on checkbox should change it's state to checked (preferably have it stateful)
• right prop should move the checkbox to the right (as mentioned in the docs)
• leftIcon should be removed

Describe the bug

• right prop does nothing
• leftIcon prop is not supported by CheckBox (its default position is left anyway)

To Reproduce

• Go to https://react-native-elements.js.org/#/checkbox
• Click on the checkbox component, right prop, or iconLeft

Add Switch Component Support to the playground

Is your feature request related to a problem? Please Describe.
The Switch component is recently been introduced in the package. https://reactnativeelements.com/docs/next/switch. Therefore we would need a page here for the same to play with the component in the playground.

Describe the solution you'd like
Add a new Page for the Switch component.

Describe alternatives you've considered
There's no such alternative for the case.

Additional context
References:
https://reactnativeelements.com/docs/next/switch
react-native-elements/react-native-elements#2877

bug: injectProps.js not adding Props folder in content folder

Bug:
when new collaborator does npm i, they are not getting src/content/Props folder.

**Problem Details and possible solutions. **

1. combine two exec functions into one
2. Instead of exec use execSync

**Tested? **

• Yes, It is working fine after the above-shown changes.
• Adding both react-native-elements folder and Props Folder at appropriate positions.

Also solve Netlify build problem

Docs: Add a content to the README of the Project

Deliverables

• Add the Hero Image.
• What problem this project solves.
• Architecture
• Tooling used
• Related Projects
• Open Collective Supporters

SocialIcon: original icon is visible when loading

To reproduce:

• Visit https://react-native-elements.js.org/#/social-icon
• Check the loading checkbox

Expected Behavior:

• Only the loading icon should be visible

Input: renderErrorMessage is not working

To Reproduce (Required)

• Go to https://react-native-elements.js.org/#/input
• Click on renderErrorMessage checkbox
• Error message is always visible

Current behavior (Required)

• Error message is always visible

Expected behavior (Required)

• Error message should not be visible when renderErrorMessage is false

🐛 Bug: Error log is unaligned and breaking the UI of playground. (Need to make a hot-fix) for all components.

Explain what you did (Required)

• I intentionally tried to create a compilation error on the playground.
• The error popup was found breaking UI for the playground application.

Expected behavior (Required)

• The error component should not break the UI.
• This will cause the user un-comfortable while using the playground web app.

Describe the bug (Required)

• The bug is breaking the UI of the Playground.

To Reproduce (Required)

https://react-native-elements.js.org/#/icon'

• Steps

1. Go to 'https://react-native-elements.js.org/#/icon'
2. Try to create typos 'in the text editor of the playground'.
3. Scroll down to 'Look to the top error components'

Screenshots (Required)

Expected: (screenshot)

@pranshuchittora, and @flyingcircle... I have started working on the bug to be fixed as early as possible?

Any suggestions are welcome @flyingcircle @pranshuchittora

Lack of proper alignment between the Type and Default in the Props explorer

Explain what you did (Required)
When I open the Props Explorer I found that the alignment between the Types and Default is not well oriented and varies for every props. Therefore I feel it should be improved for better user experience while reading

Expected behavior (Required)
A better alignment between Types and Default values

Describe the bug (Required)
No proper alignment between the Types and Default for the Props explorer

To Reproduce (Required)
Click on Props explorer and it will be noticed that every prop has different/varied alignments

We highly recommend that you re-create the bug on Snack. If not, list the steps that a reviewer can take to reproduce the behaviour:

Example:
Potential fix is we can have a table view with rows and columns having proper border.

• Steps

1. Go to 'Avatar(for example)'
2. Click on 'Props explorer on the bottom right corner'
3. Scroll down to 'To the slider'
4. See the issues as it is not uniform

Screenshots (Required)

Your Environment (Required):

software	version
react

Overlay: isVisible remains checked even after the overlay is closed

Screen Recording of the issue: https://www.loom.com/share/cdc63f729fa440a9850cf5adaffecd11

Expected behavior

• The isVisible checkbox should uncheck after the overlay is not visible

To Reproduce

• Go to https://react-native-elements.js.org/#/overlay
• Check the isVisible checkbox
• Close the overlay
• The isVisible checkbox remains open

Feat: Update Component Props

Is your feature request related to a problem? Please Describe.
There are some components whose props have been deprecated/not updated with the latest version 3.3.1.
For example, fractions prop is missing in the Rating component.

Describe the solution you'd like
These props would need to be updated in the playground.

Additional context
I would like to work on this issue.

Adding prettier as a dev dependency

Is your feature request related to a problem? Please Describe.
We can better add prettier to the repo: https://www.npmjs.com/package/prettier
So whenever we will run npm run format, It will automatically format the whole code.

Describe the solution you'd like
Adding prettier as a dev dependency as it will format all the code.

Describe alternatives you've considered

Additional context

Make home Playground and icon 🚀 inline

Only CSS property change for it.

PWA (manifest) logo icons are not being loaded

Describe the bug

• PWA logo icons are not present

Expected behavior

• Logo images should be present and hosted

To Reproduce

• Go to https://react-native-elements.js.org/#/
• See console
  
• The required app logo images are not present

chore: create pull request template

it would be good to have a pull request template setup which will help maintainer to extract some core/useful information from contributor about raised pull request.

SocialIcon: toggling of raised prop does nothing in playground

Expected behavior (Required)
It should add/remove drop shadow on toggling.

Adding a .prettierrc file

Why?

• since many developers around the world are going to collaborate on this wonderful organisation/repo. Everyone should follow some convention.
• on the plus side, it avoids unnecessary spaces, lines, indentations, No need to discuss style in code review, which Saves you time and energy.

Why I am opening this issue:-

• Because I faced problems when I added this repo to my vscode editor. since settings of writing code are as per developer to developer, code unnecessary jumps from one line to another, making GitHub noticing it and adding insertion and deletion count, making the task of maintainers hard.

Solution:

• just add a .prettierrc file to the project and voila! All developers are united into a single convention.

Bug: Avatar Component is not rendering

Avatar Component is not rendering -> https://react-native-elements.js.org/#/avatar

Possible Cause
Updated Props in the Library

Build is currently failing

https://github.com/react-native-elements/playground/actions/runs/1616009494

I think this is likely due to some of the props changes that we've made in RNE.

@jugshaurya perhaps you have some insight to this?

Feat: Adding prop explorer for AirBnB rating and all other props

Is your feature request related to a problem? Please Describe.

• The props explorer for (AirBnB) is missing.

Describe the solution you'd like

• Introducing AirbnbRating.mdx.

Additional context

• Please see the bottom right corner.(no options for viewing props.)

@pranshuchittora, I would like to work on the above-mentioned issue. Already started working on it. Please assign me the task.
Thanks :)

Bug : bottom-sheet component is not rendering and giving a error No safe area insets value available.

I was going through the react-native-elements playground and found out, bottom sheet component is not rendering and it is displaying this error.

Error: No safe area insets value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app

https://react-native-elements.js.org/#/bottom-sheet

maybe this can be solved by importing SafeAreaProvider or safe area view.

Make footer components more interactive

Design make more interactive

In the footer sector text line is broken Cross-Platform React Native UI Toolkit and also this text Playground is using react-native-elements v3.0.0
The main goal is to make this line absolute in CSS property and make sure RNE_Logo has no change.

Add Prop Explorer to all the components

Is your feature request related to a problem? Please Describe.

Currently, Prop Explorer is not available for most of the components in React Native elements.
only Avatar, Badge, Button have a prop explorer for not.
Airbnb Rating comp does have a PR #53 adding prop component to it.

Describe the solution you'd like

We should add Prop Explorer to all of the components. This would enhance the experience of PlayGround by a lot.

Describe alternatives you've considered

Additional context

Remove package-lock.js from node_modules

The package-lock.json file needs to be committed to your Git repository, so it can be fetched by other people, if the project is public or you have collaborators, or if you use Git as a source for deployments.

please see/read https://nodejs.dev/learn/the-package-lock-json-file

Need to make BottomSheet Component interactive

Hello @pranshuchittora, @flyingcircle 👋 as currently there is no interactive BottomSheet in the Playground just we are passing default true to visible prop instead of doing this we can handle the state using the Button and make bottom sheet scope to the site instead of Compiler this way the BottomSheet component can be made more interactive to the user.

Would love to hear your thoughts on this and it would be great if you could assign this issue to me :)

Maintaining a11y

Issue main aim:

• Accessibility plays a vital role in today's modern web world. Some a11y rules were broken
• hence require fixing.

**Problems in the webapp **

• a11y/alt-txt
• a11y/accessible-emoji

one security concern

• react/jsx-no-target-blank

Solution

• adding span with role "img"
• adding alt attribute to img tags
• adding rel="noopener noreferrer"