start gradient from center - LinearGradient in react native

Question

I'm in need of applying a box shadow to one of my buttons in my react native application but box shadow property is not supported in android. So i'm trying to create a shadow view from LinearGradient and place the button at center of that view. Something like this

<LinearGradient
      colors={['transparent', backgroundColor]}
      start={{ x: 0.5, y: 0.5 }}
      end={{ x: 1, y: 1 }}
      style={{
        width: '100%',
        padding: 5,
        height: 60,
        justifyContent: 'center',
        alignItems: 'flex-start',
        marginTop: 0,
        borderRadius: 2,
        backgroundColor: 'transparent',
        zIndex: 2,
        bottom: 0,
      }}>
      <Pressable
        onPress={onPress}
        disabled={disabled}
        style={({ pressed }) => [
          {
            borderWidth: state === 'primary_link' ? 0 : pressed ? 4 : borderWidth,
          },
          styles.background,
        ]}>
        <ButtonTitle />
      </Pressable>
    </LinearGradient>

I tried changing the start and end values but could not get it to start from the center. Is there a way to do this using LinearGradient? I'm trying to get something like this

Answer 1

As the name implies, LinearGradient is for linear gradients only. What you described is a radial gradient. See this issue: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/29

You may have box shadows as described here: Creating a UI with box shadow in react native

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}