React Native - File compiling forever (maybe infinite loop?)

Question

I started coding not long ago in React Native and I have stumbled upon this problem that I have been stuck on for over three days. My file compiles forever. The message is "Compiling..." and never ends, and also when it compiles, 100% of my RAM is being used, so I assume it's an infinite loop because the code is small so I don't know what else would be causing my computer to work so hard. Anyways, here is my code:

App.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from './Registration/Registration.js';

class Application extends Component {
    render() {
        return (
            <div>
                <View style={styles.container}>
                    <Registration />
                </View>
            </div>
        );
    }
}
export default Application;

Registration.js

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

class Br extends Component {
    render() {
        return <Text>{'\n'}</Text>;
    }
}
class Register extends Component {
    state = {
        PWshow: false,
        togglePWtext: 'Show Password'
    }
    togglePW = () => {
        if (this.state.PWshow == false) {
            this.setState({ togglePWtext: 'Hide Password' })
            this.setState({ PWshow: true })
        } else {
            this.setState({ togglePWtext: 'Show Password' })
            this.setState({ PWshow: false })
        }
    }
    render() {
        return (
            <View>
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Username" 
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Phone Number" 
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "E-mail" 
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Password" 
                    secureTextEntry = {!this.state.PWshow}
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Re-enter password" 
                    secureTextEntry = {!this.state.PWshow}
                />
                <Br />
                <TouchableOpacity style = {styles.button}>
                    <Text>Register</Text>
                </TouchableOpacity>
                <Br />
                <TouchableOpacity 
                style = {styles.button}
                onPress = {this.togglePW}>
                    <Text>{this.state.togglePWtext}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    textInput: {
        borderWidth: 1,
        borderColor: 'black'
    },
    button: {
        width: 100,
        height: 50,
        borderWidth: 1,
        backgroundColor: 'lightblue',
        borderColor: 'black'
    }
});

export default Register;

What I am trying to do with my code is to create a Registration page.

Answer 1

I found it! Also thanks to Kai, he helped with one thing. I actually had multiple bugs in my code that I haven't noticed. First of all (thanks to Kai), I replaced with because is an HTML element, not a React Native element. Secondly, my class component is called but I referred to it in App.js with . Finally, I removed style = {styles.container} because I didn't define styles in App.js, it was just something that I mistakenly left in there. Once again, thanks to you Kai!