GeekyAnts / GeekyAnts/NativeBase

Please tighten StyledProps to catch invalid (but CSS-valid) values that crash Android

Open
#5,650 2 comments 1 reaction 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

[`StyledProps` currently does](https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/types.ts#L14-L20) a look up on React Native style types and [csstype](https://www.npmjs.com/package/csstype), to pull in types from the project's used versions of those dependencies. This seems to work well for most style props.

However, there are some, like `alignItems`, `alignSelf`, `display` etc that exist on both React Native style types and CSSTypes, and which have very permissive types like `string` on csstype which allows invalid values. There's an issue on their repo for that https://github.com/frenic/csstype/issues/8 - to summarise: it's to allow space-separated multi value strings, which are seldom used, but are technically valid in CSS.

The net result is, some style props like `alignItems` end up accepting any string:

image

...but the actual app will crash on Android if the value is not one of the known allowed values listed in the React Native style type:

image

### Problem Statement

If a prop will cause a hard crash in Android, NativeBase's types should flag it as invalid.

### Proposed Solution or API

I think this could be solved by switching the order on the type selector to choose React Native first then CSSTypes if both have the given key? Currently, if a key exists in both, the csstype type is used and the RN type is ignored.

### Alternatives

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start in src/theme/types.ts around lines 14-20 and inspect how overlapping React Native and csstype keys are selected. Compare the type behavior for props such as alignItems, alignSelf, and display, then confirm that values rejected by React Native are no longer accepted while valid shared values remain supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.