CODEWITHSUNDEEP
javascriptandroidiosreact-nativenpm
Pulasthi Aberathne
Pulasthi Aberathne

Reputation: 428

Invariant Violation: requireNativeComponent: "BVLinearGradient"

I have been working with the react-native-gradient and I am getting the following error regarding the package.

Error

Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

This error is located at:
    in BVLinearGradient (at react-native-linear-gradient/index.ios.js:54)
    in LinearGradient (at SignupLogin.js:46)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at TouchableOpacity.js:224)
   .........    
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Usage

...
import * as Animatable from "react-native-animatable";
import LinearGradient from "react-native-linear-gradient";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import { useTheme } from "@react-navigation/native";


const SignupLogin = ({ navigation }) => {
  const { colors } = useTheme();
  return (
    <View style={styles.container}>
      .....
        <View style={styles.button}>
          <TouchableOpacity onPress={() => navigation.navigate("sign-in")}>
            <LinearGradient
              colors={["#0831d4", "#0131ab"]}
              style={styles.signIn}
            >
              <Text style={styles.textSign}>Get started</Text>
              <MaterialIcons name="navigate-next" color="#fff" size={20} />
            </LinearGradient>
         .....
    </View>
  );
};


export default SignupLogin;

It is simple navigation between footer sign-in and sign-up menus and the App.js and the rest of the files are in the standard method of coding.

Upvotes: 2

Views: 3853

Answers (2)

Salwa A. Soliman
Salwa A. Soliman

Reputation: 746

if you're using windows & react-native cli (not expo):

1- in android/settings.gradle, check if

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

exist .. if not, add them

2- in android/app/build.gradle, check if

implementation project(':react-native-linear-gradient')

exists in dependecies{ ... } .. if not, add it

3- in android/app/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java , find

@Override protected List getPackages() { ....}

Then replace the comment // packages.add(new MyReactNativePackage());

with => packages.add(new LinearGradientPackage());

It worked for me .. Hope it works for you as well

Upvotes: 3

Ahmed Gaber
Ahmed Gaber

Reputation: 3986

confirm you install react-native-linear-gradient

yarn add react-native-linear-gradient

in ios confirm ios/podfile has this line

pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

then run pod install in ios folder

Upvotes: 1

Related Questions