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 same name. Just have a look at the 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 other from react native svg. This cause 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 name conflict. You can use the text component of react native svg as SvgText in the file.

1 thought on “How to Solve Name Conflict While Importing Two Modules with Same Name in React Native”

  1. I have similar components that I need to import like this, but when I try, it tells me “Identifier ‘AWSS3Image’ has already been declared.

    Here is the code:

    `
    import AWSS3Image from ‘components/partials/AWSS3AnnouncementImage’;
    import AWSS3Image as ProfileImage from ‘components/partials/AWSS3Image’;
    `

Leave a Reply

%d bloggers like this: