/Javascript/React/React native curved view

React native curved view

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

const styles = StyleSheet.create({
	parent : {
        height : '80%',
        width : '100%',
        transform : [ { scaleX : 2 } ],
        borderBottomStartRadius : 200,
        borderBottomEndRadius : 200,
        overflow : 'hidden',
    },
    child : {
        flex : 1,
        transform : [ { scaleX : 0.5 } ],

        backgroundColor : 'yellow',
        alignItems : 'center',
        justifyContent : 'center'
    }
});

const MyCurvedView = () => {
	return (
		<View style={styles.parent}>
			<View style={styles.child}>
      		//Content of the curved view
      		</View>
      	</View>
    );
}

export default MyCurvedView;

Similar codes

5 votes182 views1 answer
Switch was not found in 'react-router-dom'
Javascript React
0 vote190 views1 answer
React-leaflet/core/cjs/pane.js:7%20error15-Jun-2021%2000:45:06%20%20%20%20%20%20const%20pane%20=%20props.pane%20??%20context.pane;
Javascript React
0 vote127 views1 answer
React js averta fonts not working in safari staging deployement
Javascript React
1 vote142 views1 answer
External script in react
Javascript React
0 vote149 views1 answer
Unrecognized font family 'feather' react native
Javascript React
0 vote90 views1 answer
React create element from string
Javascript React
18 votes131 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
48 votes141 views1 answer
Emmet not working react js
Javascript React
1 vote135 views1 answer
Could not find com.yqritc:android-scalablevideoview:1.0.4 react native video
Javascript React
113 votes163 views4 answers
New create react app
Javascript React