CODEWITHSUNDEEP
androidiosreact-nativeexporeact-native-svg
Abhinandan Kushwaha
Abhinandan Kushwaha

Reputation: 734

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.

Upvotes: 0

Views: 42

Answers (1)

user10504
user10504

Reputation: 139

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.

Upvotes: 0

Related Questions