Question 419788 in React native Question posted in
The official React Native documentation can be found here.

React native – React-native elements like <Text> are not rendering inside the <Svg> component on expo web

I have a react-native app built using Expo. I am using react-native-svg to render Svg drawings/shapes. React-native elements like <Text> are not rendering inside the <Svg> component on Expo web. It works fine on other platforms like Android and iOS but not on web.

Here’s my code-

import { Text } from 'react-native'; 
import { Svg } from 'react-native-svg';

const App = () => {
  return (
    <Svg>
        <Text>React Native Text</Text>
    </Svg>
  );
}

export default App;

When I run the above code on Android or iOS, it correctly prints "React Native Text" but renders blank screen on web.

Tags:

2

Answers


  1. 0

    You should be importing Text from react-native-svg. That is the correct component to use inside an Svg component.

    Unless you specifically want to use the standard Text component from React Native. It is likely that this specific combination is not supported on web. The web version of RN is less mature than mobile versions.

    You can use styling to overlay one component on another, if needed.

    Login or Signup to reply.
  2. 0

    Importing Text from react-native-svg: You import Text as SvgText from react-native-svg rather than using the Text component from react-native.
    Making Use of SvgText To position and style the text, swap out the component for and supply the required attributes, such as x, y, fill, fontSize, and fontWeight.

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

const App = () => {
  return (
    <Svg height="100" width="100">
      <SvgText
        x="10"
        y="20"
        fill="black"
        fontSize="16"
        fontWeight="bold"
      >
        React Native Text
      </SvgText>
    </Svg>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search