JSPM

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

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.