GeekyAnts / GeekyAnts/NativeBase

Some components trigger Strict Mode warning/error internally

Open
#4,903 2 comments 0 reactions 0 assignees View on GitHub
bug stale triage v3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.