CODEWITHSUNDEEP
javascriptandroidreact-nativeuser-interface
Jasur Kurbanov
Jasur Kurbanov

Reputation: 840

How To Make Custom Shape In React Native

Can anybody help to make such kind of shape in React Native ? I highlighted with red in picture shape.

I tried in this way

const Header = memo(() => {
  return (
    <View
      style={{
        width: '100%',
        height: 120,
        borderRadius: 30,
        backgroundColor: 'orange',
        transform: [{ scaleX: 1 }]
      }}
    />
  )
})

enter image description here

Upvotes: 2

Views: 5767

Answers (2)

Jasur Kurbanov
Jasur Kurbanov

Reputation: 840

I solved this. Here is solution

import { Dimensions } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
const { width: W } = Dimensions.get('window')

   <LinearGradient
    start={{ x: 0.8, y: 0.2 }}
    end={{ x: 0.5, y: 1.0 }}
    locations={[0.1, 0.9]}
    colors={[colors.HEADER_GRADIENT_1, colors.HEADER_GRADIENT_2]}
    style={{
      height: 245,
      width: W - 120,
      left: 50,
      backgroundColor: 'red',
      top: -85,
      borderRadius: 150,
      transform: [{ scaleX: 3 }]
    }}
  >
    <StatusBar translucent={true} backgroundColor={'transparent'} />
  </LinearGradient>

Upvotes: 1

TessavWalstijn
TessavWalstijn

Reputation: 1736

I know this is not react native. However I do think you will get a far end with the CSS in here:

body {
  overflow-x: hidden;
}

.header {
  position: relative;
  top: -75px;
  left: -10%;
  height: 250px;
  width: 120%;
  background-color: #555;
  border-radius: 50%;
  background-image: linear-gradient(to top right, red, yellow)
}
<div class="header">
<div>

Upvotes: 1

Related Questions