react-native-radial-gradient

If automatic linking fails, follow these steps in Xcode:

1. In the project navigator, right-click Libraries ➜ Add Files to [your project's name].
2. Navigate to node_modules/react-native-radial-gradient and add SRSRadialGradient.xcodeproj.
3. Select your project in the navigator, go to the Build Phases ➜ Link Binary With Libraries section, and add libSRSRadialGradient.a.
4. Run your project using Cmd+R.

Follow these steps to manually configure Android:

1. Update MainApplication.java

Open android/app/src/main/java/[...]/MainApplication.java and:

• Add import com.surajit.rnrg.RNRadialGradientPackage; to the imports.
• Add new RNRadialGradientPackage() to the list returned by the getPackages() method.

2. Update settings.gradle

Append these lines to android/settings.gradle:

include ':react-native-radial-gradient'
project(':react-native-radial-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-radial-gradient/android')

3. Update app/build.gradle

Insert this line inside the dependencies block in android/app/build.gradle:

compile project(':react-native-radial-gradient')

To install the package, use npm:

$ npm install react-native-radial-gradient --save

Automatic Installation

For older React Native versions, you can attempt to link the library automatically:

$ react-native link react-native-radial-gradient

Import RadialGradient from react-native-radial-gradient to render a radial gradient background. You can wrap child elements inside the component to overlay them on the gradient.

import RadialGradient from 'react-native-radial-gradient';

<RadialGradient 
  style={{width:200, height:200}}
  colors={['black','green','blue','red']}
  stops={[0.1, 0.4, 0.3, 0.75]}
  center={[100, 100]}
  radius={200}
>
  {/* child elements */}
</RadialGradient>

The RadialGradient component accepts the following props:

• colors: An array of at least one color value. Colors can be strings (e.g., 'red', 'blue') or in #RRGGBB format.
• center: (Optional) An array of two float values [x, y] representing the center coordinates. If not provided, the center defaults to the middle of the element.
• radius: A float value representing the radius. The default value is min(width/2, height/2).
• stops: (Optional) An array of numbers defining the location of each color stop. Values must be between 0.0 and 1.0. For example, [0.1, 0.75, 1] means the first color covers 0%-10%, the second 10%-75%, and the third 75%-100%. If not provided, colors are distributed evenly.

The RadialGradient component accepts the following props to control the gradient appearance and positioning:

{
  /** Array of color strings (e.g., ['#ffffff', '#000000']) */
  colors: PropTypes.arrayOf(PropTypes.string),

  /** Array of numbers representing the color stops (0 to 1) */
  stops: PropTypes.arrayOf(PropTypes.number),

  /** The center point of the gradient as [x, y] coordinates */
  center: PropTypes.arrayOf(PropTypes.number),

  /** The radius of the gradient */
  radius: PropTypes.number,

  /** Standard View props (style, etc.) */
  ...ViewPropTypes
}