gl-react/examples/cookbook-rn-shared/toolbox/Vec3ColorPicker.js

//@flow
import React, { Component } from "react";
import { Slider, StyleSheet, View, PixelRatio } from "react-native";

export type Vec3 = [number,number,number];

const styles = StyleSheet.create({
  root: {
    flexDirection: "row",
    flex: 1,
    alignItems: "center",
  },
  slider: {
    flex: 1,
    marginHorizontal: 8,
  },
  preview: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1 / PixelRatio.get(),
  },
});

export default class Vec3ColorPicker extends Component {
  props: {
    compact?: boolean,
    value: Vec3,
    onChange: (c: Vec3)=>any,
  };
  render() {
    const { value, onChange } = this.props;
    let [ r, g, b ] = value||[];
    const step = 0.01;
    return (
      <View style={styles.root}>
        <View
          style={[
            styles.preview,
            {
              backgroundColor: `rgb(${[r,g,b].map(v => Math.floor(v*255))})`,
              borderColor: `rgb(${[r,g,b].map(v => Math.floor(0.8*v*255))})`
            }
          ]}
        />
        <Slider
          style={styles.slider}
          value={r}
          step={step}
          onValueChange={r => onChange([ r, g, b ])}
        />
        <Slider
          style={styles.slider}
          value={g}
          step={step}
          onValueChange={g => onChange([ r, g, b ])}
        />
        <Slider
          style={styles.slider}
          value={b}
          step={step}
          onValueChange={b => onChange([ r, g, b ])}
        />
      </View>
    );
  }
}