React-native-text-with NPM

react-native-text-with

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

To get started install via npm:

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

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>

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.