CODEWITHSUNDEEP
androidreact-native
Faisal Bin Mohammad Ali
Faisal Bin Mohammad Ali

Reputation: 441

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: error

Upvotes: 2

Views: 12417

Answers (2)

Shweta Shah
Shweta Shah

Reputation: 107

Issue was solved by correcting spelling of style applied, from

 <View style={style.subcontainer}>,

to

 <View style={styles.subcontainer}>,

because I have 

const styles = StyleSheet.create({
 container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"

  },

Upvotes: 1

Haider Ali
Haider Ali

Reputation: 1285

you need to use StyleSheet.create like this

export default StyleSheet.create({
container: {
    backgroundColor: 'rgb(249, 250, 252)',
  },
})

also check if you are importing styles.js correctly and you also dont need to put .js in import like this

import styles from './styles'

Upvotes: 8

Related Questions