@freakycoder/react-native-custom-text

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

!Platform - Android and iOS
!expo-compatible

Installation

Add the dependency:

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

Peer Dependencies

Zero Dependency

Basic Usage

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


Hello Heading 1
;
`

Advanced Usage

`js
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 from "@freakycoder/react-native-custom-text";

interface ITextWrapperProps {
color?: string;
fontFamily?: string;
children?: React.ReactNode;
}

const TextWrapper: React.FC = ({
fontFamily = "Helvetica",
color = "#fff",
children,
...rest
}) => {
return (

{children}

);
};

export default TextWrapper;
`

$3

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

`js
// 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.

$3

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