Cannot update during existing state - react-native

Question

Index.js
I try do launch screen.
export default class LaunchScreen extends Component{
constructor(props){
super(props);
this.state= {
loaded:false
}
}
componentWillMount(){
Thread.load(v => this.setState({loaded:true}));
}
render(){
const { navigate } = this.props.navigation;
return(
<View style={styles.container}>
{this.state.loaded ? navigate("Form")
:
<View style={styles.imageContent}>
<Image style={styles.image}
source={require('../images/launch_icon.png')}/>
</View>
}
</View>
)}}
export default class thread{
static load(cb){
setTimeout(cb,3000);
}
}
when I use these codes I get the warning "can not update during an existing state transition". How to fix it?

Answer 1

You're trying to navigate inside a return, try to change your render code to this:
render(){
const { navigate } = this.props.navigation;
if(this.state.loaded) navigate("Form")
return(
<View style={styles.container}>
<View style={styles.imageContent}>
<Image style={styles.image}
source={require('../images/launch_icon.png')}/>
</View>
</View>
)
}
EDIT: But you should probably do the navigation part inside a shouldComponentUpdate() checking if the nextState.loaded is different from your this.state.loaded and is true, like:
shouldComponentUpdate(nextProps, nextState){
if((nextState.loaded!=this.state.loaded)&&nextState.loaded){
navigate("Form")
return true
}
return false
}

Answer 2

I see a couple problems, but I don't think these are your main problems.
You can only have one default export, so if both classes are actually in a single file, remove the "default" from the thread class.
Pretty sure all class names must begin with a capital letter in React, so change "thread" to "Thread"
But I think your actual problem is that you're calling navigate('Form') directly from within the render. Try adding a handleNavigation class method and calling this.handleNavigation there instead. So you'd be left with something like this...
export default class LaunchScreen extends Component {
state = {
loaded: false
}
componentWillMount() {
Thread.load( () => this.setState({loaded: true}));
}
handleNavigation = () => {
this.props.navigation('Form');
}
render() {
return (
<View style={styles.container}>
{
this.state.loaded
? this.handleNavigation
: <View style={styles.imageContent}>
<Image style={styles.image}
source={require('../images/launch_icon.png')}/>
</View>
}
</View>
);
}
}
export class Thread {
static load(cb){
setTimeout(cb,3000);
}
}