How to have a transparent gradient over an Image in React Native iOS?

Multi tool use
I have been dealing with the a gradient rectangle over an Image that has a black and a transparent sides, I have been looking about a gradient object in react native and I didn't found, but there is a react-native module that does this, but the problem is that it does work in android the transparency, but in iOS, it doesn't work, it shows white in place of the transparent side
and than I was looking about a native iOS solution, I did but it's a bit complex, and I can't implement in react native this the snippet
CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
(id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask; <-- // looking for a way to achieve this in react native
this is my react native code
<Image ref={r => this.image = r} style={styles.container} source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} style={styles.linearGradient}>
</LinearGradient>
</Image>
I don't know how to pass LinearGradient
to Image
as a mask

add a comment |
I have been dealing with the a gradient rectangle over an Image that has a black and a transparent sides, I have been looking about a gradient object in react native and I didn't found, but there is a react-native module that does this, but the problem is that it does work in android the transparency, but in iOS, it doesn't work, it shows white in place of the transparent side
and than I was looking about a native iOS solution, I did but it's a bit complex, and I can't implement in react native this the snippet
CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
(id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask; <-- // looking for a way to achieve this in react native
this is my react native code
<Image ref={r => this.image = r} style={styles.container} source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} style={styles.linearGradient}>
</LinearGradient>
</Image>
I don't know how to pass LinearGradient
to Image
as a mask

actually I have came across a work arround to achieve the same results in iOS which, I had to edit the sourceBVLinearGradient.m
I overrided the setter ofsetColors
with aself.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor];
– Iliyass Hamza
Jan 30 '16 at 15:56
add a comment |
I have been dealing with the a gradient rectangle over an Image that has a black and a transparent sides, I have been looking about a gradient object in react native and I didn't found, but there is a react-native module that does this, but the problem is that it does work in android the transparency, but in iOS, it doesn't work, it shows white in place of the transparent side
and than I was looking about a native iOS solution, I did but it's a bit complex, and I can't implement in react native this the snippet
CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
(id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask; <-- // looking for a way to achieve this in react native
this is my react native code
<Image ref={r => this.image = r} style={styles.container} source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} style={styles.linearGradient}>
</LinearGradient>
</Image>
I don't know how to pass LinearGradient
to Image
as a mask

I have been dealing with the a gradient rectangle over an Image that has a black and a transparent sides, I have been looking about a gradient object in react native and I didn't found, but there is a react-native module that does this, but the problem is that it does work in android the transparency, but in iOS, it doesn't work, it shows white in place of the transparent side
and than I was looking about a native iOS solution, I did but it's a bit complex, and I can't implement in react native this the snippet
CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
(id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask; <-- // looking for a way to achieve this in react native
this is my react native code
<Image ref={r => this.image = r} style={styles.container} source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} style={styles.linearGradient}>
</LinearGradient>
</Image>
I don't know how to pass LinearGradient
to Image
as a mask


asked Jan 30 '16 at 2:14
Iliyass HamzaIliyass Hamza
4991825
4991825
actually I have came across a work arround to achieve the same results in iOS which, I had to edit the sourceBVLinearGradient.m
I overrided the setter ofsetColors
with aself.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor];
– Iliyass Hamza
Jan 30 '16 at 15:56
add a comment |
actually I have came across a work arround to achieve the same results in iOS which, I had to edit the sourceBVLinearGradient.m
I overrided the setter ofsetColors
with aself.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor];
– Iliyass Hamza
Jan 30 '16 at 15:56
actually I have came across a work arround to achieve the same results in iOS which, I had to edit the source
BVLinearGradient.m
I overrided the setter of setColors
with a self.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor];
– Iliyass Hamza
Jan 30 '16 at 15:56
actually I have came across a work arround to achieve the same results in iOS which, I had to edit the source
BVLinearGradient.m
I overrided the setter of setColors
with a self.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor];
– Iliyass Hamza
Jan 30 '16 at 15:56
add a comment |
3 Answers
3
active
oldest
votes
Just set opacity: 0.5
for styles.linearGradient
add a comment |
Try positioning LinearGradient absolute
adding style to LinearGradient
<Image ref={r => this.image = r} style={styles.container}
source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors=
{['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
style={styles.linearGradient}>
</LinearGradient>
</Image>
styles.linearGradient = {
...,
position:'absolute',
width:'100%',
height:'100%'
}
add a comment |
You can use my react-native-image-filter-kit library to achieve this:
import { Image } from 'react-native'
import {
SrcOverComposition,
LinearGradient
} from 'react-native-image-filter-kit'
const masked = (
<SrcOverComposition
resizeCanvasTo={'dstImage'}
dstImage={
<Image
style={{ width: 320, height: 320 }}
source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
/>
}
srcResizeMode={{ width: 1, height: 0.5 }}
srcAnchor={{ y: 0 }}
srcImage={
<LinearGradient
start={{ x: 0, y: 0 }}
end={{ x: 0, y: '100h' }}
colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
/>
}
/>
)
Android:
iOS:
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35097220%2fhow-to-have-a-transparent-gradient-over-an-image-in-react-native-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Just set opacity: 0.5
for styles.linearGradient
add a comment |
Just set opacity: 0.5
for styles.linearGradient
add a comment |
Just set opacity: 0.5
for styles.linearGradient
Just set opacity: 0.5
for styles.linearGradient
answered Oct 16 '16 at 9:16
Ramin MousaviRamin Mousavi
2161416
2161416
add a comment |
add a comment |
Try positioning LinearGradient absolute
adding style to LinearGradient
<Image ref={r => this.image = r} style={styles.container}
source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors=
{['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
style={styles.linearGradient}>
</LinearGradient>
</Image>
styles.linearGradient = {
...,
position:'absolute',
width:'100%',
height:'100%'
}
add a comment |
Try positioning LinearGradient absolute
adding style to LinearGradient
<Image ref={r => this.image = r} style={styles.container}
source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors=
{['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
style={styles.linearGradient}>
</LinearGradient>
</Image>
styles.linearGradient = {
...,
position:'absolute',
width:'100%',
height:'100%'
}
add a comment |
Try positioning LinearGradient absolute
adding style to LinearGradient
<Image ref={r => this.image = r} style={styles.container}
source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors=
{['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
style={styles.linearGradient}>
</LinearGradient>
</Image>
styles.linearGradient = {
...,
position:'absolute',
width:'100%',
height:'100%'
}
Try positioning LinearGradient absolute
adding style to LinearGradient
<Image ref={r => this.image = r} style={styles.container}
source={require('../assets/default_profile_picture.jpg')}>
<LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]} colors=
{['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
style={styles.linearGradient}>
</LinearGradient>
</Image>
styles.linearGradient = {
...,
position:'absolute',
width:'100%',
height:'100%'
}
answered Oct 2 '18 at 4:33
Rajan LagahRajan Lagah
722413
722413
add a comment |
add a comment |
You can use my react-native-image-filter-kit library to achieve this:
import { Image } from 'react-native'
import {
SrcOverComposition,
LinearGradient
} from 'react-native-image-filter-kit'
const masked = (
<SrcOverComposition
resizeCanvasTo={'dstImage'}
dstImage={
<Image
style={{ width: 320, height: 320 }}
source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
/>
}
srcResizeMode={{ width: 1, height: 0.5 }}
srcAnchor={{ y: 0 }}
srcImage={
<LinearGradient
start={{ x: 0, y: 0 }}
end={{ x: 0, y: '100h' }}
colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
/>
}
/>
)
Android:
iOS:
add a comment |
You can use my react-native-image-filter-kit library to achieve this:
import { Image } from 'react-native'
import {
SrcOverComposition,
LinearGradient
} from 'react-native-image-filter-kit'
const masked = (
<SrcOverComposition
resizeCanvasTo={'dstImage'}
dstImage={
<Image
style={{ width: 320, height: 320 }}
source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
/>
}
srcResizeMode={{ width: 1, height: 0.5 }}
srcAnchor={{ y: 0 }}
srcImage={
<LinearGradient
start={{ x: 0, y: 0 }}
end={{ x: 0, y: '100h' }}
colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
/>
}
/>
)
Android:
iOS:
add a comment |
You can use my react-native-image-filter-kit library to achieve this:
import { Image } from 'react-native'
import {
SrcOverComposition,
LinearGradient
} from 'react-native-image-filter-kit'
const masked = (
<SrcOverComposition
resizeCanvasTo={'dstImage'}
dstImage={
<Image
style={{ width: 320, height: 320 }}
source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
/>
}
srcResizeMode={{ width: 1, height: 0.5 }}
srcAnchor={{ y: 0 }}
srcImage={
<LinearGradient
start={{ x: 0, y: 0 }}
end={{ x: 0, y: '100h' }}
colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
/>
}
/>
)
Android:
iOS:
You can use my react-native-image-filter-kit library to achieve this:
import { Image } from 'react-native'
import {
SrcOverComposition,
LinearGradient
} from 'react-native-image-filter-kit'
const masked = (
<SrcOverComposition
resizeCanvasTo={'dstImage'}
dstImage={
<Image
style={{ width: 320, height: 320 }}
source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
/>
}
srcResizeMode={{ width: 1, height: 0.5 }}
srcAnchor={{ y: 0 }}
srcImage={
<LinearGradient
start={{ x: 0, y: 0 }}
end={{ x: 0, y: '100h' }}
colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
/>
}
/>
)
Android:
iOS:
answered Dec 31 '18 at 18:47
iyegoroffiyegoroff
8415
8415
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35097220%2fhow-to-have-a-transparent-gradient-over-an-image-in-react-native-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
b9XMPMak Bc5Hc PO5k68u,BuASWI N,fo7G73O4ImaDzaFG,D15YPLcmErYHs6PoQJQb6aGQqbTlN60tX80joH9,kZw7
actually I have came across a work arround to achieve the same results in iOS which, I had to edit the source
BVLinearGradient.m
I overrided the setter ofsetColors
with aself.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor];
– Iliyass Hamza
Jan 30 '16 at 15:56