GeekyAnts / GeekyAnts/NativeBase

angle support on react-native-linear-gradient integration

Open
#5,538 3 comments 0 reactions 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

`react-native-linear-gradient` [supports passing an angle instead of start and end positions](https://github.com/react-native-linear-gradient/react-native-linear-gradient#useangle--angle--anglecenter) to calculate gradients. The current integration of `LinearGradient` inside NativeBase does not support that.

### Problem Statement

The current implementation strictly uses [`start` and `end`](https://github.com/GeekyAnts/NativeBase/blob/5c52b856b5ce4c71eaaed8db03bedd853c6b0ba0/src/components/primitives/Box/index.tsx#L83), but `react-native-linear-gradient` already supports angle usage.

### Proposed Solution or API

Add support for `useAngle`, `angle` and `angleCenter` props in `linearGradient` style configuration. Since `lgrad` isn't typed anyway, we could just extract those props from it and pass it to `LinearGradient`:

```typescript
return (

{/* {React.Children.map(children, (child) =>
typeof child === 'string' || typeof child === 'number' ? (
{child}
) : (
child
)
)} */}
{wrapStringChild(children, _text)}

);
```

This can be much cleaner, but that's the gist of this request.

### Alternatives

_No response_

### Additional Information

I don't know how to handle older versions where the angle props aren't supported

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.