React Native: Radial Gradient Background

Question

Is there an package, or another way to have a simple, let's say blue to blueish, radial gradient background, for one of the views?

I've tried react-native-radial-gradient, but it seems like it's outdated.

Antineutrino

Answer 1

Probably you can use RadialGradient from my react-native-image-filter-kit package. Note that gradients from react-native-image-filter-kit are initially designed as primitives for blending with other images and your case is not something that was taken into account in the first place.

import { Image } from 'react-native'
import {
  RadialGradient,
  ImageBackgroundPlaceholder
} from 'react-native-image-filter-kit'

const imageStyle = { width: 320, height: 320 }

const gradient = (
  <RadialGradient
    colors={['red', '#00ff00', 'blue']}
    stops={[0, 0.5, 1]}
    image={
      <ImageBackgroundPlaceholder style={imageStyle}>
        /* your content here */
      </ImageBackgroundPlaceholder>
    }
  />
)

Hein

This fixed my problem with transparent colors in react-native-radial-gradient. Great repo, thanks! – Lookthrough

Oh my, you saved my day. – Passage

Answer 2

You can also create your own radial gradient using the react-native-svg package:

import { Defs, Stop, Svg, RadialGradient as SVGRadialGradient, Path } from 'react-native-svg'

export function RadialGradient() {
  return (
    <Svg
      height="100%"
      width="100%"
      style={{
        position: 'absolute',
      }}
    >
      <Path
        d="M0 0H375V279C375 283.418 371.418 287 367 287H8C3.58172 287 0 283.418 0 279V0Z"
        fill="url(#grad)"
      />
      <Defs>
        <SVGRadialGradient
          id="grad"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(187.5 50.5) rotate(90) scale(180 350.061)"
        >
          <Stop stopColor={'#3730A3'} />
          <Stop stopColor={'#0F0E26'} offset={1} />
        </SVGRadialGradient>
      </Defs>
    </Svg>
  )
}

Boynton