Library not working with react-native-web

[ericlifs]

Hey team,

First of all thanks for this awesome tool. Secondly, I'm facing an issue with my react-native-web project which uses styled-components where none of my responsive styles get applied to the dom elements:

Here's my component definition:

import styled from 'styled-components/native';

import { up, down, between } from 'styled-breakpoints';

export const H3Headline = styled.Text`
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: white;

  ${down('sm')} {
    background-color: red;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
  }

  ${between('sm', 'lg')} {
    background-color: blue;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
  }

  ${up('lg')} {
    background-color: yellow;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
  }
`;

As you can see, I'm importing styled from styled-components/native and my component is a react native's Text component. And this is what I'm seeing on the DOM:

If I replace my styled-components' import and the component to something like:

import styled from 'styled-components';

import { up, down, between } from 'styled-breakpoints';

export const H3Headline = styled.span`
  ... this is the same code I had before

The DOM output is the expected one and the responsiveness works perfectly:

I'm not sure if I have to do something extra for making this awesome tool with react-native-web or if there is no way of making it work.

Thanks,

Eric.

[mg901]

@ericlifs Hello. To be honest, I don't know why styled-breakpoints doesn't work with styled-components/native. Solving this problem requires deep immersion and a lot of time, which, unfortunately, I don’t have right now. If you are interested and have a desire to help, you can create pull request with your solution.

[mg901]

@ericlifs The styled-components documentation (under react-native) says the following: "Some of the differences to the web-version are, that you cannot use the keyframes and createGlobalStyle helpers since React Native doesn't support keyframes or global styles. We will also warn you if you use media queries or nest your CSS." It just says that you can't use styled-breakpoints with react-native.