LinearGradient

Overview

The main purpose of LinearGradient is to provide linear gradient effects for child nodes.

Code demo

Note: for more information, see LinearGradient Demo.

2-color vertical gradient

import React from "react";
 import { View } from "react-native";
 import { Rect } from "react-native-svg";
 import { LinearGradient } from "tuya-panel-kit";
 
const dimension = { width: 200, height: 300 };
 
export default () => (
  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <View style={dimension}>
      <LinearGradient
        style={dimension}
        x1="0%"
        y1="0%"
        x2="0%"
        y2="100%"
        stops={{
          "0%": "red",
          "100%": "yellow",
        }}
      >
        <Rect {...dimension} />
      </LinearGradient>
    </View>
  </View>
 );

3-color angular gradient

import React from "react";
 import { View } from "react-native";
 import { Rect } from "react-native-svg";
 import { LinearGradient } from "tuya-panel-kit";
 
const dimension = { width: 200, height: 300 };
 
export default () => (
  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <View style={dimension}>
      <LinearGradient
        style={dimension}
        x1="100%"
        y1="0%"
        x2="0%"
        y2="100%"
        stops={{
          "0%": "red",
          "30%": "blue",
          "100%": "yellow",
        }}
      >
        <Rect {...dimension} />
      </LinearGradient>
    </View>
  </View>
 );

Panel background gradient

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: {
        "3%": "red",
        "90%": "yellow",
      },
    };
  }
 
 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.

children

The child node will be added with a gradient effect, which is generally Rect.

x1

The x-axis coordinate of the starting point.

y1

The y-axis coordinate of the starting point.

x2

The x-axis coordinate of the ending point.

y2

The y-axis coordinate of the ending point.

stops

Gradient stop point.

Note: the above default value is a linear gradient from white to black from the upper left corner to the lower left corner.

Reference

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