Problem with styled componets

[yuriedmundo]

I'm having trouble using this library with Styled Components, has anyone had this problem?

[heyman333]

could you upload example code?

[TiagoDanin]

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>

[albertoammar]

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;
`;

[heyman333]

@TiagoDanin Have you tried? font-size: ${RFValue(18, 580)}px;

[TiagoDanin]

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.