Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
hex percentage - cta with fading
/* eslint-disable react/no-array-index-key */
import React, {ReactNode} from 'react';
import {SafeAreaView, View} from 'react-native';
import {withTheme} from '../../Elements';
import {baseTheme, darkTheme, PuraMenteTheme} from '../../../styles/base';
import {makeStyles} from '../../Utils/MakeStylesHoc';
interface CTAWithFadingProps {
theme: PuraMenteTheme;
children: () => void;
bgColorDarkTheme?: string;
bgColorLightTheme?: string;
}
const CTAWithFading: React.FC<CTAWithFadingProps> = ({
theme,
children,
bgColorDarkTheme,
bgColorLightTheme,
}: CTAWithFadingProps) => {
const styles = useStyles();
return (
<SafeAreaView>
<View style={styles.fadingContainer}>
{Array.from({length: 100}).map((e, i) => {
const preHexNumber = (i * 255) / 100;
const hexNumber = preHexNumber.toString(16).split('.')[0].padStart(2, '0').replace('f0', 'ff');
return (
<View
key={i}
style={{
height: 1,
backgroundColor: `${theme.name === 'dark' ? bgColorDarkTheme : bgColorLightTheme}${hexNumber}`,
}}
/>
);
})}
</View>
<View style={styles.childrenContainer}>{children() as ReactNode}</View>
</SafeAreaView>
);
};
CTAWithFading.defaultProps = {
bgColorDarkTheme: darkTheme.background,
bgColorLightTheme: baseTheme.background,
};
const useStyles = makeStyles((theme: PuraMenteTheme) => ({
fadingContainer: {
position: 'absolute',
marginTop: -100,
right: 0,
left: 0,
},
childrenContainer: {
backgroundColor: theme.background,
},
}));
export default withTheme(CTAWithFading);
@sturmenta
Copy link
Author

sturmenta commented Jul 26, 2021

Screen Shot 2021-07-26 at 02 21 58

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