CODEWITHSUNDEEP
react-native
user1677104
user1677104

Reputation: 347

How to place a component at the end of the line of a text

I want to put a component at the end of a multi-line text. Having the text and the component wrapped in a view and setting its flex-direction to row doesn't help.

Here's what I am trying to accomplish: multiline text with component

Here is the code

<View style={{ flexDirection: 'row' }}
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</Text>
<Component />
</View>

Component Code: 

<View style={{width: width, borderRadius: width/2}}>
<Text>{children}</Text>
</View>

Upvotes: 3

Views: 457

Answers (2)

Дмитрий Коробов
Дмитрий Коробов

Reputation: 11

                    <Text style={{ color: "#757575", lineHeight: 23 }}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                        {" "}
                        <TouchableOpacity onPress={() => {}}>
                            <Image
                                style={{ height: 18, width: 18 }}
                                source={images.documentLoaded}
                            />
                        </TouchableOpacity>
                    </Text>

enter image description here

Upvotes: 1

Tim
Tim

Reputation: 10719

Unfortunately, you cannot put a <View> inside a <Text> Component, but I have a workaround for you which uses react-native-svg. Of course this is just a demo and you probably have to adjust/fine tune it.

You can install react-native-svg with: 

npm install --save react-native-svg

Component Code: 

import Svg, { Circle } from 'react-native-svg'; 
...
const TestComponent = ({ children }) => {
  return (
    <Svg height="35" width="100">
      <Circle cx="15" cy="20" r="15" fill="blue" />
      <Svg.Text x="25" y="25" fill="#000" fontSize="15" textAnchor="middle" fontWeight="bold" > 
        {children}
      </Svg.Text>
      <Svg.Text x="75" y="25" fill="#000" fontSize="15" textAnchor="middle" fontWeight="bold" >
       {children}
      </Svg.Text>
    </Svg>
  );
}

Example:

demo

Working Demo:

https://snack.expo.io/rJZlZBX2V

Edit: This workaround works only on iOS.

Upvotes: 1

Related Questions