Errors

JSON value "5" of type NSNumber cannot be converted to Nsstring

log item in FlatList more than 4 item maybe 20

GetData.js

import distance from '@turf/distance';
import _ from 'lodash';
import React, {Component} from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import firebase from 'react-native-firebase';
import Icon from 'react-native-vector-icons/Ionicons';
import RightArr from '../components/categoriesIcons/RightArr';
let {width, height} = Dimensions.get('window');

class MapScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUser: null,
      error: null,
      RecommendedProviders: [],
    };
  }

  componentDidMount() {
    this._recommendedProvider();
  }
  
  _recommendedProvider = () => {
    firebase
      .database()
      .ref('recommendationProviders')
      .once('value')
      .then(snapshot => {
        let provider = [];
        snapshot.forEach(childSnapshot => {
          // provider.push(childSnapshot.val());
          provider.push({
            gKey: childSnapshot.key,
            id: childSnapshot.val().id,
            username: childSnapshot.val().username,
            service: childSnapshot.val().service,
            aboutMe: childSnapshot.val().aboutMe,
            coordinates: {
              longitude: childSnapshot.val().coordinates.longitude,
              latitude: childSnapshot.val().coordinates.latitude,
            },
            city: childSnapshot.val().city,
            mobileNumber: childSnapshot.val().mobileNumber,
            token: childSnapshot.val().token._55,
          });
        });
        this.setState(
          {RecommendedProviders: provider},
          () => console.log('object', this.state.RecommendedProviders)
        );
      });
  };

  
  render() {
    const {region} = this.state;
    return (
      <View style={styles.container}>
        <Text
          style={{
            zIndex: 99,
            fontSize: 18,
            padding: 5,
            position: 'absolute',
            bottom: 90,
            color: '#000',
          }}>
          Recommended Providers
        </Text>
<FlatList
          horizontal
          keyExtractor={(item, index) => 'item' + index}
          style={{
            backgroundColor: '#f9f9f9',
            position: 'absolute',
            bottom: 0,
            paddingTop: 30,
            paddingBottom: 5,
          }}
          data={this.state.RecommendedProviders}
          renderItem={({item}) => {
            console.log('@item/', item);
            return (
              <View>
                <TouchableOpacity
                  onPress={() => {
                    this.props.navigation.navigate(
                      'RecommendedProviderProfile',
                      {
                        providerId: item.id,
                        providerName: item.username,
                        providerService: item.service,
                        gKey: item.gKey,
                        token: item.token,
                        aboutMe: item.aboutMe,
                        city: item.city,
                        mobileNumber: item.mobileNumber,
                      },
                    );
                  }}>
                  <View
                    style={{
                      elevation: 2,
                      shadowColor: '#eee',
                      shadowOffset: 5,
                      flexDirection: 'row',
                      alignItems: 'center',
                      margin: 5,
                      padding: 7,
                      backgroundColor: 'white',
                      borderRadius: 8,
                      width: 200,
                      height: 80,
                    }}>
                    <View>
                      <Icon name="ios-contact" size={50} color="#4d8dd6" />
                    </View>
                    <View
                      style={{
                        alignItems: 'flex-start',
                        justifyContent: 'space-around',
                        height: 70,
                        flex: 1,
                        marginLeft: 15,
                      }}>
                      <Text style={{color: '#000'}}>{item.username}</Text>
                      <Text style={{color: '#000'}}>{item.service}</Text>
                    </View>
                    <View
                      style={{
                        flex: 1,
                        alignSelf: 'center',
                        flexDirection: 'row-reverse',
                      }}>
                      <RightArr height="32pt" width="32pt" />
                    </View>
                  </View>
                </TouchableOpacity>
              </View>
            );
          }}
        />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },
});
export default MapScreen;

package.json

{
  "name": "App",
  "version": "1.12.3",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "clear": ". scripts/Clear.sh"
  },
  "dependencies": {
    "firebase-admin": "^8.1.0",
    "firebase-functions": "^3.0.1",
    "lodash": "^4.17.15",
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-firebase": "^5.5.6",
    "react-native-gesture-handler": "^1.4.1",
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/parser": "^7.4.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "24.8.0",
    "eslint": "^6.5.1",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-devtools": "^3.6.1",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}