Odtnhj

Please explain why this isn't working. I am trying to replace one element with another on a button press in React, and, according to all documentation, what I am doing should work. However, React is entirely ignoring state changes and refusing to re-render an element. Here is my file:

import React, Component from 'react';
import View, Text, TextInput, TouchableOpacity from 'react-native';
import styles from '../styles';
import User from '../models/User';
export default class SignIn extends Component 
 constructor(props)
 super(props);
 this.state = 
 email: '',
 password: '',
 signIn: '',
 errorMessage: null,
 signUp: true
 
 
 signIn()
 var err = e => this.setState(errorMessage: e.message);
 var next = u => this.props.navigation.push('Details');
 User.login(this.state.email, this.state.password, err, next);
 
 signUp()
 var err = e => this.setState(errorMessage: e.message);
 var next = _ => this.props.navigation.push('Details');
 var user = new User(this.state.email, this.state.password);
 user.save(err, next);
 
 render()
 return (
 <View style=flex: 1, alignItems: 'center', justifyContent: 'center'>
 <View style=flexDirection: 'row', width: 300, justifyContent: 'center'>
 <TouchableOpacity onPress=_ => this.setState(signUp: true) style=[styles.navButton, styles.tabsButton]>
 <Text style=[styles.buttonText, styles.tabs]>Sign Up</Text>
 </TouchableOpacity>
 <TouchableOpacity onPress=_ => this.setState(signUp: false) style=[styles.grey, styles.tabsButton]>
 <Text style=[styles.greyText, styles.tabs]>Sign In</Text>
 </TouchableOpacity>
 </View>
 this.state.signUp && <View>
 <Text style=color: 'red'>this.state.errorMessage</Text>
 <TextInput 
 placeholder='Email' 
 style=styles.input 
 value=this.state.email 
 onChangeText=(email) => this.setState(email)
 />
 <TextInput 
 placeholder='Password' 
 style=styles.input 
 secureTextEntry=true 
 onChangeText=(password) => this.setState(password)
 />
 <TouchableOpacity style=styles.navButton>
 <Text style=styles.buttonText>Sign Up</Text>
 </TouchableOpacity> 
 </View> 
 !this.state.signUp && <View>
 <Text style=color: 'red'>this.state.errorMessage</Text>
 <TextInput 
 placeholder='Email' 
 style=styles.input 
 value=this.state.email 
 onChangeText=(email) => this.setState(email)
 />
 <TextInput 
 placeholder='Password' 
 style=styles.input 
 secureTextEntry=true 
 onChangeText=(password) => this.setState(password)
 />
 <TouchableOpacity style=[styles.navButton]>
 <Text style=styles.buttonText>Sign Up</Text>
 </TouchableOpacity> 
 </View>
 </View>
 )
 

The Sign In button at the top should change the state and cause a Sign In form to appear and the Sign Up form to disappear, while the Sign Up button should do the opposite. If I console.log the state after the change, it has changed, but nothing else happens. What is going on? All documentation shows that you can do this, but it doesn't work for me. I am running the app on an Android phone over Expo.

this.state.signUp 
 ? <View>
 <Text style=color: 'red'>this.state.errorMessage</Text>
 <TextInput 
 placeholder='Email' 
 style=styles.input 
 value=this.state.email 
 onChangeText=(email) => this.setState(email)
 />
 <TextInput 
 placeholder='Password' 
 style=styles.input 
 secureTextEntry=true 
 onChangeText=(password) => this.setState(password)
 />
 <TouchableOpacity style=styles.navButton>
 <Text style=styles.buttonText>Sign Up</Text>
 </TouchableOpacity> 
 </View> 
 : <View>
 <Text style=color: 'red'>this.state.errorMessage</Text>
 <TextInput 
 placeholder='Email' 
 style=styles.input 
 value=this.state.email 
 onChangeText=(email) => this.setState(email)
 />
 <TextInput 
 placeholder='Password' 
 style=styles.input 
 secureTextEntry=true 
 onChangeText=(password) => this.setState(password)
 />
 <TouchableOpacity style=[styles.navButton]>
 <Text style=styles.buttonText>Sign Up</Text>
 </TouchableOpacity> 
 </View>

If this wouldn't work, maybe styles?