https://github.com/wrathchaos/react-native-custom-text

https://github.com/wrathchaos/react-native-custom-text

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-custom-text
• Owner: WrathChaos
• License: mit
• Created: 2019-05-12T17:51:53.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2025-03-24T09:20:15.000Z (6 months ago)
• Last Synced: 2025-03-24T10:28:19.946Z (6 months ago)
• Language: TypeScript
• Homepage: https://www.freakycoder.com
• Size: 6.11 MB
• Stars: 14
• Watchers: 2
• Forks: 4
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


[![Custom Text with cool heading & font family interaction for React Native](https://img.shields.io/badge/-Custom%20Text%20with%20cool%20heading%20%26%20font%20family%20interaction%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-boilerplate)

[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-custom-text.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-custom-text)

[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-custom-text.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-custom-text)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)



  



## Installation

Add the dependency:

```ruby

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

```

## Peer Dependencies

Zero Dependency

## Basic Usage

```jsx

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

  Hello Heading 1

;

```

## Advanced Usage

```jsx

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

  Heading 3 Bold Right Sided Custom 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

```jsx

import React from "react";

import Text, { IRNTextProps } from "@freakycoder/react-native-custom-text";

interface ITextWrapperProps extends IRNTextProps {

  color?: string;

  fontFamily?: string;

  children?: React.ReactNode;

}

const TextWrapper: React.FC = ({

  fontFamily = "Helvetica",

  color = "#fff",

  children,

  ...rest

}) => {

  return (

    

      {children}

    

  );

};

export default TextWrapper;

```

### Usage of it

Here is the example of how to use it, also you can check the example folder.

```jsx

// Important! Path will be change depends on your project structure tree

import Text from "../../shared/components/text/TextWrapper";

  Example Text for TextWrapper

;

```

## 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.

### Roadmap

- [x] ~~LICENSE~~

- [x] ~~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.