Invariant Violation: invalid prop 'fontSize' of type 'string' supplied to 'Stylesheet generated' expected 'number' - Styled Components RN

user_10852324 0
Viewed 2354

Not sure where I'm going wrong, I know React native doesn't support units but isn't styled-components taking care of that conversion. Every time I run it, it throws an error 'stylesheet generated value as a string, but expected is number'. When I look into styled-components docs, this syntax seems fine.

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)
react-native styled-components reactjs css
1 Answers

Currently you can't use relative units like rem or em in react-native. Rather you can use px value to define your fontSize and use the value as Number.

Your code may look like -

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

Note: I have assumed your fontSize value as 16px.

user_74301180
Related