JSON value of type NSString cannot be converted to a ABI38_0_0YGValue

user_10800954 0
Viewed 3796

Some hours ago, my expo/ React Native app was running perfectly fine locally. However, in order to deploy the app, I had to delete the whole node_modules folder and run npm install to resume it. Since then, I am having this terrible error when I run expo start --ios on IOS.

enter image description here

For some reason, my app can't read "em" style values anymore. Any ideas about what can be happening? Here are my configurations::

package.json

{
  "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"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/compat": "^5.2.5",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "dotenv": "^8.2.0",
    "expo": "~38.0.8",
    "expo-image-picker": "^8.4.0",
    "expo-status-bar": "^1.0.2",
    "modal-react-native-web": "^0.2.0",
    "moment": "^2.27.0",
    "native-base": "^2.13.14",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-elements": "^2.3.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-google-books": "^1.0.4",
    "react-native-keyboard-aware-scroll-view": "^0.9.2",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-screens": "^2.10.1",
    "react-native-star-rating": "^1.1.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

app.json

{
  "expo": {
    "name": "bindersmobile",
    "slug": "bindersmobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "white"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}
expo react-native android ios
3 Answers

That issue happens if you use a feature of android in react native and run expo in ios. This is what happened to me. I set up styled components:

const SafeArea = styled(SafeAreaView)`
  flex: 1;
  margin-top:${StatusBar.currentHeight}
`;

Since "StatusBar.currentHeight" is android feature I was getting that error in ios. In IOS "StatusBar.currentHeight" was not returning a valid value

I converted the code to this:

const SafeArea = styled(SafeAreaView)`
  flex: 1;
  ${StatusBar.currentHeight && `margin-top:${StatusBar.currentHeight}px`};
`;

This code tells, apply margin-top if "StatusBar.currentHeight" has a value.

user_102628050

I had this exact error on my react native project. Finally figured out it was because I had a string (width: '8') in my styles, where I should have had a number (width: 8).

user_141160680

BEFORE

These codes was giving the error "JSON value of type NSString cannot be converted to a ABI38_0_0YGValue"

const TextInput = styled.TextInput.attrs(props => ({
    type: "text",
    mt: props.mt,
    mb: props.mb,
    radius: props.radius,
}))`
    width: 100%;
    background-color: #f7f7f7;
    border-width: 0px;
    border-radius: ${props => props.radius};
    font-size: 20px;
    padding-horizontal: 20px;
    padding-vertical: 14px;
    margin-top: ${props => props.mt};
    margin-bottom: ${props => props.mb};

`;

AFTER

I had to set default value for props.mt, props.mb and props.radius in case no value was passed to them.

const TextInput = styled.TextInput.attrs(props => ({
    type: "text",
    mt: props.mt || '0px',
    mb: props.mb || '0px',
    radius: props.radius '0px',
}))`
user_170149200
Related