https://github.com/qeepsake/react-native-text-with

Extension of <Text/> component to allow easy placement of object, image or icon beside text in React Native
https://github.com/qeepsake/react-native-text-with

extension icons image react-native text

Last synced: 12 months ago
JSON representation

Extension of <Text/> component to allow easy placement of object, image or icon beside text in React Native

• Host: GitHub
• URL: https://github.com/qeepsake/react-native-text-with
• Owner: Qeepsake
• License: mit
• Created: 2018-03-24T15:49:45.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-04-24T23:59:07.000Z (about 3 years ago)
• Last Synced: 2025-06-12T07:52:48.327Z (about 1 year ago)
• Topics: extension, icons, image, react-native, text
• Language: JavaScript
• Size: 13.9 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-text-with

[![npm](https://img.shields.io/npm/v/react-native-text-with.svg?style=flat-square)](https://www.npmjs.com/package/react-native-text-with)

[![npm licence](http://img.shields.io/npm/l/react-native-text-with.svg?style=flat-square)](https://npmjs.org/package/react-native-text-with)

[![npm downloads](http://img.shields.io/npm/dt/react-native-text-with.svg?style=flat-square)](https://npmjs.org/package/react-native-text-with)

Extension of the `` component to allow easy placement of an object, image or icon beside text in React Native

![To the left](https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-text-with/one.png)

![To the right](https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-text-with/two.png)

![At the top](https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-text-with/three.png)

![At the bottom](https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-text-with/four.png)

![No object](https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-text-with/five.png)

## Install

To get started install via npm:

```sh

 npm install react-native-text-with --save

```

## Usage

To use in React Native. Import:

```js

 import TextWith from 'react-native-text-with';

```

Then add it to your code:

```js

}

  objectPosition='left'

  objectMargin={5}>

  This is some text with an image to the left

```

Works as a normal react  component. All probs available from ``.

```js

  This is some text

```

Works well with [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). But it's not a dependency! nor a necessity.

```js

}

  objectPosition='left'

  objectMargin={20}>

  This is some text

```

## Props

**Note:** The component can take all props available to ``

| Prop            | Type          | Optional  | Default              | Description                                                                             |

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

| children        | Any           | Yes       |                      | Pass anything into text `` I am text! ``                           |

| object          | object        | Yes       |                      | Image, Icon or component of your choice to be rendered beside text                      |

| objectPosition  | enum          | Yes       | 'left'               | Where the component should be rendered ('left', 'right', 'top', 'bottom')               |

| objectMargin    | number        | Yes       | 4                    | Direction of the collage: 'row' or 'column'.                                            |

| textStyle       | object        | Yes       |                      | Style to be applied to the text component                                               |

| containerStyle  | object        | Yes       | alignItems: 'center' | Style to be applied to the container component. Text and Icon.                          |

## Contributing

If you want to issue a PR, go ahead ;)

## Authors

* [**Luke Brandon Farrell**](https://lukebrandonfarrell.com/) - *Author*

## License

This project is licensed under the MIT License