surajitsarkar19 / react-native-radial-gradient Goto Github PK
View Code? Open in Web Editor NEWRadial gradient library for react native
License: MIT License
Radial gradient library for react native
License: MIT License
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!
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?
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
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`)
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}
/>
Whereas the black pixels should be transparent.
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;
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.
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.
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",
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"
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?
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
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%'}>
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
[!] No podspec found for SRSRadialGradient
in ../node_modules/react-native-radial-gradient/ios
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
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
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?
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
pod 'SRSRadialGradient', :path => '../node_modules/react-native-radial-gradient/ios'
It would be great if we can use this library in typescript based projects.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.