How to Solve Name Conflict While Importing Two Modules with Same Name in React Native

The name conflict may occur in react native when you import components from react native as well as from any other third-party libraries with the same name. Just have a look at the code snippet given below:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Svg,{ Circle,Text } from 'react-native-svg';

As you notice, we have imported two Text components, one from react native and the other from react native svg. This causes name conflict and one of those two components would not work. So to make use of two components, you have to change the code as follows:

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

Yes, I imported the Text component from react native svg as SvgText so that you will not face the name conflict. You can use the text component of react native svg as SvgText in the file.

I hope this short react native tutorial is helpful for you.