title: react-native error Can't find variable: styles
body: <p>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:
  <br/>
  NOTE :
  <strong>My style tag in separate js file</strong>
  <br/>
  In styles.js
  <br/></p>
  
  <pre><code>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,
           }
      };
  </code></pre>
  
  <p>in Main.js file</p>
  
  <pre><code>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(
              &lt;View style={styles.container} &gt;
                      &lt;Text&gt;
                          Hello pages
                      &lt;/Text&gt;
              &lt;/View&gt;
  
      );
    }
  }
  
   export default Main;
  </code></pre>
  
  <p>Error screen:
  <a href="https://i.stack.imgur.com/NlZRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NlZRh.png" alt="error"></a></p>