Percentage error: "JSON value of type NSString cannot be converted to a YGValue."

[IgorVanian]

Hi,

Since upgrading to 0.10 with RN57, percentage values crash with the following error:

Steps to Reproduce

Use percentage values in styles.

Expected Behavior

Should work as usual?

Actual Behavior

JSON parsing goes nuts

Show the code

...
innerRoot: {
  flexDirection: 'row',
  backgroundColor: 'white',
  justifyContent: 'center',
  borderRadius: 10,
  alignItems: 'center',
  width: '95%',
  height: 50,
  shadowColor: '#000000',
  shadowOffset: {
    width: 0,
    height: 2
  },
  shadowOpacity: 0.2,
  elevation: 2
 },
...

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Memory: 63.27 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.8.0 - /usr/local/bin/node npm: 6.0.1 - ~/.npm-packages/bin/npm Watchman: 4.7.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0 Android SDK: Build Tools: 19.1.0, 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3 API Levels: 19, 22, 23, 25, 26, 27, 8 IDEs: Android Studio: 3.1 AI-173.4720617 Xcode: 10.0/10A255 - /usr/bin/xcodebuild npmPackages: react: 16.5.2 => 16.5.2 react-native: 0.57.1 => 0.57.1 npmGlobalPackages: react-native-cli: 2.0.1

[vitalets]

Hi @IgorVanian! I will re-check. Two questions:

1. If you search the whole project for "95%0" - no entries?
2. Do you use typescript?

[IgorVanian]

@vitalets nope, no entries. I don't use TS.

When I change 95 to for example 90, the error says 90%0.

[vitalets]

Just checked on fresh app via react-native init and npm i react-native-extended-stylesheet. Not reproduced. Could you re-check on fresh app in your env: App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet'; // <-- import stylesheet

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

EStyleSheet.build(); // <-- build styles

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = EStyleSheet.create({
  container: {
    width: '90%', // <-- percent width
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

[IgorVanian]

Never mind, I found the source of the problem: https://github.com/facebook/react-native/issues/11472

[vitalets]

Never mind, I found the source of the problem: facebook/react-native#11472

Ok!

[mccordgh]

@IgorVanian What is the source of the problem? I read through facebook/react-native#11472, but didn't understand as they were talking about Animated.

I am getting JSON value '100%24' of type NSString cannot be convereted.... error only on iPhone X. Android Nexus 5 and iPhone 6, 7 working like normal.

[IgorVanian]

@mccordgh from what I understand, you’re somehow transforming your initial %age value to another or parsing it through something that doesn’t work with string values and that what %ages are. In my case it was animating a %age value in a way it couldn’t be done.

[mccordgh]

Thanks, Igor.

In my instance the issue only arose on iPhone X, and had to do with setting height to "100%" in Header.js theme file...

I was only able to discover this through process of elimination.

[VasylenckoSlava]

Hi @IgorVanian! I will re-check. Two questions:

1. If you search the whole project for "95%0" - no entries?
2. Do you use typescript?

In my case flatListItem: { width: "100", overflow: "hidden", marginBottom: 5, justifyContent: "space-between", borderBottomWidth: 1, borderColor: "grey" }

typo width: "100", i need width: 100

[eniodev]

Thank you @VasylenckoSlava, that was helpful!