react-native-responsive-fontSize
react-native-responsive-fontSize copied to clipboard
Problem with styled componets
I'm having trouble using this library with Styled Components, has anyone had this problem?
could you upload example code?
Styled use px as default unit.
No working (Only styled)
export const Text = styled.Text`
flex: 1;
font-weight: bold;
font-size: ${RFValue(18, 580)};
opacity: 0.78;
`;
// index.js
<Text allowFontScaling>
{text}
</Text>
Solution:
Working (Mix styled + react style)
// style.js
export const Text = styled.Text`
flex: 1;
font-weight: bold;
opacity: 0.78;
`;
// index.js
<Text allowFontScaling style={{fontSize: RFValue(18, 580)}}>
{text}
</Text>
Styled use px as default unit.
No working (Only styled)
export const Text = styled.Text` flex: 1; font-weight: bold; font-size: RFValue(18, 580); opacity: 0.78; `; // index.js <Text allowFontScaling> {text} </Text>
Solution:
Working (Mix styled + react style)
// style.js export const Text = styled.Text` flex: 1; font-weight: bold; opacity: 0.78; `; // index.js <Text allowFontScaling style={{fontSize: RFValue(18, 580)}}> {text} </Text>
Your code is wrong, try this:
export const Text = styled.Text`
flex: 1;
font-weight: bold;
font-size: ${RFValue(18, 580)}px;
opacity: 0.78;
`;
@TiagoDanin Have you tried? font-size: ${RFValue(18, 580)}px;
Your code is wrong, try this:
~@albertoammar it's not wrong... this is example of how some people expect can use ;)~
I put a wrong example, thanks. Update now
@TiagoDanin Have you tried? font-size: ${RFValue(18, 580)}px;
Yes this also work! but dp is different from px, recommend use in style
prop.
I don't see it as a problem, just commented so you could know why of no working with styled.