React-native-linear-gradient: Left to Right Gradient?

[bradbyte]

I've been playing with the combination of location, start, and end props but can't figure out how to implement a left to right gradient. Any thoughts?

Thanks!

[nickhudkins]

start is x then y (as a value 0 - 1) end is same so:

<LinearGradient colors={['#514A9D', '#24C6DC']} start={[0.0, 0.5]} end={[1.0, 0.5]} locations={[0.0, 1.0]} style={styles.container}>

will do the trick!

[bradbyte]

Ok, I think I understand it now. Thanks for the fast reply!

On Wednesday, December 9, 2015, Nick Hudkins [email protected]
wrote:

start is x,y http://proportional end is same so:

start={[0.0, 0.5]}
end={[1.0, 0.5]}
locations={[0.0, 1.0]}
style={styles.container}>

will do the trick!

[image: screen shot 2015-12-09 at 1 19 09 pm]
https://cloud.githubusercontent.com/assets/299126/11694335/81f5674c-9e77-11e5-8af8-251272482e45.png

—
Reply to this email directly or view it on GitHub
https://github.com/brentvatne/react-native-linear-gradient/issues/45#issuecomment-163347742
.

-Brad
Sent from my iPhone

[nickhudkins]

Woops! Looks like my explanation got butchered a little bit. Basically 0,0 is top left , 1,1 is bottom right.

:+1:

[gopinathrpt]

when i insert the code Error occur... can you help me pls

This is my code

Program:

start={[0.0, 0.5]}
end={[1.0, 0.5]}
locations={[0.0, 1.0]}
style={styles.container}>
theme={{
backgroundColor: 'transparent',
calendarBackground: 'transparent',
textSectionTitleColor: '#fff',
selectedDayBackgroundColor: 'yellow',
selectedDayTextColor: 'red',
todayTextColor: '#00adf5',
dayTextColor: '#fff',
textDisabledColor: '#d9e1e8',
arrowColor: '#fff',
monthTextColor: '#fff',
textDayFontSize: 12,
textMonthFontSize: 16,
textDayHeaderFontSize: 16,
currentDayCircle: {
backgroundColor: 'blue',
},
}}
hideExtraDays={true}
hideArrows={true}
onDayPress={(day) => {
//console.log('selected day', day)
}}
/>

[sairohithA007]

I faced the same issue. I just changed the start to startPoint and end to endPoint in LinearGradient tag. It worked for me. I think the docs must be updated.