My React-Native Drawing app, but without any interactivity

brightnessSlider.js

import React, {Component} from 'react';
import {View, Text, Dimensions} from 'react-native';
import styles from './styles.js';
import LinearGradient from 'react-native-linear-gradient';
import utils from './utils.js';
const d = Dimensions.get('window'),
	width = d.width,
	height = d.height;

export default class BrightnessSlider extends Component {
	static defaultProps = {
		onPress: () => null
	};

	constructor(...args) {
		super(...args);

		this.state = { value: 75 };
	}

	move = e => {
		this.setState(prevState => {value: e.locationX});
	};

	getLeft() {
		return utils.map(this.state.value, 0, 100, 0, width - 43);
	}

	render() {
		return (
			<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={["#222", "#ddd"]} style={styles.brightnessSliderRunnable}>
				<View
					onStartShouldSetResponder={e => true}
					onResponderMove={this.move}

					style={styles.brightnessSliderTrack}>
					<View>
						<View style={{...styles.brightnessSliderThumb, left: this.getLeft()}} />
					</View>

					<Text>{this.state.value}</Text>
				</View>
			</LinearGradient>
		)
	}
}

index.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {View, Dimensions, Text} from 'react-native';

import {ColorWheel as ColourPicker} from "react-native-color-wheel";
import BrightnessSlider from './brightnessSlider.js';
import styles from './styles.js';
import FontAwesome, {Icons} from 'react-native-fontawesome';

const d = Dimensions.get('window'),
	width = d.width,
	height = d.height;

export default class App extends Component {
	constructor(...args) {
		super(...args);

		this.darkness = 0;

		this.prevColours = ["#ff0000", "#00ff00", "#0000ff"];
	}

	render() {
		return (
			<View style={styles.container}>
				<View style={{...styles.colourContainer, opacity: 100 - this.darkness}}>
					<View style={styles.toolBar}>
						<View style={styles.colourPalette}>
							{this.prevColours.map((i, a) => <View key={String(a)} style={{...styles.colourTile, backgroundColor: i}}/>)}
						</View>
						{/*<Button title={"Save To Palette"} onTap={this.saveToPalette}>Save</Button>*/}
					</View>
					<View>
						<ColourPicker style={styles.colour}/>
					</View>
					<BrightnessSlider />

				</View>
			</View>
		);
	}
}

styles.js

import {
	Dimensions,
	StyleSheet
} from "react-native";

const d = Dimensions.get('window'),
	width = d.width,
	height = d.height,
	smallest = Math.min(width, height);

const backgroundColor = '#F5FCFF',
	darkBG = '#B1C8BB';

export default styles = StyleSheet.create({
	container: {
		backgroundColor,
		flexDirection: 'row',
		flex: 1
	},
	canvasContainer: {
		position: "absolute"
	},
	canvas: {
		width,
		height
	},
	colourContainer: {
		width,
		height,
		flexDirection: "column",
		backgroundColor
		// position: "absolute"
	},
	colour: {
		width: smallest,
		height: smallest,
		elevation: 10,
		position: "absolute",
		top: 60
	},
	colourTile: {
		position: "relative",
		width: 30,
		height: 30,
		borderWidth: 2,
		borderColor: '#EEEEEE',
		elevation: 3,
		shadowColor: 'rgb(46, 48, 58)',
		shadowOffset: {
			width: 0,
			height: 2
		},
		shadowOpacity: 0.8,
		shadowRadius: 2,
		borderRadius: 9,
		marginHorizontal: 2
	},
	colourPalette: {
		width,
		height: 36,
		position: "absolute",
		flex: 1,
		flexDirection: 'row',
		padding: 3,
		backgroundColor: "#F5FCFF",
	},
	brightnessSliderContainer: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'red',
	},
	brightnessSliderRunnable: {
		top: 50,
		height: 9,
		width: width - 20,
		left: 10,
		backgroundColor: "#555",
		opacity: 1,
		elevation: 1,
		borderWidth: 0,
		shadowColor: backgroundColor
		// position: "absolute"

	},
	brightnessSliderThumb: {
		width: 23,
		height: 23,
		borderColor: "#888",
		// opacity: 1,
		borderWidth: 2,
		backgroundColor,
		// position: "absolute",
		top: -7,
		borderRadius: 5,
		elevation: 2,
		shadowColor: 'rgb(46, 48, 58)',
		shadowOffset: {
			width: 0,
			height: 2
		},
		shadowOpacity: 0.8,
		shadowRadius: 2
	},
	brightnessSliderTrack: {
		width: "100%",
		elevation: 1,
		borderWidth: 0,
		shadowColor: backgroundColor
	},
	toolBar: {
		width
	}
});