Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] styled issues with Animated components

See original GitHub issue

On web with preview enabled, if I wrap Animated components with styled, then the style prop has no effect, and there is an error within styleq:

styleq: width typeof 100 is not "string".

const StyledView = styled(Animated.View);
const StyledText = styled(Animated.Text);

export default function App(props) {
  return (
    <TailwindProvider platform="web" preview>
      <View style={styles.container}>
        <StyledView
          className="p-4 mt-4 bg-gray-800 rounded-lg"
          style={{ width: 100, backgroundColor: 'blue' }}
        >
          <StyledText className="font-bold text-white">
            React Native component
          </StyledText>
        </StyledView>
      </View>
    </TailwindProvider>
  );
}

The error goes away if I change it to styled(View) or remove the preview prop.

I’m not sure if it’s something you can fix or if it’s something in react-native-web?

I updated my test repo with this: https://github.com/jmeistrich/tailwindcss-react-native-next/. But I think it should be easy to reproduce with the code above.

Issue Analytics

State:
Created a year ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

marklawlorcommented, May 7, 2022

The workaround is the hooks API, but unfortunately that’s currently broken on RNW. When that’s fixed you’ll be able to access the runtime values of the classes.

1reaction

marklawlorcommented, May 7, 2022

This looks to be an upstream issue with RNW 0.18. I can replicate it in the canary sandbox https://codesandbox.io/s/crazy-chatelet-iq8uq4?file=/src/App.js.

Added a comment on the RWN PR https://github.com/necolas/react-native-web/pull/2248#issuecomment-1120208647.

Top Results From Across the Web

Issues · styled-components/styled-components - GitHub

customSyntax for Stylelint v14+ · Can't use <use> element with styled-components · Upgrading react dependency to 18.1 · css animation doesn't work if...

Animated style-components perfomance issues - Stack Overflow

I wanted to make a react component out of this animation, and I did it with styled-components: const randomRange = (min: number, ...

Introduction to Angular animations

Collect a set of styles in an animation state, and give the state a name, such as open or closed . Let's create...

Inspect and modify CSS animation effects - Chrome Developers

Inspect and modify animations with the Animations tab.

Change Log - Ant Design

#39782; Fix Menu icon animation when collapse it. ... 5.1.0. 2022-12-20. New App Component which provide global style & static function replacement.