react-native-linear-gradient: Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

Bug

After adding lib to a fresh react-native@0.59.10 project, I got this error. For some reason, I can not upgrade react-native to 0.60 or above.

error detail


Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.
This error is located at:
in BVLinearGradient (at react-native-linear-gradient/index.android.js:85)
in RCTView (at View.js:45)
in View (at react-native-linear-gradient/index.android.js:84)
in LinearGradient (at Test/index.js:14)
in RCTView (at View.js:45)
in View (at Test/index.js:13)
in Test (at SceneView.js:17)
in SceneView (at CardStack.js:455)
in RCTView (at View.js:45)
in View (at CardStack.js:454)
in RCTView (at View.js:45)
in View (at CardStack.js:453)
in RCTView (at View.js:45)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.js:12)
in Card (at PointerEventsContainer.js:39)
in Container (at CardStack.js:498)
in RCTView (at View.js:45)
in View (at CardStack.js:414)
in RCTView (at View.js:45)
in View (at CardStack.js:413)
in CardStack (at CardStackTransitioner.js:67)
in RCTView (at View.js:45)
in View (at Transitioner.js:142)
in Transitioner (at CardStackTransitioner.js:19)
in CardStackTransitioner (at StackNavigator.js:41)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at community/index.js:72)
in RCTView (at View.js:45)
in View (at LayoutView.js:78)
in LayoutView (at community/index.js:71)
in Community (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
getNativeComponentAttributes
getNativeComponentAttributes.js:29:4
get
ReactNativeViewConfigRegistry.js:104:25
createInstance
ReactNativeRenderer-dev.js:3988:53
completeWork
ReactNativeRenderer-dev.js:14437:12
completeUnitOfWork
ReactNativeRenderer-dev.js:17094:10
performUnitOfWork
ReactNativeRenderer-dev.js:17304:30
workLoop
ReactNativeRenderer-dev.js:17316:41
renderRoot
ReactNativeRenderer-dev.js:17417:15
performWorkOnRoot
ReactNativeRenderer-dev.js:18423:17
performWork
ReactNativeRenderer-dev.js:18324:24
performSyncWork
ReactNativeRenderer-dev.js:18285:14
requestWork
ReactNativeRenderer-dev.js:18169:19
scheduleWork
ReactNativeRenderer-dev.js:17969:16
scheduleRootUpdate
ReactNativeRenderer-dev.js:18642:15
render
ReactNativeRenderer-dev.js:19512:20
renderApplication
renderApplication.js:61:34
run
AppState.js:51:4
runApplication
AppState.js:121:18
__callFunction
MessageQueue.js:366:47
<unknown>
MessageQueue.js:106:26
__guard
MessageQueue.js:314:10
callFunctionReturnFlushedQueue
MessageQueue.js:105:17
callFunctionReturnFlushedQueue
[native code]

Environment info

React native info output:

  React Native Environment Info:
    System:
      OS: macOS 10.15
      CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
      Memory: 28.99 MB / 16.00 GB
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
      Yarn: 1.19.1 - ~/.nvm/versions/node/v12.13.0/bin/yarn
      npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
      Android SDK:
        API Levels: 28, 29
        Build Tools: 28.0.3, 29.0.2
        System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
      Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.10 => 0.59.10

Library version: 2.5.6

Steps To Reproduce

react-native init simpleRN5910 --version 0.59.10
cd simpleRN5910
yarn add react-native-linear-gradient
react-native link react-native-linear-gradient
yarn start
I got this error even if I didn’t change any code

Describe what you expected to happen:

working without error

Reproducible sample code

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 10
Comments: 19 (1 by maintainers)

Most upvoted comments

You should to try reinstalling the apk, after you had made a clean in to build folder

cd android && ./gradlew cleanBuildCache then react-native run-android

+43

njacob1001 on Oct 31, 2019

After installation yarn add react-native-linear-gradient, install pods: cd ios pod install

+21

bearwmceo on Nov 2, 2019

I can’t make this work so I use react-native-svg, if anyone is intereset, this is my solution:

import React from "react";
import { StyleSheet, View } from "react-native";
import { Svg, Defs, LinearGradient, Stop, Rect } from "react-native-svg";

export const GradientMask = () => (
  <View style={StyleSheet.absoluteFillObject}>
    <Svg height="100%" width="100%">
      <Defs>
        <LinearGradient id="grad" x1="50%" y1="0%" x2="100%" y2="100%">
          <Stop offset="0%" stopColor="transparent" stopOpacity="0" />
          <Stop offset="100%" stopColor="black" stopOpacity=".2" />
        </LinearGradient>
      </Defs>

      <Rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
    </Svg>
  </View>
);

neiker on Nov 10, 2020

Got this to work using expo-linear-gradient - https://docs.expo.io/versions/latest/sdk/linear-gradient/

thedarkcder on Nov 27, 2019

Same problem with RN 0.61.4 Obs: In our case of versions> 60 we do not need the link command

gustavogialim on Nov 21, 2019

@neiker - Thanks for your solution, It’s worked.

lovelope on Nov 27, 2019

You should to try reinstalling the apk, after you had made a clean in to build folder

cd android && ./gradlew cleanBuildCache then react-native run-android

It’s working in the new project, but it doesn’t work in an existing project. I need to check the configuration of the existing project.

lovelope on Nov 3, 2019