hex percentage - cta with fading

CTAWithFading.tsx

/* 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);