Replacing React-Native StyleSheet with Styled Components. Not sure how to rework this component with dynamic styles

Question

I have a custom text component that takes a variant as a props and applies different stylesheet styles to the <Text> element based on the variant. The problem is that now I'm trying to move to styled components and I can't figure out how to do the exact same thing.

All the ways I can think of seem extremely messy and would make my code bulky ( for example, having 6 styled text options, one for each of the possible styles )

import React, { FunctionComponent } from 'react';
import { StyleSheet, Text, TextProps } from 'react-native';

import colors from '../colors';
import fonts from '../fonts';

type Props = {
    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
} & TextProps;

const HeaderText: FunctionComponent<Props> = ({ variant = 'h1', style, ...rest }) => {
    return <Text style={[styles[variant], style]} {...rest} />;
};

const styles = StyleSheet.create({
    h1: {
        fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
        color: colors.gray900,
        fontWeight: '300',
        fontSize: 36,
        lineHeight: 40,
    },
    h2: {
        fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
        color: colors.gray900,
        fontWeight: '300',
        fontSize: 30,
        lineHeight: 39,
    },
    h3: {
        fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
        color: colors.gray900,
        fontWeight: '300',
        fontSize: 24,
        lineHeight: 34,
    },
    h4: {
        fontFamily: fonts.FAKT_PRO_MEDIUM,
        color: colors.gray800,
        fontWeight: '500',
        fontSize: 16,
        lineHeight: 24,
    },
    h5: {
        fontFamily: fonts.FAKT_PRO_MEDIUM,
        color: colors.gray800,
        fontWeight: '500',
        fontSize: 14,
        lineHeight: 21,
    },
    h6: {
        fontFamily: fonts.FAKT_PRO_MEDIUM,
        color: colors.gray800,
        fontWeight: '500',
        fontSize: 12,
        lineHeight: 16,
    },
});

export default HeaderText;