GeekyAnts / GeekyAnts/NativeBase

Layout components to accept an "isDisabled" prop

Open
#5,614 1 comment 0 reactions 0 assignees View on GitHub
feature request triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Some components, like Checkbox, already accept an "isDisabled" prop, but the Layout components do not. This proposed change would deal with those components like Box, Row, Column, etc, and add a partly transparent mask to the foreground of the component, so the internal content of the component could still be partially seen, but not interacted with.

### Problem Statement

I build data-intensive applications, and often an action taken in one area of the app needs to disable a different area.
This is difficult to do with Native Base as it currently stands. We can change the _background_ of a component, but not the _foreground_.

### Proposed Solution or API

<Box isDisabled={true}> ... </Box>

or alternatively

<Box isMasked={true} maskBg="#aaa" maskAlpha={0.3}> ... </Box>

### Alternatives

It doesn't seem this would be difficult to implement. It could be as simple as a div or View with a partially transparent gray background absolutely positioned directly in front of the whole component, with a size exactly matching the component. Maybe the background color and transparency are configurable?

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.