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)