Why am I getting this Transform error in my iOS simulator?

Question

At first, I was using Expo to run my projects on my physical device which means that it doesn't come with an index.ios.js and index.android.js files upon creating a project (All you get is an App.js file which is equivalent to the aforementioned files).

I then copy and pasted my files/code into a normal React Native project (not Expo ) which means now I do have index.ios.js and index.android.js files. Specifically, I copy & pasted whatever's in App.js into index.ios.js hoping it carries out the same functionality.

I have no idea why it's throwing this me error upon hitting Run to see what will show up on my iOS simulator.

Picture of error included below.

Transform Error

Here's index.ios.js :

import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";

export default class App extends Component {
    render() {
        return(
            <View style={styles.back}>
              <BackGround/>
              <Navigator
                  initialRoute={{id: 'Login'}}
                  renderScene={this.navigatorRenderScene}
              />
            </View>
        );
    }

    navigatorRenderScene() {
        _navigator = _navigator;
        switch(route.id) {
            case 'Login':
                return (<Login navigator={navigator} title="Login"/>);
            case 'CreateAccount':
                return (<CreateAccount navigator={navigator} title="Create Account" />);
        }
    }
}

const styles = StyleSheet.create({
    back: {
        flex: 1
    }
});

Here's BackGround.js :

import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';

class BackGround extends Component {
    render() {
        return(
            <View style={styles.first}>
                <Image style={styles.container} source={require('../pictures/smoke.jpg')}>
                    <View style={styles.second}>
                        <View style={styles.movementTitle}>
                            <Text style={styles.title}>Dendro</Text>
                        </View>
                        <Login/>
                    </View>
                </Image>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)'
    },

    first: {
        flex: 1
    },

    second: {
       paddingTop: 290 // Moves both <TextInput> boxes down.
    },

    title: {
        fontSize: 34,
        textAlign: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        fontFamily: 'Bodoni 72'
    }

    // movementTitle: {
    //     paddingBottom: 34
    // }
});

export default BackGround;

Here's CreateAccount.js :

import React, {Component} from 'react';
import {Text} from 'react-native';

class CreateAccount extends Component {
    render() {
        return(
            <Text>Must get to this page</Text>
        );
    }
}

export default CreateAccount;

Here's Login.js :

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

class Login extends Component {
    onButtonPress() {
        this.props.navigator.push({
            id: 'Create Account'
        });
    }

    render() {
        return(
            <KeyboardAvoidingView behavior={"padding"} style={styles.container}>
                    <TextInput
                        style={styles.input}
                        returnKeyType={"next"}
                        keyboardType={"email-address"}
                        autoCorrect={false}
                        placeholder={"Email"}
                    />

                    <TextInput
                        style={styles.input}
                        returnKeyType={"go"}
                        placeholder={"Password"}
                        secureTextEntry
                    />

                    <TouchableOpacity>
                        <Text style={styles.loginAndCA}>Login</Text>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={this.onButtonPress.bind(this)}>
                        <Text style={styles.loginAndCA}>Create Account</Text>
                    </TouchableOpacity>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 20 // Length of text input boxes.
    },

    input: {
        backgroundColor: '#DAE5FF',
        padding: 20,
        paddingHorizontal: 15,
        marginBottom: 10,
        borderRadius: 15
    },

    loginAndCA: {
        fontSize: 40,
        textAlign: 'center',
        color: 'white',
        fontFamily: 'Bodoni 72 Smallcaps',
        paddingHorizontal: 10
    }
});

export default Login;

Answer 1

When you use standard React-Native you need to register your app with AppRegistry .

If you create a new project react-native-init test and view the index.ios.js or index.android.js files, you will see the below code at the bottom of the file.

AppRegistry.registerComponent('test', () => test);