How to integrate react-native-linear-gradient in Expo app

user_12575508 0
Viewed 145

I am new to React Native and I am facing a big challenge with the usage of gradients.

My goal is to create a component library, that is going to be reused in other React Native applications and some of my components are styled with gradients. For instance, the primary Button component has gradient background.

Some famous solutions are react-native-linear-gradient and Expo Linear Gradient, but the problem is that neither of them seems like a generic solution for a component library:

  • If I use react-native-linear-gradient, it does not run in Expo projects (the documentation for my components is based on Expo). It breaks with Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.. I need to say that I researched about this issue and nothing worked - I even ejected the Expo configuration, installed pods, etc. but the issue persists.
  • If I use the Expo Linear Gradient module, it requires the full Expo environment.

Is it generally possible to create such library of components with gradient styles that run seamlessly on various React Native environments?

I use webpack for building my library, if this can give more detail to the question.

linear-gradients expo react-native webpack gradient
1 Answers

The solution I found for this issue was to make my Button receive the platform specific gradient component as prop. The styling approach for both above-mentioned libraries is the same, so this worked great for my case:

{/* LinearGradient is either Expo gradient or react-native-linear-gradient  */}
<Button GradientComponent={LinearGradient}> 
 ...
</Button>
user_125755080
Related