react-native-text-with

1.1.1 • Public • Published

react-native-text-with

npm npm licence npm downloads

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

To the left To the right At the top At the bottom No object

Install

To get started install via npm:

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

Usage

To use in React Native. Import:

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

Then add it to your code:

<TextWith
  object={<Image source={}/>}
  objectPosition='left'
  objectMargin={5}>
  This is some text with an image to the left
</TextWith>
 

Works as a normal react component. All probs available from <Text/>.

<TextWith numberOfLines={1} onPress={console.log('This is a ordinary text component')}>
  This is some text
</TextWith>

Works well with react-native-vector-icons. But it's not a dependency! nor a necessity.

<TextWith
  object={<Icon name='pencil' size={ 18 }/>}
  objectPosition='left'
  objectMargin={20}>
  This is some text
</TextWith>

Props

Note: The component can take all props available to <Text/>

Prop Type Optional Default Description
children Any Yes Pass anything into text <TextWith> I am text! </TextWith>
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

License

This project is licensed under the MIT License

Package Sidebar

Install

npm i react-native-text-with

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

7.41 kB

Total Files

4

Last publish

Collaborators

  • wahaheha
  • lukebrandonfarrell
  • amogh-jrules
  • chestersim
  • rodriigovieira