React Native - NSNumber cannot be converted to NSString

Question

Below is part of my react component. I have a props named daysUntil coming into this component which contains a number. In this example it is being pass the number 0 which results in the fontWeight function returning 700

render: function() {
    return (
      <Text style={this.style()}>
       {this.props.day}
      </Text>
    )
  },
  style: function() {
    return {
      fontWeight: this.fontWeight()
    }
  },
  fontWeight: function() {
    var weight = 7 - this.props.daysUntil;
    return weight * 100;
  }

I get the following error:

JSON value '700' of type NSNumber cannot be converted to NSSTring.

I'm assuming this is because font-weight expects the value to be in string format. What's the proper fix for this?

Thank you in advance!

Healthful

Answer 1

In your fontWeight() function

return weight * 100;

maybe becomes:

var val= weight * 100;
return val.toString();

Amorette

For me the issue was using a string for fontSize. like this: <Text style={{fontSize: '18'}}>words</Text>>. Should just be: fontSize: 18 – Crib

Answer 2

I had a similar problem, where I was passing in an icon instead of a uri to an Image. The code was written to accept icon = 'path/to/icon':

<Image source={{ uri: icon }}>

but I was passing in icon = require('path/to/icon') and I had to switch the jsx to

<Image source={icon}>

Idealistic

I also had this issue. The problem was that I was using a uri as an actual imported asset, rather than just the URI itself. Very helpful – Decasyllabic

Answer 3

fontWeight requires a string value and not an integer.

Just make sure you return a string:

return (weight * 100).toString();

Make also sure that your "weight" variable is not equal to zero.

Trejo

Answer 4

in react font weight should be a string ,

in react doc they have specifically mention that fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

so you can choose like following

const boldText = {
  fontWeigth: '100'
}

or

const boldText = {
  fontWeight: 'bold'
}

in this code you can say

  style: function() {
    return {
      fontWeight: this.fontWeight()
    }
  },
  fontWeight: function() {
    var weight = 7 - this.props.daysUntil;
    return (weight * 100).toString();
  }

Suffruticose

Answer 5

You can use StyleSheet from react-native module, something like this:

import StyleSheet from 'react-native'

// declare the styles using Stylesheet.create
const myStyles = StyleSheet.create({marginTop:30})

//... some code inside render method

<Text style={myStyles}>
        This is an example
</Text>

Fixed