React Native Bug: Border Radius Issue at the Bottom

I'm struggling with adding a border on the bottom and left sides. Even though I've specified the properties, the border is covering the circle instead of surrounding it.

 <View style={{
     borderBottomColor:'red',
     borderBottomWidth:20,
     borderRadius:500,
     position: 'absolute',
     left: 0,
     top: 0,
     transform:[{rotate:('180deg')}],
     height: 150,
     width: 150,
     backgroundColor: 'orange',
     boxSizing: 'border-box',
     zIndex: 2000,
     overflow: 'hidden'
 }}></View>

https://i.sstatic.net/lyLu9.png

The original intention was to achieve this visual result as shown in the Codepen (https://codepen.io/anon/pen/bmdmWq)

https://i.sstatic.net/dbu3s.png

cssreactjsreact-nativesassless

Answer №1

How about this code snippet:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{
          borderRadius: 150,
          left: 0,
          top: 30,
          height: 150,
          width: 150,
          backgroundColor: 'orange',
        }}>
          <View style={{
            borderTopColor: 'red',
            borderTopWidth: 75,
            borderRadius: 150,
            left: 0,
            top: 0,
            height: 150,
            width: 150,
            zIndex: 1,
            position: 'absolute'

          }} />
          <View style={{
            borderTopColor: 'orange',
            backgroundColor: 'orange',
            borderTopWidth: 60,
            borderRadius: 140,
            left: 10,
            top: 10,
            height: 130,
            width: 130,
            zIndex: 1,
            position: 'absolute'

          }} />
          <View style={{
            borderTopColor:'green',
            borderTopWidth:5,
            left: 0,
            top:75,
            width: 150,
            zIndex: 1,
            position:'absolute'
          }} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1'
  }
});

You might need to make some adjustments in order for the output to match your desired image perfectly.

Check out a working example here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The size of the image remains as is and does not adjust in

For some reason, my image is not adjusting its size properly. Despite searching online for solutions, I have been unable to resolve the issue. According to W3schools, I should set it up like this using the formular-banner class. .formular-banner { ...

htmlcssresponsive-design

How to eliminate ampersands from a string using jQuery or JavaScript

I'm having trouble with a seemingly simple task that I can't seem to find any help for online. My CSS class names include ampersands in them (due to the system I'm using), and I need to remove these using jQuery. For example, I want to chan ...

javascriptjqueryhtmlcss

What is the best way to design the paper of a Drawer component in MUI?

The latest update from Material-UI, called MUI 5, suggests moving away from using makeStyles for styling and instead recommends using emotion css. I am curious about how to style the paper element of the drawer component. Specifically, I want to apply a cu ...

reactjsmaterial-uiemotion

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

cssreactjstypescriptreact-routerreact-router-dom

Send the Children prop to the React Memo component

Currently, I am in the stage of enhancing a set of React SFC components by utilizing React.memo. The majority of these components have children and the project incorporates TypeScript. I had a notion that memo components do not support children when I en ...

javascriptreactjstypescriptmemo

The history property in this.props is not defined in react-router-dom

My App.js import React, { Component } from 'react'; import './App.css'; import Continue from './components/Continue'; import Login from './components/Login'; import Table from './components/Table'; import ...

reactjs

The CSS styling for changing the background-color and color of list items (li) is

Trying to customize the background-color and color of li, but despite inspecting it, the changes are not reflecting on the page. https://i.sstatic.net/P7GkK.png Does anyone know why this is happening and how to fix it? Update: Here's a link to the ...

htmlcss

The issue with Framer motion's whileInView is that it does not animate the element when it is within the viewport in Next.js

In my current Next.js 14 project with the App Router, I decided to play around with animations using Framer Motion. One specific feature I wanted to implement was animating text elements into view as they enter the viewport. The idea is for the text to gra ...

javascripthtmlreactjsnext.jsframer-motion

Creating a Type Definition for Various Record Patterns in Typescript

Seeking guidance on using Nivo charts with TypeScript, specifically defining the type of data Nivo expects for their Bar Chart (https://Nivo.Rocks). I have experimented with: Object Index Signature ... {[Key: string]: string;} Record utility type ... ...

reactjstypescripttypesnivo-reactindex-signature

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

Issue with Material UI chip not functioning properly when used within a loop

I'm currently working with the Chip component from material-ui. Initially, everything was fine when I used it by itself. However, I encountered an issue when trying to render it using a loop (map). The error message that appeared is as follows: Wa ...

reactjsmaterial-ui

How can I make angular material data table cells expand to the full width of content that is set to nowrap?

This example demonstrates how the mat-cells are styled with a specific width: .mat-cell { white-space: nowrap; min-width: 150rem; } If the width is not specified, the table will cut off the text due to the white-space property being set to nowrap. Is ...

htmlcssangularangular-material

Delivering compressed files in a React server

Having some trouble serving a gzip compression of my bundle.js file in React. Have tried reducing the size with uglify and dedupe, but only saw a small decrease from 2.9mb to 2.6mb. Using the compression plugin now outputs a gzip file, however, still servi ...

javascriptreactjsexpresswebpackgzip

Having trouble installing react-native-cli despite following the tutorial step-by-step

Before going through the NPM tutorial, I had already globally installed react-native-cli and it was working fine. However, the tutorial required the installation of sinopia. https://www.npmjs.com/package/react-native-cli These were the given instruction ...

androidnode.jsreactjsreact-native

Using CSS to style the last element in a set of dynamic content

I am currently working on targeting the last element in a dynamically generated content set. For instance, here is an example of how the generated content appears: <div class="block"> <div class="block-inner"> <div class="box"> ...

csscss-selectors

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

javascriptcssreactjscss-animations

Setting the value for datepicker and timepicker in ReactJS for individual rows

Can you please explain how to set a default value for the datepicker and timepicker in each row? I have successfully implemented the datepicker and timepicker functionalities in my code. In the home.js file, there is a state called additionalFields which ...

javascriptarraysreactjsobjectreact-redux

Exploring the various situations in which async/await can be used shows

Could you explain the discrepancy between the scenarios below? scenario 1 - async-await in axios request - DOES NOT WORK export const getAll = async () => { const retrievedData = await axios.get('http://localhost:3001/anecdotes'); // sho ...

javascriptreactjspromiseasync-await

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

javascripthtmlcss