I have separated styles.js and app.js for a simple app. And I have image resources defined as global constant variables. (For logos and profiles) I tried to add these constant image resources in styles.js as well. But with my current method and syntax, I can't export these constant image resources from styles.js because they are no defined in styles variable wrapper.

styles.js:

 'use strict'

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

/*
  const background_img= require("../../resource/mybackground.png");
  I tried to define the resource path here
*/

var styles = StyleSheet.create({
   /*Styles Definition*/
});

export default styles

app.js:

'use strict'

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View, Image,
TouchableOpacity, Alert} from 'react-native';
import styles from './styles.js';

/*const background= require("../../resource/mybackground.png");*/
// I want to move this part to styles.js


export class LoginScene extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Image
         style={[styles.background, styles.container]}
         source={background} //I want to replace to styles.background_img
         resizeMode="cover"
      ></Image>
      /*Other view definitions*/
    );
  }
}

export default LoginScene

I've indicated where I want to make my change in the above code with ment. If I want to route the source file as what I did above, what should I change in styles.js so that I can export the constant global variables at the same time with styles variable wrapper?

I have separated styles.js and app.js for a simple app. And I have image resources defined as global constant variables. (For logos and profiles) I tried to add these constant image resources in styles.js as well. But with my current method and syntax, I can't export these constant image resources from styles.js because they are no defined in styles variable wrapper.

styles.js:

 'use strict'

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

/*
  const background_img= require("../../resource/mybackground.png");
  I tried to define the resource path here
*/

var styles = StyleSheet.create({
   /*Styles Definition*/
});

export default styles

app.js:

'use strict'

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View, Image,
TouchableOpacity, Alert} from 'react-native';
import styles from './styles.js';

/*const background= require("../../resource/mybackground.png");*/
// I want to move this part to styles.js


export class LoginScene extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Image
         style={[styles.background, styles.container]}
         source={background} //I want to replace to styles.background_img
         resizeMode="cover"
      ></Image>
      /*Other view definitions*/
    );
  }
}

export default LoginScene

I've indicated where I want to make my change in the above code with ment. If I want to route the source file as what I did above, what should I change in styles.js so that I can export the constant global variables at the same time with styles variable wrapper?

• javascript
• react-native

1 Answer 1

You can export styles as default, then you can also export another variable which can contain a value or an object.

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

export const assets = {
  background: require("../../resource/mybackground.png"),
}

var styles = StyleSheet.create({
   /*Styles Definition*/
});

export default styles;

then you can just import the default and the named exports when needed:

import styles, { assets } from './styles.js';