LinearGradient useAngle angle - my porblem or SDK problem?

[DJArty]

Vega SDK 0.22.6021 [LATEST] [INSTALLED] [DEFAULT]
4K Select stick s/w OS 1.1 (1401010009120)
Used just helloworld teplate. Background replaced by diagonal (45) contrast gradient LinearGradient :

import React, {useState} from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import LinearGradient from '@amazon-devices/react-linear-gradient';
import {Link} from './components/Link';

const images = {
  vega: require('./assets/vega.png'),
  learn: require('./assets/learn.png'),
  support: require('./assets/support.png'),
  build: require('./assets/build.png'),
};

export const App = () => {
  const [image, setImage] = useState(images.vega);

  const styles = getStyles();

  return (
    <LinearGradient
      colors={['red', 'blue']} // 
      useAngle={true}          // 
      angle={45}               // angle 45
      style={styles.background}>
      <View style={styles.container}>
        <View style={styles.links}>
          <View style={styles.headerContainer}>
            <Text style={styles.headerText}>Hello World!</Text>
            <Text style={styles.subHeaderText}>
              Select one of the options below to start your Vega journey 🚀
            </Text>
          </View>
          <Link
            linkText={'Learn'}
            onPress={() => {
              setImage(images.learn);
            }}
            testID="sampleLink"
          />
          <Link
            linkText={'Build'}
            onPress={() => {
              setImage(images.build);
            }}
          />
          <Link
            linkText={'Support'}
            onPress={() => {
              setImage(images.support);
            }}
          />
        </View>
        <View style={styles.image}>
          <Image source={image} />
        </View>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.text}>
          💡 Edit App.tsx to change this screen and then come back to see your
          edits
        </Text>
      </View>
    </LinearGradient>
  );
};

const getStyles = () =>
  StyleSheet.create({
    background: {
      flex: 1,
      flexDirection: 'column',
    },
    container: {
      flex: 6,
      flexDirection: 'row',
      alignItems: 'center',
    },
    headerContainer: {
      marginLeft: 200,
    },
    headerText: {
      color: 'white',
      fontSize: 80,
      marginBottom: 10,
    },
    subHeaderText: {
      color: 'white',
      fontSize: 40,
    },
    links: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-around',
      height: 600,
    },
    image: {
      flex: 1,
      paddingLeft: 150,
    },
    textContainer: {
      justifyContent: 'center',
      flex: 1,
      marginLeft: 190,
    },
    text: {
      color: 'white',
      fontSize: 40,
    },
  });

Result is bad - vertical gradient, ignore angle={45}

Info from react-linear-gradient | Vega Libraries

So, problem in my code or in SDK realisation?

[amen]

Hi @DJArty,

Thank you for reporting this issue with the LinearGradient useAngle and angle props.

I was able to reproduce the issue as mentioned the angle-based gradient calculation is not working as documented.

Workaround: Until this is fixed, please use the start and end props instead:

<LinearGradient
  colors={['red', 'blue']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
  style={styles.background}>

This will create the diagonal gradient you’re looking for. Our team is looking into it and will provide an update as soon as we have more information.

Thanks for helping us improve the Vega platform.

Warm regards,
Aishwarya

[Ivy_Mahajan]

Hello @DJArty

You can try using angleCenter to adjust the gradient correctly.

This is how this can be done:

 <LinearGradient
      colors={['red', 'blue']}
      useAngle={true}
      angle={45}
      angleCenter={{x: 0.5, y: 0.5}}
      style={styles.background}>
      <SearchBar
        placeholder="Search..."
        onChangeText={setSearchQuery}
        onSubmit={handleSearch}
        testID="searchBar"
      /> 

Result:

Warm regards,
Ivy