How to covert linear gradient from css to linear gradient in react native?

Question

I have a linear gradient in css linear-gradient(315.43deg, #706EB6 -6.67%, #A57FCF 106.6%) and i want to use with the component LinearGradient in react native. What are the equivalents of start, end and locations props and How can i pass from linear gradient in css to react native ?

Rahul Khurana · Accepted Answer · 2021-10-08 12:30:11Z

1

In React Native you can use colors property like this

<LinearGradient colors={['transparent', '#000000']}>
</LinearGradient>

In the same way, you can pass the start, end positions

You can see the props of LinearGradient here

declare module 'react-native-linear-gradient' {
  import * as React from 'react';
  import * as ReactNative from 'react-native';

  export interface LinearGradientProps extends ReactNative.ViewProps {
    colors: (string | number)[];
    start?: { x: number; y: number };
    end?: { x: number; y: number };
    locations?: number[];
    useAngle?: boolean;
    angleCenter?: {x: number, y: number};
    angle?: number;
  }

  export class LinearGradient extends React.Component<LinearGradientProps> {}

  export default LinearGradient;
}

answered Oct 8, 2021 at 12:30

Rahul Khurana

8,8747 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdo Rabah Over a year ago

Thanks for the explanation. But how can i pass from linear gradient in css to react native ?

Rahul Khurana Over a year ago

@AbdoRabah We can't do this in React-native. CSS is used on the web. In the mobile apps, you have to use the alternate methods provided

Collectives™ on Stack Overflow

How to covert linear gradient from css to linear gradient in react native?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related