GeekyAnts / GeekyAnts/NativeBase

Intellisense doesn't work for some props because TypeScript for these props are not correct.

Open
#5,622 4 comments 3 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Intellisense doesn't work for some props because TypeScript for these props are not correct.

### CodeSandbox/Snack link

No need.

### Steps to reproduce

Props like `justifyContent`, `alignItems`, `alignSelf`, `alignContent`, `flexDirection`, `flexWrap` have their type as `ResponsiveValue<(string & {}) | (number & {})>`, which doesn't work with Intellisense for suggesting because basically they're considered dynamic strings.

Steps to reproduce:
1. Use any component that has the props above
2. Type that prop and wait for suggestion
3. See that there are no suggestions, even though there should be like the original React Native style props.

They should suggest as follow:
- `justifyContent`: `"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"`
- `alignItems`: `"stretch" | "flex-start" | "flex-end" | "center" | "baseline"`
- `alignSelf`: same as `alignItems`
- `alignContent`: `"flex-start" | "flex-end" | "stretch" | "center" | "space-between" | "space-around"`
- `flexDirection`: `"column" | "row" | "column-reverse" | "row-reverse"`
- `flexWrap`: `"wrap" | "nowrap"`

TypeScript:
![image](https://user-images.githubusercontent.com/120077006/209459003-44d3eb3e-abee-4b63-9eda-7054b9661fe1.png)

No suggestions:
![image](https://user-images.githubusercontent.com/120077006/209459006-687d9860-7a62-4eb4-87d8-69215c2daa1a.png)

### NativeBase Version

3.4.25

### Platform

- [ ] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [ ] Next

### Other Platform

Visual Studio Code

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating the TypeScript definitions for justifyContent, alignItems, alignSelf, alignContent, flexDirection, and flexWrap in the component props. Verify the listed literal suggestions appear in Visual Studio Code for each prop, and confirm the existing responsive-value behavior remains supported.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.