GeekyAnts / GeekyAnts/NativeBase
Some components trigger Strict Mode warning/error internally
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
Strict Mode complaints when using some components like `Icon` or `Badge` with valid string design tokens or with no props at all.
```
// Icon
Token 4 should be passed as a string.
Token 16 should be passed as a string. Please use extendTheme function to add this token in your theme
Token 16 not found in theme scale of fontSizes. Please use extendTheme function to add this token in your theme
Token 16 not found in theme scale of lineHeights. Please use extendTheme function to add this token in your theme
// Badge
Token 2 not found in theme scale of radii. Please use extendTheme function to add this token in your theme
// Divider
Token 100% not found in theme scale of sizes. Please use extendTheme function to add this token in your theme
Token 1px not found in theme scale of sizes. Please use extendTheme function to add this token in your theme
```
### CodeSandbox/Snack link
https://snack.expo.dev/BVsI21LyT
### Steps to reproduce
1. Go to Snack link
2. Connect a device
3. Check logs
### NativeBase Version
4.2.2, 3.3.0
### Platform
- [X] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [ ] Next
### Other Platform
_No response_
### Additional Information
As for `Icon`, possible cause comes from the following code when `useToken` doesn't return a string: https://github.com/GeekyAnts/NativeBase/blob/a7ce27c0291f81835b61e35a36037db5953d7cab/src/components/primitives/Icon/Icon.tsx#L10
And then `tokenizedFontSize` is later passed here: https://github.com/GeekyAnts/NativeBase/blob/a7ce27c0291f81835b61e35a36037db5953d7cab/src/components/primitives/Icon/Icon.tsx#L31-L37
As for `Badge`, the cause might come from `borderRadius` being specified with `2` in the theme configuration.
Contributor guide
Research direction
Start with the linked lines in src/components/primitives/Icon/Icon.tsx, especially the useToken handling around line 10 and tokenizedFontSize around lines 31-37. Compare the reported Icon, Badge, and Divider warnings using the Snack reproduction and device logs. Done means valid tokens and components without props no longer produce the reported Strict Mode warnings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100