Add the dependency:
npm i @freakycoder/react-native-custom-text
Zero Dependency
import Text from "@freakycoder/react-native-custom-text";
<Text h1 fontFamily="AvenirNext">
Hello Heading 1
</Text>;
import Text from "@freakycoder/react-native-custom-text";
<Text h3 bold right color="#913400" numberOfLines={1} style={{ margin: 16 }}>
Heading 3 Bold Right Sided Custom Text
</Text>;
If you’are going to use Custom Text rather than Text component on your WHOLE project. I suggest that write a TextWrapper functional component and you can set and use it like original Text component
import React from "react";
import Text from "@freakycoder/react-native-custom-text";
interface ITextWrapperProps {
color?: string;
fontFamily?: string;
children?: React.ReactNode;
}
const TextWrapper: React.FC<ITextWrapperProps> = ({
fontFamily = "Helvetica",
color = "#fff",
children,
...rest
}) => {
return (
<Text fontFamily={fontFamily} color={color} {...rest}>
{children}
</Text>
);
};
export default TextWrapper;
Here is the example of how to use it, also you can check the example folder.
// Important! Path will be change depends on your project structure tree
import Text from "../../shared/components/text/TextWrapper";
<Text h1 color="#513843" numberOfLines={2} fontFamily="Grotesk">
Example Text for TextWrapper
</Text>;
Property | Type | Default | Description |
---|---|---|---|
h1 | boolean | false | heading 1 prop |
h2 | boolean | false | heading 2 prop |
h3 | boolean | false | heading 3 prop |
h4 | boolean | false | heading 4 prop |
h5 | boolean | false | heading 5 prop |
h6 | boolean | false | heading 7 prop |
left | boolean | false | make the text left sided |
center | boolean | false | make the text centered |
right | boolean | false | make the text right sided |
bold | boolean | false | make the text style bold (Compatible with Font Family) |
color | color | “#fff” | change the text’s color |
fontFamily | FontFamily | default | set your own FontFamily directly to the Text component as a prop |
Any Text props are available like ‘numberOfLines’ or any other. There is no restriction.
FreakyCoder, kurayogun@gmail.com
Author: WrathChaos
Demo: https://freakycoder.com/
Source Code: https://github.com/WrathChaos/react-native-custom-text
#react-native #react #mobile-apps