How can I show the timer current value when the button is clicked in react-native?

Question

I have a react-native project. I have added a Component called a timer to my project. I call my timer in ComponentDidMount on the web. This part works fine.

In the Native (ios) part, I get the values I entered in the textbox. So when I click the button my counter has to start. I get my counter start value from the database. It works fine for the first time when I click the button.

However, when I exit and click the button many times, it does not count back from the correct value because it does not enter componentdidmount. I perform my operations in JoinRoom function. (button click). It calculates the value correctly every time I click the button. But when writing on the screen, it is wrong. In short, I have a problem not calculating the value but showing it on the screen.

I'll be happy if you can help me.

this is my Timer component;

import React, { Component } from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TouchableOpacity, Dimensions, } from 'react-native';

import { RTCPeerConnection, RTCIceCandidate, RTCSessionDescription, RTCView, MediaStream, MediaStreamTrack, mediaDevices, registerGlobals } from 'react-native-webrtc'; class Timer extends Component {

constructor(props) {

  super(props);


    this.state = {  
       seconds: this.props.timerxx,
    };


  
}
componentDidMount() { 
  if(this.state.seconds>0){
    this.interval = setInterval(() => this.tick(), 1000);
  }
}
tick() {

  this.setState(state => ({
    seconds: state.seconds - 1,
  }));

  
  var date = new Date(0);
  date.setSeconds(this.state.seconds); 
  this.timeString = date.toISOString().substr(11, 8);


  if(this.state.seconds==0){
    console.log('geldi',this.state.seconds);

    //window.location.reload();
  }
}

componentWillUnmount() {  
  clearInterval(this.interval);
}

render() {
    return (
      <View>
        <Text>
        Kalan Süre :  {this.timeString}
        </Text>
      </View>
      );
}

} export default Timer

joinRoom = () => { this.tmr = } this is my button click function. i am calling this; render(){ return ({ this.tmr })}

Answer 1

Not sure about your problem but are you using the state to handle the changing value? Could be the solution.