Error: The prop 'fontSize' must be a number when passing it to 'Stylesheet generated' in Styled Components RN. Please provide a valid number value for the prop

I'm a bit confused about where my mistake might be. I understand that React Native doesn't support units, but shouldn't styled-components handle the conversion? Every time I try to run it, I encounter an error saying 'stylesheet generated value as a string, but expected is number'. Even after checking styled-components documentation, the syntax appears correct.

const HomeContainer = styled.View`
  flex: 1;
  background-color: hsl(202, 8%, 90%);
`;

const TaskWrapper = styled.View`
  padding-top: 5rem;
  padding-left: 1.2rem;
`;

const SectionTitle = styled.Text`
  color: hsl(0, 25%, 90%);
  font-size: 1.5rem;
`;

const Home = (props) => {
  return (
    <HomeContainer theme={props.theme}>
      <TaskWrapper>
        <SectionTitle theme={props.theme}> Today's Tasks </SectionTitle
      </TaskWrapper>
    </HomeContainer>
  );
};
export default Home;

Error :

Running application on sdk_gphone_x86.

Invariant Violation: Invalid prop `fontSize` of type `string` supplied to `StyleSheet generated`, expected `number`.
StyleSheet generated: {
  "color": "hsl(0, 25%, 90%)",
  "fontSize": "1.5rem"
}

This error is located at:
    in StyledNativeComponent (created by Styled(Text))
    in Styled(Text) (at home.js:27)

Answer №1

At this time, react-native does not support the use of relative units like rem or em. Instead, you can utilize px values to set your font size and treat it as a Number.

Your code snippet might resemble the following -

const SectionTitle = styled.Text`
  color: hsl(0, 25%, 90%);
  font-size: 16;
`;

Please note: In this example, I assumed your fontSize is set at 16px.

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

Using rvest to extract picture data

I've been grappling with this issue for a few weeks now and haven't had any success. My ultimate goal is to extract each image from the website provided (link:). To start, I am attempting to retrieve just one instance of the image stored in the & ...

Steps to add a background image without a border:

I am struggling to insert an image within an anchor tag. <a> <img calss="imageclass"/></a> Whenever I try, a border appears around the image. I have attempted using CSS properties like border: 0 and border-style:none, but nothing seems ...

MUI Grid with Custom Responsive Ordering

Can I achieve a responsive grid layout like this example? Check out the image here I have already coded the desktop version of the grid: <Grid container spacing={2}> <Grid item sm={12} lg={6} order={{ sm: 2, lg: 1 }}> ...

Having Trouble with Bootstrap 4 JQuery Responsive Tabs? Check out the provided code snippet for a solution

So I have included a code snippet to showcase the issue. In my current code, I am using a jinga forloop to generate the cards. Each card contains responsive tabs. However, when you click on the tabs of card 2 to view its data, it ends up displaying the d ...

What steps are involved in setting up the getPermissions() function within the AuthProvider for react-admin?

After attempting to create custom hooks for calling the DataProvider's getOne() method to retrieve permissions based on the username obtained from the authProvider post login, I ran into a constant issue where calling the hook within a method led to e ...

Adjusting the position of a background image with Bootstrap

problem I am struggling with the layout of this design. My goal is to center an image of an app within these boxes, ensuring that it overlaps both the top and bottom of the background for sections containing text. I have experimented with various techniqu ...

Implement a class attribute to the parent <div> element using React and TypeScript

I'm trying to figure out how to achieve this task. I need to assign a class upon clicking on an element that is not directly in my code, but rather in one of its parent elements. My initial thought was to accomplish this with jQuery using the followi ...

Column-based Bootstrap dropdown menu

Is it possible to create a vertical dropdown menu with columns similar to the one featured on Microsoft's website, without the use of JavaScript? Check out the image for reference: https://i.sstatic.net/h7ftN.png ...

Guide to displaying the object response on the UI in a ReactJS application

The response received from the backend looks like this: dept: Object { Sales: 33, Market: 12, Finance: 22, Hr: 26 } In my model.ts file: export default interface Dept{ categories: Record<string,number>; } Within the component: interface ...

The Art of Determining the Text's Baseline

My goal is to create a test that determines whether the text rendered inside an <input> has the same baseline as a label: To achieve this, I want to calculate the baseline of the rendered text in each element and compare their values. Is it possible ...

Methods for creating drop-down navigation menus with a dark gradient instead of the traditional white styling

Can a custom style or class be used to transform a plain white nav drop down menu into a gradient tooltip similar to the one from Bootstrap shown in this link: http://www.bootply.com/68688? (hover over the link) If possible, how can this transformation be ...

Creating a fixed column in an Angular Material Table for enhanced user experience

Has anyone found a method to implement a sticky first column in Angular Material using CSS? Check out the editable Stackblitz code here. I attempted to modify this approach from https://jsfiddle.net/zinoui/BmLpV/, but encountered issues where the first c ...

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Would you mind helping me out with this technical issue I'm facing? For the server/API, I am using this link. As for the mock website, it can be found at this URL. The problem is that, in my code, I'm using axios to fetch data from the locally h ...

Custom Internet Explorer Stylesheet

My webpage (specifically a game) is behaving differently on Internet Explorer compared to other browsers, despite my efforts to fix it through online searches. <!--[if IE ]> <link rel="stylesheet" type"text/css" href="iestyle.css"> <![endif ...

Steps to designing 3 div elements containing portrait images in a row that are responsive using bootstrap

I'm facing a bit of a challenge trying to display 3 images in a row with a responsive layout using bootstrap. It seems like it should be easy, but I find it tricky. My goal is to create a page on my website that looks similar to this example - https: ...

The npm start command is failing to display the page when using node and reactJS

I'm currently working on a simple web page using NPM and react. Here is the code for my index.html file: <html lang="en"> <head> <meta charset="utf-8"> <title> React Page </title> </head> <body> ...

Combining arrays in Javascript that share the same key by utilizing a loop

Can you advise on the most effective method to restructure an array for desired output? My goal is to combine all key values, whether in arrays or not, into objects with the same name key. Here is my current array: brands: [ 0:ZARA: {product: "ZARA Blac ...

Setting up a React application to operate on a subpath

Tasked with configuring my React app to run on a Node.js server subpath /reactapp instead of the server root Here's how Express is set up: app.use("/reactapp", express.static("public")); The production build of the React app is l ...

Step-by-step guide on eliminating the modal post-validation

Newbie in reactjs looking for help with modal validation issue. Goal: Press submit button inside modal, validate, then close the modal. Want to reuse modal for another row. Problem: I'm having trouble making the function work for a new row after ...

What is the best way to incorporate PHP into handling data from 6 separate select elements on a form?

I've recently started delving into PHP and ran into a roadblock when trying to duplicate a piece of code multiple times. I ensured that each element had its own unique variables and was correctly linked to the corresponding name attributes in the inpu ...