React Styled Components not working with React Native 0.70.06 - reactjs

Question

Whenever I try to NPM install styled components I get warnings and my app no longer works, so I delete my node modules and tried to "npm install" to see if that fixed it, I got the following message.Console error message.
This is what my package.json looks like,
{
"name": "WolffMobile",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios --port=8088",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
},
"dependencies": {
"#babel/cli": "^7.19.3",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-duotone-svg-icons": "^6.2.1",
"#fortawesome/pro-light-svg-icons": "^5.15.4",
"#fortawesome/pro-regular-svg-icons": "^5.15.4",
"#fortawesome/pro-solid-svg-icons": "^5.15.4",
"#fortawesome/react-native-fontawesome": "^0.3.0",
"#graphql-codegen/cli": "^2.13.12",
"#graphql-codegen/typescript": "^2.8.2",
"#graphql-codegen/typescript-graphql-request": "^4.5.8",
"#graphql-codegen/typescript-operations": "^2.5.7",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
"#react-native-picker/picker": "^2.4.8",
"#react-navigation/bottom-tabs": "^6.4.3",
"#react-navigation/native": "^6.0.16",
"#react-navigation/native-stack": "^6.9.4",
"#rneui/base": "^4.0.0-rc.7",
"#rneui/themed": "^4.0.0-rc.7",
"#types/lodash": "^4.14.189",
"axios": "^0.26.0",
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
"date-fns-tz": "^1.1.6",
"formik": "^2.2.9",
"graphql": "^16.6.0",
"graphql-request": "^5.0.0",
"graphql-tag": "^2.12.6",
"html-webpack-plugin": "^5.5.0",
"react": "^16.14.0",
"react-content-loader": "^6.2.0",
"react-dom": "^16.14.0",
"react-is": "^16.13.1",
"react-native": "0.70.6",
"react-native-device-info": "^10.3.0",
"react-native-elements": "^3.4.3",
"react-native-modal": "^13.0.1",
"react-native-msal": "^4.0.4",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-svg": "^13.7.0",
"react-native-switch": "^1.5.1",
"react-native-vector-icons": "^9.2.0",
"react-query": "^3.39.2",
"rn-fetch-blob": "^0.12.0",
"styled-components": "^5.3.6",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^26.0.23",
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.8",
"#types/react-test-renderer": "^18.0.0",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.72.3",
"react-test-renderer": "18.1.0",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
Is there anyway I can get styled components to work with my react native project?
Tried deleted node modules, pod file, derived data and reinstalling it all with no luck.