CODEWITHSUNDEEP
react-nativeview
Lukas Köhl
Lukas Köhl

Reputation: 1589

React Native draw custom rounded edge on View

I want to create a View which has one rounded edge on it in react native as you can see in the image. I already have the white view as I want it to be. However, it should extend up to the black curve. What are my options and how can it be achieved?

Thank you in advance. Image

Upvotes: 2

Views: 2480

Answers (1)

remeus
remeus

Reputation: 2449

You can make the white view elliptical by adding a bottom border radius and scaling it up using the transform attribute.

Then if you place it partially above the second view, you will end up with the expected output.

Here is an example:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.first} />
          <View style={styles.second} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute', 
    width: '100%',
    backgroundColor: '#fff',
  },
  first: {
    backgroundColor: '#fff',
    alignSelf: 'center',
    width: 100,
    height: 100,
    borderBottomRightRadius: 50,
    borderBottomLeftRadius: 50,
    transform: [{ scaleX: 4 }],
    zIndex: 1,
  },
  second: {
    backgroundColor: '#333',
    marginTop: -30,
    height: 200,
    zIndex: 0,
  },
});

Here is the example in action.

Upvotes: 2

Related Questions