Instagram linear gradient with Expo

Question

I'm working on a react-native app using Expo.

<Button
  icon={
     <FontAwesome
       name="send"
       size={24}
       color={'white'}
     />
    }
    text={'Send Content'}
    activeOpacity={0.8}
    textStyle={{ fontWeight: '700' }}
    buttonStyle={{ paddingHorizontal: 20, height: 55 }}
    onPress={() => console.log('send')}
    ViewComponent={require('expo').LinearGradient}
    linearGradientProps={{
      colors: ['#f68ba0', '#ec407a'],
      start: [1, 0],
      end: [0.2, 0],
     }}
  />

With Native Elements, you can implement Buttons with Linear Gradient such as above.

I'd like to have the same Linear Gradient as the 'Instagram' logo.

Could you help me to implement that ? Thanks for your time

Answer 1

For me, I was using nativebase

import { IconButton, Icon, Box } from 'native-base'
import { AntDesign } from "@expo/vector-icons"

const Instagram = () => {

    const gradient_codes = [
        '#fccc63',
        '#fbad50',
        '#cd486b',
        '#8a3ab9',
    ]

    return (
        <Box
            bg={{
                linearGradient: {
                    colors: gradient_codes,
                    start: [0, 0.9],
                    end: [0.5, 0],
                }
            }}
            borderRadius={24}>
            <IconButton
                icon={<Icon as={AntDesign} name='instagram' />}
                _icon={{
                    color: 'white'
                }}
            />
        </Box>
    )
}

It should look like this screenshot