Skip to content

Instantly share code, notes, and snippets.

@finom
Last active April 22, 2020 20:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save finom/aa997260bfc108862b3c053f0b9bc5af to your computer and use it in GitHub Desktop.
Save finom/aa997260bfc108862b3c053f0b9bc5af to your computer and use it in GitHub Desktop.
Nice looking iOS-like linear gradients preset for react native based on https://www.behance.net/gallery/62158409/Gradients-Color-Style
/*
Usage:
<NiceGradient index={9} style={StyleSheet.absoluteFill} />
Where index is an index from gradients array (0...14) based on https://www.behance.net/gallery/62158409/Gradients-Color-Style
*/
import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
export const gradients = [
['#FF6CAB', '#7366FF'],
['#B65EBA', '#2E8DE1'],
['#64E8DE', '#8A64EB'],
['#7BF2E9', '#B65EBA'],
['#FF9482', '#7D77FF'],
['#FFCF1B', '#FF881B'],
['#FFA62E', '#EA4D2C'],
['#00FFED', '#00B8BA'],
['#6EE2F5', '#6454F0'],
['#3499FF', '#3A3985'],
['#FF9897', '#F630A0'],
['#FFCDA5', '#EE4D5F'],
['#FF5B94', '#8441A4'],
['#F869D5', '#5650DE'],
['#F00B51', '#730062'],
];
const NiceGradient = ({ index, ...props }) => (
<LinearGradient
colors={gradients[index]}
start={[0, 0]}
end={[1, 1]}
{...props}
/>
);
export default NiceGradient;
@finom
Copy link
Author

finom commented Apr 22, 2020

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment