Uncaught TypeError: Cannot read properties of undefined (reading '2')

Question

I have a react native app and it works fine. And I try to convert it to a react native web app. But when I start expo and choose for option w - for web. I get this error:

account.styles.js:59  Uncaught TypeError: Cannot read properties of undefined (reading '2')
    at account.styles.js:59:1
    at flatten (flatten.js:68:1)
    at flatten (flatten.js:46:1)
    at InlineStyle.generateStyleObject (InlineStyle.js:29:1)
    at StyledNativeComponent.generateAndInjectStyles (StyledNativeComponent.js:120:1)
    at StyledNativeComponent.js:46:1
    at updateContextConsumer (react-dom.development.js:21207:1)
    at beginWork (react-dom.development.js:21652:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

And this is the file account.style.js:

import { Button, TextInput } from "react-native-paper";

import { Text } from "../../../components/typography/text.component";
import styled from "styled-components/native";

export const AccountBackground = styled.ImageBackground.attrs({
    source: require("../../../../assets/lizard.jpg"),
})`
    flex: 1;
    align-items: center;
    justify-content: center;
`;

export const AnimationWrapper = styled.View`
    width: 15%;
    height: 15%;
    position: absolute;
    top: 30px;
    padding: ${(props) => props.theme.space[2]};
`;

And the file spacing.js:

export const lineHeights = {
    title: "28px",
    copy: "20px",
};

export const space = ["0px", "4px", "8px", "16px", "32px", "64px"];

And this is my package.json file:

{
    "name": "dierenwelzijnapp",
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject",
        "lint": "eslint . --ext .js",
        "postinstall": "patch-package"
    },
    "dependencies": {
        "@ant-design/icons": "4.0.0",
        "@expo-google-fonts/lato": "^0.2.2",
        "@expo-google-fonts/oswald": "^0.2.2",
        "@expo/webpack-config": "^19.0.0",
        "@react-native-async-storage/async-storage": "1.18.2",
        "@react-navigation/bottom-tabs": "^6.5.4",
        "@react-navigation/native": "^6.1.3",
        "@react-navigation/stack": "^6.3.14",
        "babel-plugin-styled-components-react-native-web": "^0.2.2",
        "css-to-react-native": "^3.2.0",
        "expo": "~49.0.13",
        "expo-font": "~11.4.0",
        "expo-status-bar": "~1.6.0",
        "lottie-react-native": "5.1.6",
        "next-transpile-modules": "^10.0.1",
        "patch-package": "^8.0.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-native": "0.72.6",
        "react-native-gesture-handler": "~2.12.0",
        "react-native-paper": "^5.1.3",
        "react-native-safe-area-context": "4.6.3",
        "react-native-screens": "~3.22.0",
        "react-native-svg": "13.9.0",
        "react-native-web": "~0.19.6",
        "react-toast-notifier": "^1.0.3",
        "styled-components": "^5.3.6"
    },
    "devDependencies": {
        "@babel/core": "^7.19.3",
        "@react-native-community/eslint-config": "^3.2.0",
        "eslint": "^8.32.0",
        "prettier": "^2.8.3"
    },
    "private": true
}

Question: how to tackle this error?

Answer 1

Holy moly!! It was because by ThemeProvider I still had styled-components. And not:

import { ThemeProvider } from "styled-components/native";