When we try to separate style files app doesn't render it shows spinner with background all time

Question

image of CMD Before doing it styles were on the same files. We cut all styles and pasted it on the separate file. Here is how it looks like.

import React, {Component} from "react";
import {Dimensions} from "react-native";
const win = Dimensions.get('window');

const styles={
  content: {

  justifyContent:'center'
},

  img: {
    flex: 1,
    alignSelf: "stretch",
    width: win.width,
         height: win.height,

  },


  item:{
borderBottomColor: "#0dc49c"
  },

  icon:{
color: "#a4916c",
 marginLeft: 10,
  marginRight: 5
  },

  input:{
    color: "#a4916c"
  },

  list:{
     borderBottomWidth: 0,
     borderTopWidth: 0,
     borderBottomColor: "#a4916c",
  },

  contacticon: {
    justifyContent: "center",
    alignSelf: "center",
    fontSize: 60,
    fontWeight: "bold",
    color: "#0dc49c",
    marginBottom: 2,
  },
  contacttext: {
    justifyContent: "center",
    alignSelf: "center",
    fontSize: 25,
    color: "#0dc49c",
    marginBottom: 180,
  },

}

module.exports = styles;

When it was on the same files as components it was worked perfectly while because of duplicate styles we decided to separate them. What is wrong? How can it be fixed?

import {styles} from "../styles/file"; looks like this for each element. Also I haven't added 'use strict' hope it is not a reason for that issue. — Syuzanna, Nov 10 '17 at 17:07

score 0 · Answer 1 · answered Nov 15 '17 at 06:51

0

try using styles like this

import { StyleSheet } from "react-native";

 const styles = StyleSheet.create({
 content: {
   justifyContent:'center'
 },
});

module.exports = styles;

and import styles like this

import styles from "../styles/file

answered Nov 15 '17 at 06:51

akhil xavier

1,847
15
15

When we try to separate style files app doesn't render it shows spinner with background all time

1 Answers1