CODEWITHSUNDEEP
reactjsreact-native
Krešimir Galić
Krešimir Galić

Reputation: 311

Custom shape and gradient in React native

I wanted to know is it possible to achieve this kind of shape and also gradient but I want to achieve gradient over the status bar. So pretty much the same like in the attachment.

For linear gradient I know how to do it, I've used https://docs.expo.io/versions/latest/sdk/linear-gradient/

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <LinearGradient
      colors={['#4c669f', '#3b5998', '#192f6a']}>
      <Text>
        Custom shape
      </Text>
   </LinearGradient>
</View>

This is the result I want to achieve. https://dribbble.com/shots/5484044-Profile/attachments/1186437

Upvotes: 0

Views: 1128

Answers (1)

Annie Hill
Annie Hill

Reputation: 379

You can make a custom component and manipulate the view to achieve a certain shape. Basic shapes are described here: https://codedaily.io/tutorials/22/The-Shapes-of-React-Native , but you will surely have to experiment more yourself to achieve your effect.

Upvotes: 1

Related Questions