How can I generate curved components (or the like) around a central point within a React Native application?

Recently, I came across an app screen in a series that caught my eye and I decided to recreate it using React Native. However, I've hit a roadblock when it comes to designing curved Views (arcs) with curved text inside them. These arcs need to animate from the top and wrap around a circle in the top left corner of the screen. Using CSS for this task seems impractical due to the complexity of curving divs. While SVGs might be a feasible option, I lack knowledge on how to dynamically adjust the length of the arc or its height based on the length of the text.

If you have any suggestions on how I can achieve this effect, please share your ideas. Any input would be greatly appreciated as I experiment with this project during my free time for practice.

The end result doesn't need to be flawless; I am open to approximations that help me learn and improve my skills.

https://i.sstatic.net/ZOjMwm.jpg

csstypescriptreact-nativesvgexpo

Answer №1

According to Atmas' suggestion, utilizing SVGs is the optimal choice.

I stumbled upon some code that enables the generation of SVG Arcs dynamically in a related thread.

If anyone is curious, here is how my code appears:

<Svg>
   <Path d={describeArc(0, 0, 235, 90, 173)} fill="none" stroke="#fff" strokeWidth="54" strokeLinecap="round" id={`msg${index}`} />
   <Path d={describeArc(0, 0, 235, 90, 173)} fill="none" stroke="#F1E059" strokeWidth="50" strokeLinecap="round" />
   <Text fill="#446688" fontSize="18" dy="7" >
       <TextPath href={`#msg${index}`} startOffset="10px" >
           {msg}
       </TextPath>
   </Text>
</Svg>

This implementation yields the following outcome:

https://i.sstatic.net/NmZqom.jpg

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

Transformation of If/Else to Ternary in React using Typescript

I'm currently working on a project using React and Typescript, where I've implemented a Like button with the following if/else statement: const [count, setCount] = useState(0); const [iconFill, setFill] = useState('gray'); cons ...

javascriptreactjstypescript

What is the best way to ensure that an image fills the entire page in Bootstrap 4 by setting a maximum height for both the column and container

I am facing an issue with displaying two columns in a row using Bootstrap 4. I want the image to take up the entire screen space. Here is my code snippet: <div class="container-fluid" style="padding-left:0px;"> <div class="row"> ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

A container with smaller divs that can be scrolled horizontally

Within my website lies a div container housing smaller divs that are arranged horizontally for horizontal scrolling. My intention is to have them appear as follows: +-Container------------------+ | +-a-+ +-b-+ +-c-+ +-d-+ | | | | | | | | | | ...

htmlcssspacing

Customizing the font color and size of the brand text in the Bootstrap 5.1.3 Navigation Bar is not allowed

I am currently working on a main page that includes a bootstrap navigation bar with a dropdown menu. I have successfully managed to display the dropdown menu and change its color using CSS. However, I encountered an issue when attempting to modify the font ...

htmlcssbootstrap-5

How can Enums be utilized as a key type for transmitting properties in Vue?

After stumbling upon a helpful method on Stack Overflow that demonstrated how to use an enum to define an object, I decided to implement this in my Vue project. export enum Options { randSize = 'randomSized', timer = 'showTimer', ...

typescriptvue.jsvuejs3

Create enumeration keys by adding up enumeration values for permissions

One example of an enum is: RoleEnum={ None: 0, ViewAnalytics: 1, ManageTargets: 2, ManageBranches: 4, ViewActivationDetails: 8, ManageUsers: 16, ViewBilling: 32, ...

javascriptangulartypescript

What's the best way to horizontally center an inline element within a block element using CSS?

I need help centering an inline element (like a span) within a fixed-width block element. The goal is to have the position of the inline element determine how the text is laid out in the block element. Here's an example: .container { ...

htmlcsscenter

Tips for sending push notifications in real-time on Android while storing the payload in asynchronous storage

As a newcomer to react native push notification functionality, I encountered some difficulties that led to two distinct scenarios: When sending a single push notification, the payload is successfully fetched and stored in async storage, which is functioni ...

androidreact-nativereact-native-push-notification

Having trouble with CSS font imports not functioning as expected

Apologies in advance for the repeated inquiries, but despite my efforts, I cannot seem to find a solution. I am attempting to utilize a downloaded font that I've placed in a "fonts" directory. This folder resides alongside all of my webpages. The sp ...

css

Adding extra spacing in an li element

As a developer, my knowledge of CSS is not extensive. I am currently facing a simple issue while working with Sitefinity CMS. On one of the pages, I have utilized ul and li elements. The designer has provided me with CSS for li that looks like this: .list ...

htmlcss

Locate the class ID and refine the search results by another class

I am currently working on a task that involves extracting the first <li> element's id where it has the class name my_class, and checking if the <span> with the class Time contains a ":" using jquery. Below is the sample HTML structure: & ...

javascriptjqueryhtmlcss

Is it possible for variables in a component.ts file to be automatically updated without the need for an updateData()/ngOnit method to be called again within the same component.ts file

I recently started working with Angular and came across a logic issue while implementing a function using a service class in my component class. Here is the code snippet that I encountered: Link to Stackblitz app.module.ts @NgModule({ declarations: [ ...

angulartypescript

Please submit the form only after checking the appropriate checkbox

I am encountering an issue with form validation. In the first image, users can make a choice that will determine the display of either form 2 or form 3 (shown in images 2 and 3). The fields in each form are marked as mandatory but both sections start as ...

htmljquerycss

Checking the validity of CSS selectors

I recently came across a CSS Selector Tester tool at the following link: http://www.w3schools.com/cssref/trysel.asp Is this tool reliable? It showcases some unique selectors such as: p:first ul li:eq(0) :contains(Duck) However, I encountered an iss ...

htmlcsscss-selectors

I have found that I can load a CSS file using Node Express, however, it seems to be malfunctioning. On the other hand, some

I have added app.use(express.static(path.join(__dirname, 'public'))); to my app.js file. Now I am using bootstrap.css along with my custom CSS file main.css. index.html: ┊ <meta http-equiv="Content-Type" content="text/html; charset=UTF- ...

javascriptcssnode.jsexpress

Monitoring controller variables in Angular 4

Imagine having a piece of old code that you don't want to modify. There are three server calls involved in fetching data, and after all three methods succeed, you need to execute some additional code. I introduced a variable and now want to monitor it ...

angulartypescriptrxjs

A guide to creating custom form controls with validation using pseudocode in Bootstrap

I am working with a Bootstrap form and I want to display a green check mark in the input box when both the required fields are filled and they match my specified pattern. .form-control.is-valid, .was-validated .form-control:valid { border-color: var(-- ...

javascriptcssbootstrap-5

React cursor none does not have the ability to adjust

I am currently working with React and Next.js. I am trying to hide the pointer using cursor: none. Even though I used cursor: none, the pointer is still visible. const Home: FunctionComponent = () => { const [mouseX, setMouseX] = useState(0); ...

cssreactjsnext.js

"Encountered difficulty in retrieving the width of an element upon refreshing the

I have come across a puzzling situation with my code that involves determining the width of a block element. Here is an excerpt from the code snippet: //get the largest block: if no block, apply to first block var previous = $('.block-grid .block-gr ...

javascriptcsswidthelement

Exploring the use of Typescript to map a local array within a React card component

I have a set of Interfaces that look like this: interface INewsProps { newsType: string; data: INewsContentProps[]; } interface INewsContentProps { title: string; newsContent: string; } This is the array of news items I am working with: export co ...

javascriptreactjstypescriptreact-typescript