Linear gradient doesn't behave the same on iOS as it used to.

[obrad97]

Env:
iPhone 16 Pro Max
"react": "19.0.0",
"react-native": "^0.79.0" - also tested on 0.78.2
"react-native-linear-gradient": "^2.8.3"

Issue:
Gradient now seems to be half rendered on ios.

Bellow are screenshots of the issue, showing an example of gradient being used for input borders:

IOS:

Android:

[aunrazaIX]

Facing the same issue

[matiasgalo999]

Same issue too

[genesiscz]

same

[Roma0198]

same

styles for linerGradient
linerGradient: {
padding: 1,
borderRadius: 5,
},

Updated!
It helps me:

<LinearGradient
    end={end}
    start={start}
    locations={locations}
    colors={gradientColor}
    style={styles.linerGradient}
  >
    <View style={styles.wrapper}>{children}</View>
  </LinearGradient>
);

const styles = StyleSheet.create({
  linerGradient: {
    borderRadius: 5,
  }, // delete padding: 1
  wrapper: {
    margin: 1, // add this
    backgroundColor: colors.WHITE,
    borderRadius: commonValues.BORDER_RADIUS_5,
  },
});

[vacoo]

same

styles for linerGradient linerGradient: { padding: 1, borderRadius: 5, },

Updated! It helps me:

<LinearGradient
    end={end}
    start={start}
    locations={locations}
    colors={gradientColor}
    style={styles.linerGradient}
  >
    <View style={styles.wrapper}>{children}</View>
  </LinearGradient>
);

const styles = StyleSheet.create({
  linerGradient: {
    borderRadius: 5,
  }, // delete padding: 1
  wrapper: {
    margin: 1, // add this
    backgroundColor: colors.WHITE,
    borderRadius: commonValues.BORDER_RADIUS_5,
  },
});

works!

[devartwa]

Any update guys? I wouldn't like to refactor every LinearGradient that I'm using in my code.

[Equilibriumty]

Hey guys. I was able to fix the padding/margin issue on iOS (with the help of ChatGPT hehe) in the native code
try applying this patch. Please note that patch is for the 3.0.0-alpha.1 version. It worked wonders for me

react-native-linear-gradient+3.0.0-alpha.1.patch

[genesiscz]

Any update guys? I wouldn't like to refactor every LinearGradient that I'm using in my code.

Want a wrapper component i wrote which you can Just copy paste and Just replace the imports?

[genesiscz]

Any update guys? I wouldn't like to refactor every LinearGradient that I'm using in my code.

import React from "react";
import { DimensionValue, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import LinearGradient, { LinearGradientProps } from "react-native-linear-gradient";

type PaddingLinearGradientProps = LinearGradientProps & {
	style?: StyleProp<ViewStyle> | undefined;
};

/**
 * A LinearGradient wrapper that properly handles padding by applying it to an inner View.
 * This fixes the issue where LinearGradient doesn't respect padding properties.
 * 
 * @see https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/668
 */
export const LinearGradientFixed: React.FC<PaddingLinearGradientProps> = ({ children, style, ...restProps }) => {
	const { nonPaddingStyles, paddingStyles } = extractPaddingStyles(style);

	return (
		<LinearGradient {...restProps} style={nonPaddingStyles}>
			<View style={Object.keys(paddingStyles).length > 0 ? paddingStyles : undefined}>{children}</View>
		</LinearGradient>
	);
};

const extractPaddingStyles = (style?: StyleProp<ViewStyle>) => {
	const flattenedStyle = StyleSheet.flatten(style ?? {}) as ViewStyle;

	// Extract all padding related styles
	const paddingProps: Array<keyof ViewStyle> = [
		"padding",
		"paddingTop",
		"paddingRight",
		"paddingBottom",
		"paddingLeft",
		"paddingVertical",
		"paddingHorizontal",
		"paddingStart",
		"paddingEnd",
	];

	// Initialize paddingStyles as Partial<ViewStyle>
	const paddingStyles: Partial<ViewStyle> = {};
	// Start with a copy for nonPaddingStyles
	const nonPaddingStyles: ViewStyle = { ...flattenedStyle };

	// Extract padding styles
	paddingProps.forEach((paddingKey) => {
		// Check if the property exists and is not null/undefined in the original style
		if (paddingKey in flattenedStyle && flattenedStyle[paddingKey] !== undefined && flattenedStyle[paddingKey] !== null) {
			const value = flattenedStyle[paddingKey] as DimensionValue | undefined;
			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
			// @ts-ignore Let's trust the type
			paddingStyles[paddingKey] = value;
			// Remove from nonPaddingStyles
			delete nonPaddingStyles[paddingKey];
		}
	});

	return { paddingStyles, nonPaddingStyles };
};

[lvothnrv]

Any update guys? I wouldn't like to refactor every LinearGradient that I'm using in my code.

import React from "react";
import { DimensionValue, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import LinearGradient, { LinearGradientProps } from "react-native-linear-gradient";

type PaddingLinearGradientProps = LinearGradientProps & {
style?: StyleProp | undefined;
};

/**

• A LinearGradient wrapper that properly handles padding by applying it to an inner View.
• This fixes the issue where LinearGradient doesn't respect padding properties.
• @see RN 0.75 ios new arch padding issue #668
  */
  export const LinearGradientFixed: React.FC = ({ children, style, ...restProps }) => {
  const { nonPaddingStyles, paddingStyles } = extractPaddingStyles(style);

return (
<LinearGradient {...restProps} style={nonPaddingStyles}>
0 ? paddingStyles : undefined}>{children}

);
};

const extractPaddingStyles = (style?: StyleProp) => {
const flattenedStyle = StyleSheet.flatten(style ?? {}) as ViewStyle;

// Extract all padding related styles
const paddingProps: Array = [
"padding",
"paddingTop",
"paddingRight",
"paddingBottom",
"paddingLeft",
"paddingVertical",
"paddingHorizontal",
"paddingStart",
"paddingEnd",
];

// Initialize paddingStyles as Partial
const paddingStyles: Partial = {};
// Start with a copy for nonPaddingStyles
const nonPaddingStyles: ViewStyle = { ...flattenedStyle };

// Extract padding styles
paddingProps.forEach((paddingKey) => {
// Check if the property exists and is not null/undefined in the original style
if (paddingKey in flattenedStyle && flattenedStyle[paddingKey] !== undefined && flattenedStyle[paddingKey] !== null) {
const value = flattenedStyle[paddingKey] as DimensionValue | undefined;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore Let's trust the type
paddingStyles[paddingKey] = value;
// Remove from nonPaddingStyles
delete nonPaddingStyles[paddingKey];
}
});

return { paddingStyles, nonPaddingStyles };
};

When we add a TouchableOpacity with a Text inside, only the text itself is clickable. The rest of the TouchableOpacity area does not respond to presses, even though we would expect the entire element to be interactive.

[Daniel528]

Thank you for that component @genesiscz. It does the trick if any instance of the gradient component control just padding. In a lot of instances we had style props like flex or justifyContent which wouldn't be passed down. Instead of adjusting that component we went with moving over to the expo component Expo Linear Gradient. It's built similar to this library however there's no support for angle. But we've written a wrapper which translates from an angle prop like this library uses into the start and end prop in the expo gradient component. If anyone goes down that path let me know and I'll share the util function for supporting angle.

[sntg-p]

Hey there, I didn't want to install Expo dependencies in my project and noticed React Native has added a new experimental_backgroundImage prop to the View styles. So, using part of the code from Expo Linear Gradient, I created a LinearGradient component to replace the one from react-native-linear-gradient.

import { useMemo, useState } from 'react';
import { ColorValue, View, ViewProps } from 'react-native';


export type LinearGradientProps = ViewProps & {
  colors: ColorValue[];
  locations?: number[];
  start?: LinearGradientPoint;
  end?: LinearGradientPoint;
  angle?: number;
};

export type NativeLinearGradientPoint = [x: number, y: number];

function calculatePseudoAngle(
  width: number,
  height: number,
  startPoint?: NativeLinearGradientPoint | null,
  endPoint?: NativeLinearGradientPoint | null
) {
  const getControlPoints = (): NativeLinearGradientPoint[] => {
    let correctedStartPoint: NativeLinearGradientPoint = [0, 0];
    if (Array.isArray(startPoint)) {
      correctedStartPoint = [
        startPoint[0] != null ? startPoint[0] : 0.0,
        startPoint[1] != null ? startPoint[1] : 0.0,
      ];
    }
    let correctedEndPoint: NativeLinearGradientPoint = [0.0, 1.0];
    if (Array.isArray(endPoint)) {
      correctedEndPoint = [
        endPoint[0] != null ? endPoint[0] : 0.0,
        endPoint[1] != null ? endPoint[1] : 1.0,
      ];
    }
    return [correctedStartPoint, correctedEndPoint];
  };

  const [start, end] = getControlPoints();
  start[0] *= width;
  end[0] *= width;
  start[1] *= height;
  end[1] *= height;
  const py = end[1] - start[1];
  const px = end[0] - start[0];

  return 90 + (Math.atan2(py, px) * 180) / Math.PI;
}

function calculateGradientColors(
  colors: readonly ColorValue[],
  locations?: readonly number[] | null
): string[] {
  return colors.map((color, index) => {
    if (locations && locations[index]) {
      const location = Math.max(0, Math.min(1, locations[index]));
      return `${String(color)} ${location * 100}%`
    }
    return String(color);
  });
}

function _normalizePoint(
  point?: LinearGradientPoint | null
): NativeLinearGradientPoint | undefined {
  if (!point) {
    return undefined;
  }

  if (Array.isArray(point) && point.length !== 2) {
    console.warn('start and end props for LinearGradient must be of the format [x,y] or {x, y}');
    return undefined;
  }

  return Array.isArray(point) ? point : [point.x, point.y];
}

/**
 * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
 * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging
 * from `0` to `1`, inclusive.
 */
export type LinearGradientPoint =
  | {
      /**
       * A number ranging from `0` to `1`, representing the position of gradient transformation.
       */
      x: number;
      /**
       * A number ranging from `0` to `1`, representing the position of gradient transformation.
       */
      y: number;
    }
  | NativeLinearGradientPoint;

export function getLinearGradientBackgroundImage(options: {
  colors: readonly ColorValue[],
  locations?: readonly number[] | null,
  width: number,
  height: number,
} & (
  | {
      start?: LinearGradientPoint | null,
      end?: LinearGradientPoint | null,
    }
  | { angle: number }
)) {
  const { colors, locations, width = 1, height = 1 } = options;

  const gradientColors = calculateGradientColors(colors, locations);
  const angle = 'angle' in options
    ? options.angle
    : calculatePseudoAngle(width, height, _normalizePoint(options.start), _normalizePoint(options.end));

  return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;
}

export function LinearGradient(props: LinearGradientProps) {
  const {
    colors,
    locations,
    children,
    style,
    onLayout,
    start,
    end,
    angle,
    ...rest
  } = props;

  const [{ height, width }, setLayout] = useState({ height: 1, width: 1 });

  const experimental_backgroundImage = useMemo(
    () => getLinearGradientBackgroundImage({...props, width, height}),
    [colors, locations, width, height, start, end, angle]
  );

  return (
    <View
      style={[
        style,
        { experimental_backgroundImage },
      ]}
      onLayout={(event) => {
        const { width, height } = event.nativeEvent.layout;

        setLayout((oldLayout) => {
          if (width !== oldLayout.width || height !== oldLayout.height) {
            return { height, width };
          }

          return oldLayout;
        });

        onLayout?.(event);
      }}
      {...rest}
    >
      {children}
    </View>
  );
}

Keep in mind that when using the start and end points, the behavior is not going to be the same as in LinearGradient. It is only used to determine the angle of the gradient, not the position. Also, I removed the useAngle prop, as it seemed to me that it was not needed. Hope this component useful to you as it was to me.

[pierroo]

anyone managed to get a patch working for 2.8.3? that would be awesome.

Remaking a custom linear gradient component won't work for me; I am using the disgusting and outdated nativebase library (stuck with it for now) that relies on linear gradient underneath for many of its components, so a patch would be ideal.

EDIT: tried the patch for alpha1 that you shared @Equilibriumty , thank you for that it's a lifesaver!
By any chance, did you get it to also fix the orientation of the gradient that changed from v2.8.3 to v3.0.0?
as per issue: #689

[krisidmisso]

updated to the latest RN 0.79.3 and neither 2.8.3 or 3.alpha.1 dont work correctly on the iOS. Android seems to be ok.

The issue seems to be in the RN framework, because the same LinearGradient version that works ok on the old framework(0.73.8) doesnt look good on iOS on 0.79.3

[dengcqw]

RN0.80 use config below， https://reactnative.dev/docs/the-new-architecture/using-codegen
"codegenConfig": {
"name": "RNLinearGradientSpec",
"type": "components",
"jsSrcsDir": "src",
"ios": {
"components": {
"RNLinearGradient": {
"className": "RNLinearGradient"
}
}
}
}