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:
;
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