Skip to content

Instantly share code, notes, and snippets.

@coolsoftwaretyler
Last active December 29, 2023 21:15
Show Gist options
  • Save coolsoftwaretyler/5b9c4bf15cdbcc4c5b132a4082b0f767 to your computer and use it in GitHub Desktop.
Save coolsoftwaretyler/5b9c4bf15cdbcc4c5b132a4082b0f767 to your computer and use it in GitHub Desktop.
React Native Text Wrapper
import React from 'react';
import {
StyleSheet,
Text as RNText,
TextProps as RNTextProps,
TextStyle,
} from 'react-native';
const styles = StyleSheet.create({
header: {
fontSize: 32,
fontWeight: 'bold',
lineHeight: 40,
textTransform: 'uppercase',
},
subheader: {
fontSize: 24,
fontWeight: '600',
lineHeight: 30,
},
body: {
fontSize: 16,
fontWeight: 'normal',
lineHeight: 24,
},
defaultColor: { color: '#000000' },
});
type PresetNames = 'header' | 'subheader' | 'body';
export interface TextProps extends RNTextProps {
text?: string;
preset?: PresetNames;
color?: string;
}
export function BrandText(props: TextProps) {
const {
text,
preset = 'body',
color = styles.defaultColor.color,
style,
...rest
} = props;
const presetStyle = styles[preset] || styles.body;
const colorStyle = { color };
const combinedStyles = [presetStyle, colorStyle, style];
return (
<RNText {...rest} style={combinedStyles}>
{text}
</RNText>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment