conditional_render_ui.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  View
} from 'react-native';



export default class App extends Component {
  state = {
    txtChoosen: ''  // 1 Register yg terpilih, 2 Login yg terpilih
  }

  render() {
    console.log(this.state.txtChoosen)
    return (
      <View style={{ alignItems: 'center', marginTop: 25 }}>

        <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity
            onPress={() => this.setState({ txtChoosen: '1' })}
            style={{ 
              borderRadius: 5,
              backgroundColor: this.state.txtChoosen === '1'? ('grey'): ('white') , width: '30%' }}>
            <Text style={{ color: this.state.txtChoosen === '1'? ('white'): ('grey') , fontSize: 16, margin: 20, textAlign: 'center' }}>Register</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            onPress={() => this.setState({ txtChoosen: '2' })}
            style={{ 
              borderRadius: 5,
              backgroundColor: this.state.txtChoosen === '2'? ('grey') : ('white'), width: '30%' }}>
            <Text style={{ color: this.state.txtChoosen === '2'? ('white'): ('grey'), fontSize: 16, margin: 20, textAlign: 'center' }}>Login</Text>
          </TouchableOpacity>
        </View>


        <View style={{ marginTop: 35 }}>
          {
            this.state.txtChoosen === '1' && (
              <View style={{ 
                width: '90%',
                borderWidth: 1, borderColor: 'grey', borderRadius: 3 }}>
                <Text style={{ margin: 35, fontSize: 35 }}>ABC</Text>
              </View>
            )
          }

          {
            this.state.txtChoosen === '2' && (
              <View style={{ 
                width: '90%',
                borderWidth: 1, borderColor: 'grey', borderRadius: 3 }}>
                <Text style={{ fontSize: 35, margin: 35 }}>DEF</Text>
              </View>
            )
          }
          
        </View>


      </View>
    );
  }
}