react-native-elements / playground Goto Github PK

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

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

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

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?

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.

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

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)

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

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

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

Only CSS property change for it.

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 :)

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?

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.

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

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

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

Deliverables

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

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

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

Possible Fix
Refer MUI docs

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

Possible Cause
Updated Props in the Library

Description

The project do not have any issue template.

Requirements

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

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.

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.

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.

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

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

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

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

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

Change some margin and text change

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

To reproduce:

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

Expected Behavior:

• Only the loading icon should be visible

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

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):

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.

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?

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"

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.

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

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.

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.

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

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 :)