How to set timer in react-navigation? - react-native

Question

I tried navigate react-native-navigation with timer. So if the value of the timer is '5', navigation to 'Home' is called.
I used ternary operation to call navigation.
import React from 'react';
import {
View,
Text,
Button
} from 'react-native';
import {styles} from './AppStyle'
import {createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './Pages/Home'
class Timer extends React.Component{
constructor(props){
super(props)
this.state = {
time : props.count
}
}
componentDidMount(){
this.addInterval = setInterval( () => this.increase(), 1000)
}
componentWillUnmount(){
clearInterval(this.addInterval)
}
increase(){
this.setState((_state, _props) => ({
time: parseInt(this.state.time) + 1
}))
}
render(){
return(
<Text> {this.state.time} </Text>
);
}
}
class StartScreen extends React.Component {
render(){
return (
<View style={styles.container}>
<View style={styles.navbar}>
<Timer count='0'/>
{this.props.count == '5' ? ()=>this.props.navigation.navigate('Home') : ''}
</View>
</View>
);
};
}
const HomeNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen
}
}
)
const StartNavigator = createStackNavigator(
{
Start: {
screen: StartScreen
},
Main: {
screen: HomeNavigator
}
},
{
mode: 'modal',
headerMode: 'none'
},
{
initialRouteName: 'Start'
}
)
const AppContainer = createAppContainer(StartNavigator);
export default class App extends React.Component {
render() {
return <AppContainer/>
}
}
I expect when count is '5' screen will navigate to 'Home', but i got this issue "Invariant Violation: Invariant Violation: Text Strings must be rendered within a component"

Answer 1

Create an onIncrease prop for your Timer component, rather than directly making the function call within render.
class Timer extends React.Component {
/* component functions */
increase = () => {
const { time } = this.state
const { onIncrease } = this.props
const newTime = time + 1
onIncrease(newTime)
this.setState({ time: newTime })
}
/* render function */
}
class StartScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.navbar}>
<Timer
count={0}
onIncrease={count => {
if (count === 5) {
this.props.navigation.navigate('Home')
}
}}
/>
</View>
</View>
)
}
}

Answer 2

You can also use setTimeout, instead of doing:
{this.props.count == '5' ? ()=>this.props.navigation.navigate('Home') : ''}
you can do
{ setTimeout(()=>{ this.props.navigation.navigate("Home") }, 3000);}