Text and Svg Text

How to / Third Party Tooling
1

react-native-svg has its own Text component. But how can I use an ordinary Text component on the same screen?

import Svg, { Polygon, Circle, Defs, G, Path, Rect, Text, TextPath } from 'react-native-svg';
import { StyleSheet, View, Platform, ActivityIndicator } from 'react-native';

Best,
Andy

2

Hi

One way would be:

import Svg, { Polygon, Text as SvgText, TextPath } from 'react-native-svg';
import { Text } from 'react-native';

[...]
<Text>react-native Text</Text>
<Svg>
  <SvgText>react-native-svg Text</SvgText>
</Svg>
[...]
3

Thanks a lot @wodin !!!

1 Like
4

We were actually just struggling with an issue related to this. SVG text (web and native) has really limited options (basically none) for expanding a parent to fit text, and react-native-svg specifically doesn’t support foreignobject (the ability to embed non-SVG in SVG), so react native’s Text becomes just about the only practical way to show a variable-sized box with text in conjunction with SVG markup. The easiest way we’ve found so far is with an absolute-positioned component with the react native markup over the SVG markup, with both in a View with a specific height and width (because SVG will demand that), e.g.,

<View style={{ height: 100, width: 100 }} >
  <Svg height={100} width={100}</Svg>
  <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }} >
     <Text>...</Text>
  </View>
</View>
1 Like
5

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.