Better linear gradients for React Native

gradient.js

// @flow

import React from 'react';
import {StyleSheet, View, Easing} from 'react-native';
import {LinearGradient} from 'expo';
import * as COLORS from './constants/colors';
import color from 'color';

export default class App extends React.Component<{}> {
  render() {
    return (
      <View style={styles.root}>
        <View style={styles.content}>
          <View style={styles.box} />
          <View style={styles.gradients}>
            <LinearGradient colors={[COLORS.background, COLORS.backgroundTransparent]} style={styles.gradient} />
            <LinearGradient colors={gradient(Easing.inOut(Easing.quad))} style={styles.gradient} />
            <LinearGradient colors={gradient(Easing.inOut(Easing.cubic))} style={styles.gradient} />
            <LinearGradient colors={gradient(Easing.inOut(Easing.exp))} style={styles.gradient} />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  content: {
    ...StyleSheet.absoluteFillObject,
    top: 100,
    left: 10,
    right: 10,
  },
  gradients: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: 'row',
  },
  gradient: {
    flex: 1,
    height: 200,
  },
  box: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: 300,
    backgroundColor: 'white',
  }
});

const background = color(COLORS.background);

const gradient = (easing = Easing.linear) => new Array(40).fill(0).map((_, index, array) => {
  const progress = index / (array.length - 1);
  const amount = easing(progress);
  return background.fade(1 - amount).string();
}).reverse();