@freakycoder/react-native-custom-text

Custom Text with cool heading & font family interaction for React Native.

Installation

Add the dependency:

npm i @freakycoder/react-native-custom-text

Peer Dependencies

Zero Dependency

Basic Usage

import Text from "@freakycoder/react-native-custom-text";

<Text h1 fontFamily="AvenirNext">
  Hello Heading 1
</Text>;

Advanced Usage

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>;

Custom Advanced Usage (Wrapper)

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;

Usage of it

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>;

Configuration - Props

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.

ToDos

• LICENSE
• Typescript
• Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Custom Text Library is available under the MIT license. See the LICENSE file for more info.