Styled Components in Web - Issues with ThemeProvider

Expo SDK
1

I’m working with a small expo project setup where I develop for both iOS/Android and Web. I recently wanted to add styled-components to the project and got everything up and running for Web and Mobile until I started working with a Theme Provider and the theme prop. I am 99% certain that I should have done everything correctly because it works for mobile but I get a JS exception in the web version.

  • I’ve created a type for the theme and I know it works because my IDE tells me when I try to add something wrong to the theme.
  • I’ve created a theme.ts and import it in the component where I’ve implemented the ThemeProvider. I know this works because when accessing prop.theme I get auto-completion and as I said it works on mobile.
const Container = styled.View`
    background-color: ${props => props.theme.color.primary};
`

This is the error I get:
TypeError: Cannot read property ‘primary’ of undefined

I suspect it might have something to do with expo’s bundler and missing loaders or something? I don’t know. To my knowledge, I did everything as in the docs and suspect it is an issue with Expo Web and the ThemeProvider.

"expo": "~39.0.2"
"styled-components": "^5.2.1"
"@babel/core": "~7.9.0"

Please tell me if you need anything else to pin down this issue. I’ll try to add the missing information asap.

2

Turns out it was my own mistake because I missed that in one crucial place I did not import from “styled-components/native” but from “styled-components” and this caused the ThemeProvider to provide an empty theme.

case closed

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.