How to set rootview in App.js class react native

Need to set Login page as my rootview and used code. if i use the login page details in app.js file getting the result but tried to import login.js in app.js file its not working

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

import LoginPage from './src/pages/Login'; 



type Props = {};
export default class App extends Component<{}> {

  render() {
    return (
      <NavigatorIOS
        // style={styles.container}
        initialRoute={{
          title: 'Login',
          component: LoginPage,
        }}/>
    );
  }
}

and in my login.js class

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

export default class Login extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>Login</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// skip this line if using Create React Native App
AppRegistry.registerComponent('Demo', () => Login);

but it not showing the login page as rootview