react-native-text-with

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

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

• Luke Brandon Farrell - Author

License

This project is licensed under the MIT License