Skip to content

Instantly share code, notes, and snippets.

@suprith-s-reddy
Last active Jun 27, 2021
Embed
What would you like to do?
Text Atom Component
import Text from './Text';
export default Text;
import * as React from 'react';
import { Text as BaseText, TextProps as BaseTextProps } from 'react-native';
// import useThemeColors from '@src/custom-hooks/useThemeColors';
interface TextProps extends BaseTextProps {
children?: React.ReactNode;
isPrimary?: boolean;
isSecondary?: boolean;
isBold?: boolean;
isHeadingTitle?: boolean;
isCenter?: boolean;
isWhite?: boolean;
hasMargin?: boolean;
}
const Text: React.FC<TextProps> = ({
children,
isPrimary,
isSecondary,
isWhite,
isBold,
isHeadingTitle,
isCenter,
hasMargin,
style,
...rest
}) => {
// const { primary, secondary, text } = useThemeColors();
const primary = '#FC6A57';
const secondary = '#9b9b9b';
const text = '#333333';
let color = text;
let fontSize = 14;
let marginTop = 0;
let textAlign: 'auto' | 'center' | 'left' | 'right' | 'justify' | undefined;
if (isSecondary) {
color = secondary;
fontSize = 13;
}
if (isHeadingTitle) {
fontSize = 20;
}
if (isPrimary) {
color = primary;
}
if (isWhite) {
color = 'white';
}
if (isCenter) {
textAlign = 'center';
}
if (hasMargin) {
marginTop = 10;
}
const fontWeight = isBold ? 'bold' : 'normal';
return (
<BaseText
{...rest}
style={[
{
color,
fontWeight,
fontSize,
textAlign,
marginTop,
},
style,
]}
>
{children}
</BaseText>
);
};
export default Text;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment