https://github.com/charmy/react-native-stroke-text

React Native Stroke/Outline Text
https://github.com/charmy/react-native-stroke-text

outline outline-text react-native react-native-stroke-text stroke stroke-text text

Last synced: 2 days ago
JSON representation

React Native Stroke/Outline Text

• Host: GitHub
• URL: https://github.com/charmy/react-native-stroke-text
• Owner: charmy
• License: mit
• Created: 2024-01-21T23:12:41.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-06-10T12:18:48.000Z (5 months ago)
• Last Synced: 2024-08-09T23:49:06.238Z (3 months ago)
• Topics: outline, outline-text, react-native, react-native-stroke-text, stroke, stroke-text, text
• Language: Java
• Homepage:
• Size: 2.06 MB
• Stars: 33
• Watchers: 2
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Stroke/Outline Text

[![npm version](https://badge.fury.io/js/@charmy.tech%2Freact-native-stroke-text.svg)](https://badge.fury.io/js/@charmy.tech%2Freact-native-stroke-text)

Allows you to add stylish text with stroke effects to your mobile applications. It is perfect for creating visually

appealing text elements with outline effects.



  



## Installation

```bash

npm install @charmy.tech/react-native-stroke-text

# or

yarn add @charmy.tech/react-native-stroke-text

```

## Android

min ```compileSdkVersion``` is required to be ```34```

## iOS

Go to your ios folder and run:

```

pod install

```

## Usage

Here's a quick example to get you started with StrokeText:

```jsx

import React from "react";

import { StrokeText } from "@charmy.tech/react-native-stroke-text";

import { View } from "react-native";

export default function Screen() {

  return (

    

      

    

  );

}

```

### Props

The following table outlines the props available for the `StrokeText` component:

| Prop            | Type    | Description                                                     |

|-----------------|---------|-----------------------------------------------------------------|

| `text`          | string  | The text content you want to display.                           |

| `fontSize`      | number  | Size of the text font, defining how large the text will be.     |

| `color`         | string  | Color of the text, can use any valid color format.              |

| `strokeColor`   | string  | Color of the stroke (outline) around the text.                  |

| `strokeWidth`   | number  | Width of the stroke, determining the thickness of the outline.  |

| `fontFamily`    | string  | Font family for the text, should match available project fonts. |

| `align`         | string  | Text alignment (default: `center`)                              |

| `numberOfLines` | number  | Number of lines (default: `0`)                                  |

| `ellipsis`      | boolean | Ellipsis (...) (default: `false`)                               |

| `width`         | number  | Text width to enable ellipsis (default: `undefined`)            |

## Ellipsis

```jsx

```



  



## Custom Font

### Bare React Native

Create a `react-native.config.js` file in the root directory

```javascript

module.exports = {

  project: {

    ios: {},

    android: {},

  },

  assets: ['/assets/fonts'], // or './src/assets/fonts'

};

```

### Expo ([expo-font](https://docs.expo.dev/versions/latest/sdk/font/))

```tsx

import { useFonts } from "expo-font";

import { Dosis_400Regular } from "@expo-google-fonts/dosis";

const [fontsLoaded, fontError] = useFonts({

  Danfo: require("./src/assets/fonts/Danfo-Regular.ttf"),

  "Dosis-Regular": Dosis_400Regular,

});

```

## Contributing

We welcome contributions to improve this component. Feel free to submit issues and enhancement requests.

## License

Please refer to the project's license for usage rights and limitations.