RadialGradient

Overview

RadialGradient is similar to LinearGradient. The difference is that RadialGradient is drawn from a point to diverge.

Code demo

Note: for more information, see RadialGradient Demo.

Basic radial gradient

The following shows a radial gradient. The gradient radius is 100, the inner circle coordinates are (100, 100), the outer circle coordinates are (100, 100), and the yellow to blue radial gradient is performed outward.

import React from "react";
 import { View } from "react-native";
 import { RadialGradient } from "tuya-panel-kit";
 const dimension = { width: 200, height: 300 };
 export default () => (
  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <View style={dimension}>
      <RadialGradient
        style={dimension}
        stops={[
          {
            offset: "0%",
            stopColor: "#ff0",
            stopOpacity: "1",
          },
          {
            offset: "100%",
            stopColor: "#00f",
            stopOpacity: "1",
          },
        ]}
        rx="50%"
        ry="50%"
        fx="50%"
        fy="50%"
        cx="50%"
        cy="50%"
      />
    </View>
  </View>
 );

Basic radial gradient 2

The following shows a radial gradient. The gradient radius is 100, the inner circle coordinates are (200, 100), the outer circle coordinates are (100, 100), and the red, yellow and pink radial gradient is performed outward.

import React from "react";
 import { View } from "react-native";
 import { RadialGradient } from "tuya-panel-kit";
 const dimension = { width: 200, height: 300 };
 export default () => (
  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <View style={dimension}>
      <RadialGradient
        style={dimension}
        stops={[
          {
            offset: "0%",
            stopColor: "red",
            stopOpacity: "1",
          },
          {
            offset: "50%",
            stopColor: "yellow",
            stopOpacity: "1",
          },
          {
            offset: "100%",
            stopColor: "pink",
            stopOpacity: "1",
          },
        ]}
        rx="50%"
        ry="50%"
        fx="100%"
        fy="50%"
        cx="50%"
        cy="50%"
      />
    </View>
  </View>
 );

Add radial gradient effect to the panel background

import _ from "lodash";
 import React from "react";
 import { View } from "react-native";
 import { NavigatorLayout } from "tuya-panel-kit";
 import composeLayout from "./composeLayout";
 import configureStore from "./redux/configureStore";
 import { routers } from "./config";
 export const store = configureStore();
 class MainLayout extends NavigatorLayout {
  hookRoute(route) {
    return {
      ...route,
      background: {
        stops: [
          {
            offset: "0%",
            stopColor: "yellow",
            stopOpacity: "1",
          },
          {
            offset: "100%",
            stopColor: "red",
            stopOpacity: "1",
          },
        ],
      },
    };
  }
  renderScene(route, navigator) {
    let Scene = <View />;
    let schema = {};
    let uiConfig = {};
    const { dispatch, devInfo, dpState } = this.props;
    if (! _.isEmpty(devInfo)) {
      schema = devInfo.schema || {};
      uiConfig = devInfo.uiConfig || {};
    }
    const router = routers.find((r) => r.id === route.id);
    if (router && router.Scene) {
      const Component = router.Scene;
      Scene = (
        <Component
          dpData={{ state: dpState, schema, uiConfig }}
          dispatch={dispatch}
          navigator={navigator}
          {...route}
        />
      );
    }
    return Scene;
  }
 }
 export default composeLayout(store, MainLayout);

API

style

Container style.

rx

The horizontal radius of the innermost circle, which is the gradient length.

ry

The vertical radius of the innermost circle, which is the gradient height.

fx

The x-axis coordinate point of the innermost circle, which is the gradient center point.

fy

The y-axis coordinate point of the innermost circle, which is the gradient center point.

cx

The x-axis coordinate point of the outermost circle.

cy

The y-axis coordinate point of the outermost circle.

stops

Gradient stop point

Note: The above default value is a yellow to blue gradient radiating outward from the center point.

Reference

For more information, see react-native-svg/RadialGradient.