react-native: Get error, invariant violation: View config not found of RNSVGCircle

Question

Ok so basically Im importing many libraries to a project all at once, and trying them out one by one. Right now Im trying to make SVG work (Google Sign In and Gesture Handler work accordingly), but after running this code:

**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  StatusBar,
  Text,
} from 'react-native';

import Svg, { Circle } from 'react-native-svg';

import {
  TapGestureHandler,
  LongPressGestureHandler,
  State
} from 'react-native-gesture-handler'

import OneSignal from 'react-native-onesignal'

import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-community/google-signin';
//aa

import RNlocalize from 'react-native-localize'

import YouTube from 'react-native-youtube';

//import Share from 'react-native-share';

const App: () => React$Node = () => {

  const [text, setText] = useState('Yass')

  const _handleStateChange = ({ nativeEvent }) => {
    if (nativeEvent.state === State.ACTIVE) {
      setText('Long Press')
    }
    if (nativeEvent.state === State.END) {
      setText('Back to Yass')
    }
  }

  return (
    <View>
      <View style={{ padding: 80 }}>
        <GoogleSigninButton //a
          style={{ width: 192, height: 48 }}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Dark}
        />
        <Text>HOLAaApessssnesdsdA</Text>
        <LongPressGestureHandler onHandlerStateChange={_handleStateChange}>
          <Text style={styles.buttonText}>Longpress me</Text>
        </LongPressGestureHandler>
        <Text>{text}</Text>
      </View>
      <View>
        <Svg height="100" width="100">
          <Circle cx="50" cy="50" r="50" fill="pink" />
        </Svg>
      </View>
    </View>

  );//a
};

const styles = StyleSheet.create({

  buttonText: {
    borderWidth: 1,
  }
});

export default App;

The following error jumps

ExceptionsManager.js:44 Invariant Violation: requireNativeComponent: "RNSVGCircle" was not found in the UIManager.

This error is located at:
    in RNSVGCircle (at Circle.tsx:24)
    in Circle (at App.js:71)
    in RNSVGGroup (at G.tsx:28)
    in G (at Svg.tsx:170)
    in RNSVGSvgView (at Svg.tsx:157)
    in Svg (at App.js:70)
    in RCTView (at App.js:69)
    in RCTView (at App.js:56)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

Tried readding the library to the project, reinstalling and even manually adding the RNSVG podspec to my podfile. Im out of ideas right now.

ps: Im new on React Native and could be just a big dumb mistake on my part, so bear with me and thanks in advance

Answer 1

Try linking React Native SVG manually.

1. Add the following to 'android/settings.gradle'.

include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

2. Add the following inside the dependencies block of 'android/app/build.gradle'.

implementation project(':react-native-svg')

3. Inside 'android/app/src/main/java/com/<your_app_name>/MainApplication.java '.

• Add import com.horcrux.svg.SvgPackage; to the imports at the top of the file.
• In the getPackages() method, add packages.add(new SvgPackage());. below List<ReactPackage> packages = new PackageList(this).getPackages(); or new SvgPackage().

4. Then rebuild the app using npx react-native run-android.

If you encounter the error.

Native module RNSVGSvgViewManager tried to override SvgViewModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. The error may also be present if the package is present only once in getPackages() but is automatically added later during build time by autolinking. Try removing the existing entry and rebuild.

Undo the third step.

Answer 2

it looks like this is a link error. If you're on ios run from your terminal :

cd ios && pod install

If you're on android (with a RN version < 0.60) :

react-native link react-native-svg

You might need, depend on your RN version and on the one of react-native-svg library, to read more carefully the installation instructions.