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 --saveUsage
To use in React Native. Import:
;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> 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