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

Multi tool use
Multi tool use












10















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



transparent gradient



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










share|improve this question























  • 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


















10















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



transparent gradient



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










share|improve this question























  • 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
















10












10








10


1






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



transparent gradient



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










share|improve this question














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



transparent gradient



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







android ios react-native






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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 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



















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














3 Answers
3






active

oldest

votes


















0














Just set opacity: 0.5 for styles.linearGradient






share|improve this answer































    0














    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%'
    }





    share|improve this answer































      0














      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:



      Android



      iOS:



      iOS






      share|improve this answer























        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
        });


        }
        });














        draft saved

        draft discarded


















        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









        0














        Just set opacity: 0.5 for styles.linearGradient






        share|improve this answer




























          0














          Just set opacity: 0.5 for styles.linearGradient






          share|improve this answer


























            0












            0








            0







            Just set opacity: 0.5 for styles.linearGradient






            share|improve this answer













            Just set opacity: 0.5 for styles.linearGradient







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Oct 16 '16 at 9:16









            Ramin MousaviRamin Mousavi

            2161416




            2161416

























                0














                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%'
                }





                share|improve this answer




























                  0














                  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%'
                  }





                  share|improve this answer


























                    0












                    0








                    0







                    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%'
                    }





                    share|improve this answer













                    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%'
                    }






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Oct 2 '18 at 4:33









                    Rajan LagahRajan Lagah

                    722413




                    722413























                        0














                        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:



                        Android



                        iOS:



                        iOS






                        share|improve this answer




























                          0














                          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:



                          Android



                          iOS:



                          iOS






                          share|improve this answer


























                            0












                            0








                            0







                            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:



                            Android



                            iOS:



                            iOS






                            share|improve this answer













                            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:



                            Android



                            iOS:



                            iOS







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Dec 31 '18 at 18:47









                            iyegoroffiyegoroff

                            8415




                            8415






























                                draft saved

                                draft discarded




















































                                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.




                                draft saved


                                draft discarded














                                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





















































                                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
                                83HJf3pkrIc6kiD,5oSpmBvTaY,GbngEt J ImoXkDLA6XkBnEuQ8jZ3Y

                                Popular posts from this blog

                                Monofisismo

                                Angular Downloading a file using contenturl with Basic Authentication

                                Olmecas