react-native error Can't find variable: styles

I am new to React-native . I'm trying to style a view element in my component, and when attempting to apply style tag , I'm getting the following error:
NOTE : My style tag in separate js file
In styles.js

import {Dimensions} from 'react-native';

    const DEVICE_WIDTH= Dimensions.get('window').width;
    const DEVICE_HEIGHT= Dimensions.get('window').height;

    export default {
       container:{
          backgroundColor: 'white',
          flex:1 ,
          width: DEVICE_WIDTH,
          height: DEVICE_HEIGHT,
         }
    };

in Main.js file

import React,{ Component } from 'react';
import { Router,Scene,Actions} from "react-native-router-flux";
import {View} from 'react-native';

import styles from './styles.js'

class Main extends Component{

render(){
    return(
            <View style={styles.container} >
                    <Text>
                        Hello pages
                    </Text>
            </View>

    );
  }
}

 export default Main;

Error screen: