Error while updating property 'fontSize' in shadow node of type: RCTText

Question

I have deleted node_modules and rerun npm install. After that i got this error:

Error while updating property 'fontSize' in shadow node of type: RCTText
Value for fontSize cannot be cast from String to Double

I change all fontSize in form of fontSize:'20' to fontSize:20 but the error showing again. Now I removed fontSize property in all files and again error exist. here is my package.json content:

{
"name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "jetifier": "^1.6.4",
    "native-base": "^2.13.8",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-dialog": "^5.6.0",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-ionicons": "^4.6.3",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-responsive-screen": "^1.3.0",
    "react-native-slideshow": "^1.0.1",
    "react-navigation": "^3.13.0"
  },
  "devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/runtime": "7.4.4",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  }
}

UPDATE: MainPage of the app:

import React, { Component } from 'react';
import { View, Text,StyleSheet,Image,TouchableWithoutFeedback } from 'react-native';
import Slideshow from 'react-native-slideshow';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import Colors from '../Colors';
import Strings from '../Strings';
import DrawerNavigator from '../routes/DrawerNavigator';
class AppMainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
        position: 0,
        interval: null,
        dataSource: [],
        sliderSource:[]
      };
  }
  componentDidMount(){
    this.fetchSliderImage();
  }
  componentWillMount() {
    this.setState({
      interval: setInterval(() => {
        this.setState({
          position: this.state.position === this.state.dataSource.length-1 ? 0 : this.state.position + 1
        });
      }, 2000)
    });
  }

  componentWillUnmount() {
    clearInterval(this.state.interval);
  }
  getAuthAndReload(){
    ajax.fetchAuth().then(()=>{this.fetchSliderImage()});
  }
  async fetchSliderImage(){
    try{
      let response = await fetch(Strings.baseUrl+'spanser/new?type=1&ostanId=1', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' +Strings.id_token
        }
        }).then((resp) => {
          return resp.json()
      })
      .then((responseJson) => {
        const json_data = responseJson; 
        if("title" in responseJson && responseJson.title=="Unauthorized" ){
          this.setState({loadData:1},()=>this.getAuthAndReload());
          return 0;
        }
        else{
          const arr = Object.keys(json_data).map(function(_) { return json_data[_]; });
          var resultArray=new Array();
          for(i=0;i<arr.length;i++){
            resultArray.push({'title':arr[i].title,'caption':'','url':Strings.imageUrl+arr[i].image1});
          }
            this.setState({sliderSource:resultArray,dataSource:arr});
          return arr;
        }
      });
      } 
    catch (error) {
        console.error(error);
    }
  }
  onImageClick(){
    console.log('&&'+this.state.dataSource[0]);
    console.log('******'+this.state.position);
    this.props.navigation.navigate('SponserPage',{currentItem:this.state.dataSource[this.state.position]})
  }
  render() {
    return (
      <View style={{backgroundColor:'black',flex:1}}>
        <DrawerNavigator/>
        <View style={styles.rowViews}>
            <View style={styles.columnViews}>
                <Image  style={styles.imgStyle} source={require('../Icons/play-button.png')}/>
                <Text style={styles.txtStyle}>ویدیوی ویژه</Text>
            </View>
            <View style={styles.columnViews}>
                <Image  style={styles.imgStyle}  source={require('../Icons/star.png')}/>
                <Text style={styles.txtStyle}>پیشنهادهای ویژه</Text>
            </View>
            <View style={styles.columnViews}>
                <Image  style={styles.imgStyle}  source={require('../Icons/irandokht.png')}/>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate('SalonList')}>
                  <Text style={styles.txtStyle}>لیست سالنها</Text></TouchableWithoutFeedback>
            </View>
        </View>
        <View style={{width:'100%',height:2,backgroundColor:Colors.yellow}}/>
        <View style={styles.rowViews}> 
            <View style={styles.columnViews}>
                <Image  style={styles.imgStyle}  source={require('../Icons/trophy.png')}/>
                <Text style={styles.txtStyle}>برندگان مسابقات</Text>
            </View>
            <View style={styles.columnViews}>
                <Image  style={styles.imgStyle}  source={require('../Icons/trophy(1).png')}/>
                <Text style={styles.txtStyle}>سالن برتر ماه</Text>
            </View>
            <TouchableWithoutFeedback style={styles.columnViews} onPress={()=>this.props.navigation.navigate('Mosabeqat')}>
            <View >
                <Image  style={styles.imgStyle}  source={require('../Icons/medal.png')}/>
                <Text style={styles.txtStyle}>شرکت در مسابقه </Text>
            </View>
            </TouchableWithoutFeedback>
        </View>
        <View style={styles.rowViews}> 
        <View style={styles.columnViews}>
                <Image  style={styles.imgStyle}  source={require('../Icons/contact.png')}/>
                <Text style={styles.txtStyle}>ارتباط با ایران دخت</Text>
            </View>
            <TouchableWithoutFeedback style={styles.columnViews} onPress={()=>this.props.navigation.navigate('MajaleyeTakhasosi')}>
              <View >
                  <Image  style={styles.imgStyle}  source={require('../Icons/open-magazine.png')}/>
                  <Text style={styles.txtStyle}>مجله تخصصی</Text>
              </View>
            </TouchableWithoutFeedback>

            <View >
                <Image  style={styles.imgStyle}  source={require('../Icons/newspaper.png')}/>
                <TouchableWithoutFeedback style={styles.columnViews} onPress={()=>this.props.navigation.navigate('NewsNav')}>
                  <Text style={styles.txtStyle}>اخبار مهم</Text>
                </TouchableWithoutFeedback></View>
        </View>
        <View  style={styles.columnViews}>
        {this.state.sliderSource.length>0?
          <Slideshow 
          containerStyle={{padding: 10,}}
          dataSource={this.state.sliderSource}
          position={this.state.position}
          resizeMode='contain'
          onPositionChanged={position => this.setState({ position:position })} 
          onPress={()=>{this.onImageClick()}}/>
          :
          <View/>
          }
        </View>
      </View>
    );
  }
}
const styles=StyleSheet.create(
    {
        rowViews:{
            flexDirection:'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            margin:10,
            flex:1
        },
        columnViews:{
            flexDirection:'column',
            justifyContent: 'center',
            alignItems: 'center',
            margin: 5,
        },
        txtStyle:{
            fontFamily: 'BYEKAN',
            color:'white'
        },
        imgStyle:{
            height:hp('20%'),
            width:wp('20%'),
            resizeMode:'contain'
        }
    }
)
export default AppMainPage;

I don't know how to fix error. thanks for any help these are photo of error:

Answer 1

this can be solved be using:

fontSize: 20

instead of:

fontSize: "20px" 

or

fontSize: '20px' 

..apparently its expecting a number and not a string. PS, string works well on the iOS device but gives error on the Android device.

If you have a package.lock file or yarn.lock, delete it, delete the node_modules folder and run

npm cache clean --force

then run:

npm install or yarn install

Answer 2

It takes number not string ex. fontSize:19,

Answer 3

I had the same problem, but I discovered that I should use only double quotes "" Always use Double in your style.

const styles=StyleSheet.create(
    {
        rowViews:{
            flexDirection:"row",
            justifyContent: "space-between",
            alignItems: "center",
            margin:10,
            flex:1
        },
        columnViews:{
            flexDirection:"column",
            justifyContent: "center",
            alignItems: "center",
            margin: 5,
        },
        txtStyle:{
            fontFamily: "BYEKAN",
            color:"white"
        },
        imgStyle:{
            height:hp("20%"),
            width:wp("20%"),
            resizeMode:"contain"
        }
    }
)

Answer 4

Somewhere you are changing your fontSize from string to double it could be text as well icons if you are using icons somewhere, I was having the same issue solved giving equivalent datatype to every where i'm using font or icons

Answer 5

1. react-native link.

2. I have deleted the previous line of code where I got this error and ran server again add the code and run server.

By this issue resolved for me.