Having trouble with center text in a circle shape on React Native for iOS?

Can someone help me create a circular view for a textview with some text inside?

It's working fine on Android, but on iOS the text is appearing above the view.

<Text style={styles.na}> NA </Text>

styles

na: {
    width: 60,
    height: 60,
    borderRadius: 60 / 2,
    backgroundColor: 'orange',
    alignItems: 'center',
    textAlign: 'center',
    fontWeight: 'bold',
    color: 'white',
    fontSize: 15,
    textAlignVertical: 'center',
    marginRight: 10,
    overflow: 'hidden',
},

Any suggestions on how to fix this issue?

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

javascriptcssreact-nativegreat-circle

Answer №1

Give this code a try, it's been successful for me

      <View style={{
        width: 60,
        height: 60,
        justifyContent: "center",
        borderRadius: 60 / 2,
        backgroundColor: 'orange',
      }}>
        <Text style={{
          alignSelf: 'center',
          fontWeight: 'bold',
          color: 'white',
          fontSize: 15,
        }}>NA</Text>
      </View>

Answer №2

experiment with alignSelf : center

alignSelf functions similarly to alignItems, but instead of impacting all children within a container, it can be used on an individual child to adjust its alignment within the parent element. This property overrides any settings made by the parent using alignItems.

Check this out for more information!

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

Show a Google map when hovering over a link or text

I have been trying to implement a Google map display over text by following a tutorial. However, I've encountered an issue where the map is appearing in the wrong location – at the bottom of the page instead of where it should be. Upon inspecting th ...

javascriptjquerygoogle-maps

What is the best way to navigate to a different page when scrolling in React Router?

I am working on a design that includes a landing page with 100vh and 100vw dimensions. I want it to transition into another page as the user scrolls down. How can I achieve this using React hooks and React Router? Any guidance or suggestions would be high ...

javascriptreactjsreact-routerreact-hooks

Displaying the content of the log file within a textarea

Currently, I am working on a project that involves displaying log file contents in a text area. To achieve this, I am utilizing XML HTTP request to read the file content through a Web API. The Web API function reads the file contents as a stream and retu ...

javascriptjqueryxmlhttprequest

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

javascriptphphtmlajax

At times, receiving text is possible, but occasionally the message "Element cannot be located with provided selector" may appear

When using var n = I.Find(("#CSS_path"); to locate an element and click on it, I encountered a problem when attempting to compare the text inside. Initially, I tried using var nt = n.Element.Text; and string name = n.Element.ToString(); to retrieve the tex ...

c#jquerycssfluentautomation

Troubleshooting a CSS problem with typeahead.js Integration

Having trouble with the typeahead.js plugin from Twitter? Check out an example of how it's supposed to work: Here is my implementation: The Issues I Am Facing: The textbox should change to white when in focus (this worked before installing the plu ...

jqueryhtmlcss

passing a javascript variable to html

I am facing an issue with two files, filter.html and filter.js. The file filter.html contains a div with the id "test", while the file filter.js has a variable named "finishedHTML." My objective is to inject the content of "finishedHTML" into the test div ...

javascripthtmlcssvariables

I possess a pair of items that require merging together while combining any overlapping key values in their properties

I have a scenario where I need to merge two objects and concatenate strings if they have the same key. obj1 = { name: 'John', address: 'Cairo' } obj2 = { num : '1', address: 'Egypt' } After merging, the r ...

javascriptangulartypescriptecmascript-6lodash

Create a JavaScript variable that is initialized with a value from an AngularJS scope

What is the best way to assign a value from an AngularJS scope variable to a JavaScript variable? For example: xyz.controller({ $scope.country = "Canada"; }); Here's how you can do it in JavaScript: <script> var country = {{scope.countr ...

javascriptjqueryangularjs

Iterating through tables with Python's Selenium WebDriver using JavaScript

After working with Beautiful Soup for some time, I've realized its limitations when it comes to handling JavaScript. To bridge this gap, I turned to Selenium to enhance my toolbox. I've been attempting to scrape data from the site It's wort ...

javascriptpythonseleniumselenium-webdriverbeautifulsoup

Prevent Swiping Action Until Completion of CSS Animation

I have a series of equally sized boxes inside a container with absolute positioning, where the total width of the container equals boxWidth * n. This container is within a relative positioned parent container with overflow hidden, spanning multiple rows. W ...

jquerycssjquery-uijquery-mobilecss-transitions

Tips for Incorporating Page Functionality Similar to YouTube and Other Websites

Having recently embarked on my Javascript journey, I'm eager to implement a 'pages' functionality for comments and replies. I've noticed how YouTube videos smoothly paginate the comments, creating a user-friendly experience. Could som ...

phpjavascriptjquery

Utilizing JavaScript to access carousel images and captions, then displaying them in a modal with a click option

I'm currently in the process of setting up a carousel feature that will display the image along with its corresponding caption in a modal window once the user clicks on the image. Although I have managed to successfully display the image in the modal ...

javascripthtmlbootstrap-5

Changing the opacity on hover doesn't seem to be working

I currently have a simple dropdown menu where the different menu choices are supposed to change opacity when hovered over. The default opacity is set at 0.5. Below is the hover function in my jQuery code: $('#cat1 > li > a').hover(functio ...

jquerycss

What could be the reason that the background color of my iframe is not updating?

I'm currently working on a website where this code will be loaded in an iframe on a different page. However, I've encountered an issue with the CSS that should change the background of the page. Even when I test it without the iframe, it still di ...

htmlcssiframebackground-color

What is the best way to align the navigation bar in the center

Hi there! Currently, I am in the process of creating a navigation bar for a website but I am facing an issue where the logo and navigation elements are not covering the entire width of the browser. My goal is to have the logo aligned to the far left and th ...

htmlcss

The webpack server is having trouble loading the CSS stylesheet

Currently, I am working on creating a webpage using ReactJS. I encountered an issue where the css stylesheet I created to modify some bootstrap classes (specifically for my Navbar fonts) was not being applied when linked in the html file. To troubleshoot ...

cssreactjswebpack

Can SailsJS be used exclusively for API processes?

Can SailsJS be used solely as an API? After downloading the Sails project, is it possible to exclude the views and focus only on utilizing Sails as an API? ...

javascriptnode.jssails.js

Alert an error message in Javascript when XML is not accessible

Seeking assistance with enhancing my iPhone app. The code has been optimized thanks to the advice received here, but I need help displaying an error message under specific conditions: When the xml file is unavailable When a required xml data field is mis ...

javascriptjqueryxmloptimization

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...

javascriptjqueryhtml