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!

score 24 · Answer 1 · answered Sep 04 '18 at 17:06

24

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}>

answered Sep 04 '18 at 17:06

ehacinom

8,070
7
43
65

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 – DOZBORNE Dec 26 '22 at 02:33

score 23 · Accepted Answer · answered Feb 25 '16 at 23:23

23

In your fontWeight() function

return weight * 100;

maybe becomes:

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

answered Feb 25 '16 at 23:23

Robert Moskal

21,737
8
62
86

For me the issue was using a string for fontSize. like this: words>. Should just be: fontSize: 18 – Aluminium22 Feb 26 '20 at 16:09

score 3 · Answer 3 · answered May 02 '16 at 09:48

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.

answered May 02 '16 at 09:48

Leon

41
4

score 2 · Answer 4 · answered Sep 12 '18 at 23:56

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();
  }

score 1 · Answer 5 · answered Oct 06 '16 at 19:04

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>

React Native - NSNumber cannot be converted to NSString

5 Answers5

Linked