Gradient doesn´t render on iOS

[kevinpiske]

Bug

The code below works on Android but doesn't render the gradient on iOS.

React native info output:

System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 1.57 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

react-native-text-gradient version: 0.1.7

Code to reproduce:

<LinearTextGradient
  style={{ fontWeight: 'bold', fontSize: 72 }}
  locations={[0, 1]}
  colors={['red', 'blue']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
>
  <Text>THIS IS TEXT GRADIENT</Text>
</LinearTextGradient>

Images from my App

iOS

Android

[iyegoroff]

Please see the updated status

[kevinpiske]

@iyegoroff Thanks for information.

[huygo93123]

Oh I found best solution, it can run both ios and android very well !
First install @react-native-community/masked-view then using react-native-linear-gradient
Detail
`
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-community/masked-view';

const GradientText = props => (
<MaskedView maskElement={<Text {...props} />}>
<LinearGradient colors={['pink', 'red']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
<Text {...props} style={[props.style, { opacity: 0 }]} />

);
...
<GradientText style={{ fontSize: 30, fontWeight: 'bold' }}>NgôQuýThu
`
May be you don't need this lib , sorry @iyegoroff

[Mactub07]

@huygo93123, you make my day )))) thanks for solution

[jwoodmansey]

@huygo93123 This works perfectly, thanks for this.

I wrapped it up in Typescript and exposed the gradient props:

import React from 'react';
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-community/masked-view';
import { StyleSheet, Text, TextProps } from 'react-native';
import { LinearGradientProps } from 'react-native-linear-gradient';

const GradientText: React.FC<TextProps & { gradient: LinearGradientProps }> = (props) => {
  return (
    <MaskedView maskElement={<Text {...props} />}>
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        {...props.gradient}
        style={StyleSheet.absoluteFill}
      />
      <Text {...props} style={[props.style, styles.mask]} />
    </MaskedView>
  );
};

const styles = StyleSheet.create({
  mask: {
    opacity: 0,
  },
});

export default GradientText;

[bibek-magar]

@jwoodmansey Thank you sir 🙇🏼

[MedElba]

Oh I found best solution, it can run both ios and android very well !
First install @react-native-community/masked-view then using react-native-linear-gradient
Detail
`
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-community/masked-view';

const GradientText = props => (
<MaskedView maskElement={<Text {...props} />}>
<LinearGradient colors={['pink', 'red']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
<Text {...props} style={[props.style, { opacity: 0 }]} />

);
...
<GradientText style={{ fontSize: 30, fontWeight: 'bold' }}>NgôQuýThu
`
May be you don't need this lib , sorry @iyegoroff

Oh I found best solution, it can run both ios and android very well !
First install @react-native-community/masked-view then using react-native-linear-gradient
Detail
`
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-community/masked-view';

const GradientText = props => (
<MaskedView maskElement={<Text {...props} />}>
<LinearGradient colors={['pink', 'red']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
<Text {...props} style={[props.style, { opacity: 0 }]} />

);
...
<GradientText style={{ fontSize: 30, fontWeight: 'bold' }}>NgôQuýThu
`
May be you don't need this lib , sorry @iyegoroff

Hi @huygo93123 I've found this solution working but also very poor performance on Android!! I have a flatlist with every item having 2 gradient texts and it becomes laggy on even only 20 items!

[MedElba]

@iyegoroff sometimes rntg randomly fails in rendering and gives out grey text instead of gradient!! How this can be??
Thank you!!

[parnekov]

Oh I found best solution, it can run both ios and android very well !
First install @react-native-community/masked-view then using react-native-linear-gradient
Detail
`
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-community/masked-view';

const GradientText = props => (
<MaskedView maskElement={<Text {...props} />}>
<LinearGradient colors={['pink', 'red']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
<Text {...props} style={[props.style, { opacity: 0 }]} />

);
...
<GradientText style={{ fontSize: 30, fontWeight: 'bold' }}>NgôQuýThu
`
May be you don't need this lib , sorry @iyegoroff

Worked! Awesome! Thank you.

[parnekov]

<MaskedView maskElement={<Text {...props} />}>
  <LinearGradient
    colors={['pink', 'red']}
    start={{x: 0, y: 0}}
    end={{x: 1, y: 0}}>
    <Text {...props} style={[props.style, {opacity: 0}]} />
  </LinearGradient>
</MaskedView>