CODEWITHSUNDEEP
reactjsreact-nativereact-native-ios
Jun
Jun

Reputation: 3442

Enclose text with Image

I am working with React native and I want to enclose text with Image.

Is there any packages or any props like this effect.(see the screenshotenter image description here)

enter image description here

Upvotes: 2

Views: 81

Answers (1)

Ryan Turnbull
Ryan Turnbull

Reputation: 3944

This should give your desired output

<View style = {{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}})>
    <Image ...>
    <Text style = {{flex: 1}}>Hello</Text>
    <Image ...>
</View>

EDIT: Changed alignItems->jusitfyContent and added flex: 1 to Text component

EDIT: Heres a solution based on your second screenshot. Note the react-native Text component supports subviews.

<View style = {{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}})>
    <Image ...>
    <Text style = {{flex: 1}}>Hello
        <Image ...>
    </Text> 
</View>

You can play around with the CSS props in order to position it how you want but this should work.

Upvotes: 2

Related Questions