Colored Rectangle

The colored rectangle component ColorRect is used to distribute colors evenly or proportionally as specified.

ColorRect

• Evenly distributed:

  

• Uneven distributed:

  

• Custom style:

  

Common properties

Properties of colors

Example

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { ColorRect } from '@tuya/tuya-panel-lamp-sdk';
 
export default class Scene extends PureComponent {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        // Unevenly distributed.
        <ColorRect
            style={{ width: 80, height: 100 }}
            colors={[
              { color: 'green', percent: 0.14 },
              { color: 'yellow', percent: 0.26 },
              { color: 'red', percent: 0.6 },
            ]}
            onPress={() => {
              console.log('press');
            }}
          />
           // Evenly distributed.
         <ColorRect
            style={{ width: 80, height: 100 }}
            colors={['#E292FE', '#FFF76B']}
            onPress={() => {
              console.log('press');
            }}
          />
      </View>
    );
  }
}