I am trying to adjust the styling of a linear gradient I made. I have attached a picture of it. I want to make the white middle section bigger so when there are the 3 sections of red white red, then are all evenly sized. Whenever I try to adjust the "y" values in "start" and "end" all it does is change shade of my component and not the actual gradient itself.

import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
const ZoneRideCard = ({zoneCardColor}) => {
  return (
    <LinearGradient
      colors={[zoneCardColor, '#FFFFFF', zoneCardColor ]}
      start={{ x: 0, y: -.1 }}
      end={{ x: 0, y: 1.1}}
      style={styles.container}
    >
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 0,
    height: 140,
    width: 405,
    borderRadius: 10,
    alignItems: 'center',
    margin: 0,
    marginLeft: 25,
    marginTop: -45,
    marginBottom: 70,
  },
  
});

export default ZoneRideCard;

FOLLOW UP Hi, thank you so much for your response. Seems the locations property is def what I was looking for but still have some issues if you dont mind. I put the suggestions you mentioned but it is still dont coming out the way I was hoping. This is the code:

<LinearGradient 
    colors={[zoneCardColor, '#FFFFFF', zoneCardColor ]} 
    start={{ x: 0.5, y: 0 }} 
    end={{ x: 0.5, y: 1}} 
    locations={[0.33, 0.66, 0.99]} 
    style={styles.container} 
>

How it is coming out:

locations={[0.05, 0.5, 0.99]}

I was able to draw up in AI how I would want it to kind of look with a bigger white space in the middle, for some reason, copilot can't figure it out either. I keep trying to mess with these values but I can't seem to get that larger white section I want, but this is kind of how it should look:

I am trying to adjust the styling of a linear gradient I made. I have attached a picture of it. I want to make the white middle section bigger so when there are the 3 sections of red white red, then are all evenly sized. Whenever I try to adjust the "y" values in "start" and "end" all it does is change shade of my component and not the actual gradient itself.

import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
const ZoneRideCard = ({zoneCardColor}) => {
  return (
    <LinearGradient
      colors={[zoneCardColor, '#FFFFFF', zoneCardColor ]}
      start={{ x: 0, y: -.1 }}
      end={{ x: 0, y: 1.1}}
      style={styles.container}
    >
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 0,
    height: 140,
    width: 405,
    borderRadius: 10,
    alignItems: 'center',
    margin: 0,
    marginLeft: 25,
    marginTop: -45,
    marginBottom: 70,
  },
  
});

export default ZoneRideCard;

FOLLOW UP Hi, thank you so much for your response. Seems the locations property is def what I was looking for but still have some issues if you dont mind. I put the suggestions you mentioned but it is still dont coming out the way I was hoping. This is the code:

<LinearGradient 
    colors={[zoneCardColor, '#FFFFFF', zoneCardColor ]} 
    start={{ x: 0.5, y: 0 }} 
    end={{ x: 0.5, y: 1}} 
    locations={[0.33, 0.66, 0.99]} 
    style={styles.container} 
>

How it is coming out:

locations={[0.05, 0.5, 0.99]}

I was able to draw up in AI how I would want it to kind of look with a bigger white space in the middle, for some reason, copilot can't figure it out either. I keep trying to mess with these values but I can't seem to get that larger white section I want, but this is kind of how it should look:

• javascript
• ios
• react-native
• expo

Share Improve this question Follow edited Mar 2 at 21:56 pilchard 13k55 gold badges1212 silver badges2626 bronze badges asked Mar 2 at 15:18 nrfnrf 5911 silver badge66 bronze badges 1

• If your question was answered satisfactorily by one of the answers flag it as 'accepted'. If you no longer want the question up, then delete it, don't edit the question to have no content. – pilchard Commented Mar 2 at 21:58

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

To make the white space bigger and make all the colors evenly sized you can use following techniques:

1. Changing start and end values (distributed evenly)

start and end values must be in a range from 0 to 1, because they represent percentages of the starting point and the ending point of the gradient. For example, start={{ x: 0.1, y: 0.2 }} means that

• the gradient will start 10% from the left and
• 20% from the top

and end={{ x: 0.1, y: 0.2 }} means that

• the gradient will end 10% from the left and
• 20% from the bottom.

In your case:

Changing the start parameter to start={{ x: 0.5, y: 0 }} and end parameter to end={{ x: 0.5, y: 1}} should resolve the issue.

Explanation:

• start parameter set to start={{ x: 0.5, y: 0 }} means that the gradient should start 50% from the left and 0% from the top,
• end parameter set to end={{ x: 0.5, y: 1}} means that the gradient should end 50% from the left and 100% from the top.

This way we get a perfect vertical gradient.

---

To better understand how start and end parameters work we have the graph bellow.

2. Using locations parameter to specify a color-stop location

locations parameter is

A readonly array that contains numbers ranging from 0 to 1, inclusive, and is the same length as the colors property. Each number indicates a color-stop location where each respective color should be located. If not specified, the colors will be distributed evenly across the gradient.

we can read from the LinearGradient expo documentation.

Examples:

1. locations={[0.5, 0.8]} would render:

• the first color, solid, from the beginning of the gradient view to 50% through (the middle);
• a gradient from the first color to the second from the 50% point to the 80% point; and
• the second color, solid, from the 80% point to the end of the gradient view.

2. locations={[0.4, 0.7]}

• the first color, solid, from the beginning of the gradient view to 40% through;
• a gradient from the first color to the second from the 40% point to the 70% point; and
• the second color, solid, from the 70% point to the end of the gradient view.

3. locations={[0.2, 0.6, 0.9]}

• the first color covers 0 to 20%. It's gradient stops at 20%. Note that it starts with a sharper color at the beginning.
• the second color gradient covers 20- 60%; it stops at 60%
• the third color covers 60- 90%; it's gradient stops at 90%, leaving the sharper color at the end.

In your case:

Setting the locations parameter to locations={[0.33, 0.66, 0.99]} should resolve the issue.

Explanation:

locations parameter set to locations={[0.33, 0.66, 0.99]} means that your red color will cover first 33% (1/3) of the gradient, then white will cover next 33% (from 33% to 66%) of the gradient and another red will cover another 33% from (66% to 99%).

Edit:

I recreated your code and the closest I could get was this:

I used this code:

<View style={styles.container}>
      <LinearGradient
        colors={['#E57373', '#FFFFFF', '#FFFFFF', '#E57373']}
        locations={[0, 0.3, 0.7, 1]}
        start={{ x: 0.5, y: 0 }}
        end={{ x: 0.5, y: 1 }}
        style={styles.gradient}
      />                                          
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  gradient: {
    width: 300,
    height: 100,
    borderRadius: 20,
  },
});

For LinearGradient, start and end control where, within the parent, the gradient is applied to:

From the docs:

For example, end = { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.

What you want to adjust is the locations prop:

For example, [0.5, 0.8] would render:

• the first color, solid, from the beginning of the gradient view to 50% through (the middle);
• a gradient from the first color to the second from the 50% point to the 80% point; and
• the second color, solid, from the 80% point to the end of the gradient view.