GeekyAnts / GeekyAnts/NativeBase
Please tighten StyledProps to catch invalid (but CSS-valid) values that crash Android
- 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:

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

### 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
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