surajitsarkar19 / react-native-radial-gradient Goto Github PK

It would be great if we can use this library in typescript based projects.

After a recent upgrade from RN0.64 to RN0.73

clang: error: no such file or directory: '/path-to-app/node_modules/react-native-radial-gradient/ios/build/Debug-iphoneos/libSRSRadialGradient.a'
Command Ld failed with a nonzero exit code

React Native: v0.73.2
xCode: 14.2

Tried these, with no success

• changing path to /path-to-app/ios/build/Debug-iphoneos/SRSRadialGradient/libSRSRadialGradient.a (which exists during build)
• Reinstalling the package
• podfile contains pod 'SRSRadialGradient', :path => '../node_modules/react-native-radial-gradient/ios'
• Added to build phases -> Link binary with libraries

Invariant Violation: requireNativeComponent: "SRSRadialGradient" was not found in the UIManager

"react": "^18.0.0",
"react-native": "^0.69.3",
"react-native-radial-gradient": "^1.1.2",

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-radial-gradient/android/build.gradle b/node_modules/react-native-radial-gradient/android/build.gradle
index 6a3fde8..81f6e66 100644
--- a/node_modules/react-native-radial-gradient/android/build.gradle
+++ b/node_modules/react-native-radial-gradient/android/build.gradle
@@ -9,7 +9,6 @@ buildscript {
     if (project == rootProject) {
         repositories {
             google()
-            jcenter()
             mavenCentral()
         }
 
@@ -40,10 +39,9 @@ allprojects {
     repositories {
         google()
         mavenCentral()
-        jcenter()
     }
 }
 
 dependencies {
-    compile 'com.facebook.react:react-native:+'
+    implementation 'com.facebook.react:react-native:+'
 }

This issue body was partially generated by patch-package.

[!] No podspec found for SRSRadialGradient in ../node_modules/react-native-radial-gradient/ios

Encountered an error on latest RN version 0.68.1

A problem occurred evaluating project ':react-native-radial-gradient'.

Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Environment:

"react": "17.0.2",
"react-native": "0.68.1",
"Platform": "Android only"

I'm trying to interpolate between a regular color and a transparent one in order to have 2 radial gradients that interact with each other. Unfortunately it seems transparent gets ignored and interpreted as black. Transparent hex values also don't work.

      <RadialGradient
        style={{ width: 200, height: 200 }}
        colors={['#00ffff', 'transparent']}
        stops={[0.3]}
        center={[100, 100]}
        radius={200}
      />

results in

Whereas the black pixels should be transparent.

Hi! Thanks for this project!

I`m trying to get it set on a new React Native project on iOS, carefully going through your instructions.

But got this and have no idea how to fix it:
Invariant Violation: Native component for "SRSRadialGradient" does not exist

This error is located at:
in SRSRadialGradient (at index.js:28)
in RCTView (at View.js:71)
in View (at index.js:27)
in RadialGradient (at App.js:21)
in App (at renderApplication.js:35)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)

getViewConfig
requireNativeComponent.js:112:6
get$1
ReactNativeRenderer-dev.js:11859:17
createInstance
ReactNativeRenderer-dev.js:12022:27
completeWork
ReactNativeRenderer-dev.js:8814:14
completeUnitOfWork
ReactNativeRenderer-dev.js:10418:8
performUnitOfWork
ReactNativeRenderer-dev.js:10523:32
workLoop
ReactNativeRenderer-dev.js:10584:43
_invokeGuardedCallback
ReactNativeRenderer-dev.js:134:15
invokeGuardedCallback
ReactNativeRenderer-dev.js:67:32
renderRoot
ReactNativeRenderer-dev.js:10677:30
performWorkOnRoot
ReactNativeRenderer-dev.js:11449:34
performWork
ReactNativeRenderer-dev.js:11364:8
requestWork
ReactNativeRenderer-dev.js:11258:18
scheduleWorkImpl
ReactNativeRenderer-dev.js:11099:22
scheduleRootUpdate
ReactNativeRenderer-dev.js:11690:17
render
ReactNativeRenderer-dev.js:12919:35
renderApplication
renderApplication.js:58:21
runApplication
AppRegistry.js:196:26
__callFunction
MessageQueue.js:353:47

MessageQueue.js:118:26
__guardSafe
MessageQueue.js:316:6
callFunctionReturnFlushedQueue
MessageQueue.js:117:17

I tried to fix this using https://stackoverflow.com/questions/47672941/invariant-violation-native-component-for-rnsvgsvgview-does-not-exist but this didn`t help.
Maybe you have some ideas?

It would be much more convenient if the center and radius props also accepted relative arguments such as percentage values contained in strings. As can be done with a component's width and height.

e.g.

<RadialGradient
          ...
          center={['25%', '50%']}
          radius={'10%'}>

I've installed package using npm install react-native-radial-gradient --save and tried to linking with react-native link react-native-radial-gradient. Below I've mentioned the error.

rnpm-install ERR! Something went wrong while linking. Error: Expected "/* Begin ", "/*", """, "}", or [A-Za-z0-9_.] but "<" found.
Please file an issue here: https://github.com/facebook/react-native/issues

Expected "/* Begin ", "/*", """, "}", or [A-Za-z0-9_.] but "<" found.

SyntaxError: Expected "/* Begin ", "/*", """, "}", or [A-Za-z0-9_.] but "<" found.
at peg$buildStructuredError (<project_dir>\lms-mobile-app\node_modules\xcode\lib\parser\pbxproj.js:412:12)
at Object.peg$parse [as parse] (<project_dir>\lms-mobile-app\node_modules\xcode\lib\parser\pbxproj.js:1886:11)
at pbxProject.parseSync (<project_dir>\lms-mobile-app\node_modules\xcode\lib\pbxProject.js:46:24)
at isInstalled (<project_dir>\lms-mobile-app\node_modules\react-native\local-cli\link\ios\isInstalled.js:19:60)
at Object.isInstalled (<project_dir>\lms-mobile-app\node_modules\react-native\local-cli\link\ios\common\isInstalled.js:8:5)
at Object.keys.forEach.platform (<project_dir>\lms-mobile-app\node_modules\react-native\local-cli\link\link.js:57:36)
at Array.forEach ()
at linkDependency (<project_dir>\lms-mobile-app\node_modules\react-native\local-cli\link\link.js:44:32)

--
I'm using following versions
react-native-cli: 1.2.0
react-native: 0.57.1

I have tried to play with Reanimated 2, but unable to make it work.

The gradient and radius stay the same.

It works on React native SVG for the radius while updating it, but did get how to figure out how to draw a gradient.

Thx for your help.

When i try to install cocoapods i get this

[!] There are multiple dependencies with different sources for `SRSRadialGradient` in `Podfile`:

- SRSRadialGradient (from `../node_modules/react-native-radial-gradient/ios`)
- SRSRadialGradient (from `../node_modules/react-native-radial-gradient`)

android/app/src/main/java/com/dating/MainApplication.java:33: error: cannot find symbol
packages.add(new RNRadialGradientPackage());
^
symbol: class RNRadialGradientPackage

android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:121: error: cannot find symbol
new RNRadialGradientPackage(),
^
symbol: class RNRadialGradientPackage
location: class PackageList

android/app/src/main/java/com/dating/MainApplication.java:16: error: package com.surajit.rnrg does not exist
import com.surajit.rnrg.RNRadialGradientPackage;

android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:47: error: package com.surajit.rnrg does not exist
import com.surajit.rnrg.RNRadialGradientPackage;

The package won't work even if linked manually

With jCenter being sunset and currently having issues, I currently can't build my application due to some references in the project's gradle config.

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':ostrichapp_react-native-radial-gradient:compileReleaseJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':ostrichapp_react-native-radial-gradient:releaseCompileClasspath'.
   > Could not resolve com.facebook.react:react-native:+.
     Required by:
         project :ostrichapp_react-native-radial-gradient
      > Failed to list versions for com.facebook.react:react-native.
         > Unable to load Maven meta-data from https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml.
            > Could not HEAD 'https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml'.
               > Read timed out

Incident status: https://status.gradle.com/incidents/9740r6bzx438

From what I've read elsewhere this is fixable by updating the gradle config on your side, possibly even by bumping version with no real changes.

Hi,

I am trying to install this package to my react native, but I am getting the following error:
requireNativeComponent: "SRSRadialGradient" was not found in the UIManager.

After installing in the library, I executed pod install int the ios directory but it did not add SRSRadialGradient as a dependency. I believe there is an issue with autolinking?

Here is an example repro. If you try to install and then run pod install you'll see that it doesnt add package to the podfile and you'll get the error specified above when trying to use the component

I have 2 RadialGradients (both absolutely positioned), with .absoluteFill set, so they both fill the entire screen and overlap one another. Each one has a child TouchableOpacity, but the problem is that only the second one is pressable. The first is obstructed by the 2nd, thereby preventing touches from registering. If I use Views instead of RadialGradients, I can pass the prop 'pointerEvents="box-none"', to indicate that the parent view should allow touches to pass through to any element under them. However, this does not work when using RadialGradient. Here's a simple example of the scenario.

export default class RadialGradientIssue extends React.Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <RadialGradient
                    colors={['#FF000055', '#00000000']}
                    stops={[0, 1]}
                    center={[100, 100]}
                    radius={130}
                    style={StyleSheet.absoluteFill}
                    pointerEvents={'box-none'}>
                    <TouchableOpacity
                        style={{
                            width: 50,
                            height: 50,
                            marginTop: 40,
                            backgroundColor: 'blue',
                        }}
                        onPress={() => alert('Pressed blue!')}
                    />
                </RadialGradient>
                <RadialGradient
                    colors={['#00FF0055', '#00000000']}
                    stops={[0, 1]}
                    center={[300, 300]}
                    radius={180}
                    style={StyleSheet.absoluteFill}
                    pointerEvents={'box-none'}>
                    <TouchableOpacity
                        style={{
                            marginTop: 40,
                            width: 50,
                            height: 50,
                            backgroundColor: 'green',
                            alignSelf: 'flex-end',
                        }}
                        onPress={() => alert('Pressed green!')}
                    />
                </RadialGradient>
            </View>
        );
    }
}

Looking at the index.js source for RadialGradient, I found that the NativeRadialGradient element does not accept any props from the parent component. When I add 'pointerEvents="box-none"' directly to NativeRadialGradient (see below), everything works as expected.

<View ref={(component) => { this.gradientRef = component; }} {...otherProps} style={style}>
                <NativeRadialGradient
                    pointerEvents={"box-none"} // adding this line fixes the issue
                    style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
                    colors={(colors)?colors.map(processColor):null}
                    center={center}
                    radius={radius}
                    stops={stops}
                />
                { children }
</View>

Would it be possible to expose a 'nativeProps' prop to the application, so that we can handle scenarios like this? The library might look like this afterward.

<View ref={(component) => { this.gradientRef = component; }} {...otherProps} style={style}>
                <NativeRadialGradient
                    {...this.props.nativeProps} // a possible solution
                    style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
                    colors={(colors)?colors.map(processColor):null}
                    center={center}
                    radius={radius}
                    stops={stops}
                />
                { children }
</View>

Thank you!

When I set center to center={[viewWidth/2, -200]} radial gradient is drown in the middle of my view.

Removing checks from GradientView::populateDefaultCenterValue and GradientView::drawGradient methods fixed the problem.
I'm sure removing checks in iOS classes will work too.
Please fix

Hello,
I really like the library but simply borderRadius prop not working :(
I've tried to fix it but could not find the solution. Can you please take a look at it?

On iOS, if you pass center as [0, 0] and dynamically update it to other value, it won't be updated. As on native side, it is recognised as CGPoint (not NSArray) thus React will not trigger setter for this property if it is not x,y;

compile project(':react-native-radial-gradient')
compile method is no long supported in new gradle versions
If i force change it to implementation the library seems to work

I want a 🍕.

Tried to wrap the <RadialGradient/> with a <View style={{height: radius/2, width/2}}/>, but the gradient will draw outside it anyway.

Is it possible?