nativebase/kitchen-sink

A sample application that showcases various components that come built-in with NativeBase v3.

NativeBase v3 KitchenSink

A sample application that showcases various components that come built-in with NativeBase v3.

Example

Here is a screenshot of the sample application:

Running it on Android

If you are on Android, you can run this in your expo-go app and scan the QR at this link.

Running it on iOS or Web

If you are on iOS or Web, you can checkout this link.

kitchen-sink's Issues

SubURL Missing

Expected- It must show sub URL too, once one enters into any component.
Actual- It is not displayed.

Platform

• Safari
• Chrome
• Brave
• Firefox

Priority

• Medium

Slider Bar Color

Repro in Slider
Expected- The bar color must be lighter while in dark mode.
Actual- It is complete in dark color.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Low

Slider Position

Repro in Transitions: Slide, Slide Composition, Slide Fade, Slide Wrapped
Expected- The slider popover must be visible once clicked on the button.
Actual- Gets hidden.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Screen.Recording.2021-06-28.at.6.00.44.PM.mov

Radio Button Invisibility

Repro in Radio: Dark Mode
Expected- The radio button must be a bit more clearly visible.
Actual- Not visible clearly.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Low

Text Invisibility

Repro in Link: Composite Link (Dark Mode)
Expected- The text must be visible.
Actual- Not visible.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Erased Outline

Repro in Modal: Modal Ref, Avoiding keyboard with Modal (Light Mode)
Expected- The outline on the left of the textbox must not be erased.
Actual- Erased slightly.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Low

Provide instructions on how to embed the kitchensink into an existing app

I am planning to do some custom theming of NativeBase, it would be useful to have the KitchenSink app sort of embeddable into another app (via React Navigation) so we can the a multitude of controls with the theme that we are using.

Use toggleColorMode in class components

I am using class components to develop my App.

I need some help on, how can I use toggleColorMode at App.js level to change themes all over the application, with class components.

URL UnSecured

Repro in Avatar
Expected- URL must be secured in a particular browser.
Actual- Shows Unsecured

Platform

• Firefox

Priority

• Medium

Save Button Functionality

Repro in Modal: Avoiding keyboard with Modal, Modal Ref
Expected- Save Button must work.
Actual- Not functioning.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Image Bottom Padding

Repro in Box: Composition ShoesCard.
Expected- Image must cover the bottom space too.
Actual- A bit of space is left on the bottom.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Straight Alignment

Repro in Link: Composite Link
Expected- Both the boxes must be aligned in a straight line when minimized.
Actual- Other box comes to the next line.

Platform

• Chrome
• Firefox
• Brave

Priority

• Medium

Text InVisibility

Repro in Popover: Ref Example (Dark Mode)
Expected- Text must be visible.
Actual- Not visible.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• High

Alignment in Single Horizontal Line

Repro in Heading: Sizes
Expected- The complete sentence must be aligned in a single horizontal line.
Actual- It is aligned as two sentences when the browser is minimized.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Vertical Divider Line Missing

Repro in Divider
Expected- There must be vertical lines between them.
Actual- No vertical line.

Platform

• Safari

Priority

• Medium

Screen Frozen

Repro in Modal: Multiple Modal, Size
Expected- On multiple clicks of the same component must not freeze the screen.
Actual- Screen gets frozen.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• High

Screen.Recording.2021-06-24.at.5.02.01.PM.mov

Resizing Loop - Windows - Firefox

Hey all together,

there is a problem in the production mode. It appears on Windows 10 with newest firefox.
your can see the example here: http://se-services.informatik.uos.de/studip/app/

Here is a link to a docker project on github: https://github.com/FireboltCasters/SSO-Stud.IP-UOS

Toggle Switch Color

Repro in Switch:
Expected- When the switch is off, the bar color must be visible.
Actual- Not visible.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Incorrect Arrow Icon

Repro in Popover: Popover Positions
Expected- The arrow symbol must be similar to others options have.
Actual- It is overlapping with the popover box and the symbol is different.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Low

Doesn't work with latest Expo app

Error message indicating that kitchine sink is built with Expo SDK 40.0.0 but the Expo Go app only supports 41, 42, 43 and 44.

This is when scanning the QR code at https://expo.dev/@geekyants/kitchensink-app-native-base

Failing to run on Android Emulator

I had no luck running the kitchen-sink on Windows machine Android emulator.

1. Open project in VS Code
2. npm install
3. npx react-native link
4. npx react-native start --reset-cache
5. npx react-native run-android

Plz advise of any missing steps to run the demo app on emulator under windows 10 environment.

Text Missing

Repro in ToolTip: ToolTip Position.
Expected- Must show the text along with the tick.
Actual- No text is displayed.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Close Icon

Repro in Alert: Dark Mode
Expected- Close icon must be visible.
Actual- Not visible.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Overlapping UI

Repro in Transitions: Slide Composition, Slide Wrapped
Expected- Slide Popover must not be overlapping with the buttons from the bottom.
Actual- Overlapping with the button.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Button Functionality

Repro in Popover: Basic
Expected- Both buttons should function.
Actual- Not getting clicked.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium

Close Button

Repro in Toast: Toast Status
Expected- The close button must be visible.
Actual- Hidden when minimized.

Platform

• Firefox

Priority

• Medium

Feature - Dockerfile example

It would be nice to have an Dockerfile ready to deploy this project :-)

Box Outline

Repro in Box, Center, CheckBox, Divider, Fab, Flex, Heading, HStack, Icon, IconButton, Image, Input, Modal, Link, Popover, Menu, Select, Progress, Spinner, Switch, Slider, TextArea, Toast, Text, Transitions, ZStack, Tooltip (Dark Mode)
Expected- The outline must be visible.
Actual- Not Visible.

Platform

• Chrome
• Firefox
• Safari
• Brave

Priority

• Medium