export global variable defined in react styles js file

Question

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 comment. 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?

Alexis Wilke · Accepted Answer · 2018-10-05 16:22:39Z

9

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';

edited Oct 5, 2018 at 16:22

Alexis Wilke

21.2k11 gold badges111 silver badges183 bronze badges

answered May 28, 2017 at 0:29

nicokant

4934 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RandomEli Over a year ago

I see, this works. So it means we can only export json object from other *.js files?

nicokant Over a year ago

Not exactly, you can export variables, constants, functions, classes, arrays, objects. Just remember that you can use only one export default per file. Check out this guide about es6 modules: exploringjs.com/es6/ch_modules.html

Charles Owen Over a year ago

Thanks, this helped me to understand the imporrt of a global variable.

Collectives™ on Stack Overflow

export global variable defined in react styles js file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related