React Native - json value '0' of type nsnumber cannot be converted to nsstring

Question

I am trying to convert a component that works in my React App into React Native. I am getting this error in the ios simulator however: json value '0' of type nsnumber cannot be converted to nsstring' Has anyone run into this before? It seems to be related to styling with everyone else. But I haven't styled yet. Let me know if you need more info, thanks.

import React from 'react';
import { Text, View, Button, Picker } from 'react-native';


const baseMin = [];
for (var i=0; i <= 60; i++) {
    baseMin.push(i);
}

const baseSec = [];
for (var i=0; i <= 60; i++) {
    baseSec.push(i);
}

const displayMinutes = baseMin.map((minute) => 
    <Picker.Item key={minute.toString()} value={minute} label={minute} />
)

const displaySeconds = baseSec.map((second) => 
    <Picker.Item key={second.toString()} value={second} label={second} />
)


class RandomTimer extends React.Component {
    state = { 
            baseMinutes: 0, 
            baseSeconds: 0, 
            varMinutes: 0, 
            varSeconds: 0,
            minutes: 0,
            seconds: 0,
            random: 0
        };

    generate() {


        var min = (this.state.baseSeconds) - (this.state.varSeconds);

        var max = (parseInt(this.state.varSeconds)) + (parseInt(this.state.baseSeconds));

        const randomInt = Math.floor(Math.random() * (max - min + 1) + min);
        this.setState({ random: randomInt });
        this.reset();

    }

    go() {

        this.timer = setInterval(() => {

            if (this.state.seconds == this.state.random) {
                clearInterval(this.timer);

            } else {
                this.setState({ seconds: this.state.seconds + 1 })

            }
        }, 1000)
    }

    stop = () => {
        clearInterval(this.timer);
     }

     reset = () => {
         this.setState({ minutes: 0, seconds: 0 })
         this.stop();
     }

    render() {

        const varMin = [];
        for (var i=0; i <= this.state.baseMinutes; i++) {
            varMin.push(i);
        }
        const displayBaseMin = varMin.map((minute) => 
            <Picker.Item key={minute.toString()} value={minute} label={minute} />
        )

        const varSec = [];
        for (var i=0; i <= this.state.baseSeconds; i++) {
            varSec.push(i);
        }
        const displayBaseSec = varSec.map((second) =>
            <Picker.Item key={second.toString()} value={second} label={second} />
        )

        const { baseMinutes, baseSeconds, varMinutes, varSeconds, minutes, seconds } = this.state;

        return (
            <View>
                <Text>settings</Text>

                <Picker onValueChange={
                    (itemValue) => this.setState({
                        baseSeconds: itemValue
                    })} selectedValue={baseMinutes}>
                    {displayMinutes}
                </Picker>

                <Text>:</Text>

                <Picker onValueChange={
                    (itemValue) => this.setState({
                        baseSeconds: itemValue
                    })} selectedValue={baseSeconds}>
                    {displaySeconds}
                </Picker>

                <Text>VarTime +-</Text>
                <Picker onValueChange={
                    (itemValue) => this.setState({
                        baseSeconds: itemValue
                    })} selectedValue={varMinutes}>
                    {displayBaseMin}
                </Picker>
                <Text>:</Text>
                <Picker onValueChange={
                    (itemValue) => this.setState({
                        baseSeconds: itemValue
                    })} selectedValue={varSeconds}>
                    {displayBaseSec}
                </Picker>
               <Button onPress={this.generate} title='new' />

               <Text>Timer</Text>

                <Text>{minutes}:{seconds}</Text>


                <View>
                    <Button onPress={this.go} title='go' />
                    <Button onPress={this.stop} title='stop' />
                    <Button onPress={this.reset} title='reset' />
                </View>

            </View>
        )
    }
}

export default RandomTimer;

Answer 1

Only thing what you are doing wrong is Picker label should be an string but you are passing a number just replace your {minute} to {minute.toString()} and {second} to {second.toString()}, you need to change this label thing every where you are using.

And change go() to go = () => and generate() to generate = () =>

Hope this helps!