Using Property JS files in React Native

Question

In React Native, you can have a separate file for styling and access that file from other pages to refer to the stylings.

'use strict';

var React = require('react-native');
const Dimensions = require('Dimensions');
var {
    StyleSheet,
    } = React;

var styles = StyleSheet.create({
    defaultBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
    },
    menuButton: {
        fontSize: 22,
        color: '#ffffff',
        paddingHorizontal: 20,
    },
    container: {
        flex: 1
    }
});

module.exports = styles;

Here this is acquired by "StyleSheet" of React.

Say for a sample like following,

myName: 'Username',
myURL: 'www.google.com',
reactNativeUser: true,
age: 22,

Something like this to be used in a separate file as a property file and to be used across the application.

How to achieve this?

purii · Accepted Answer · 2015-12-15 08:06:16Z

2

Export plain object

You could export a plain object. And create the stylesheet as necessary.

// style.js
export const Style = {
    defaultBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
    },
    menuButton: {
        fontSize: 22,
        color: '#ffffff',
        paddingHorizontal: 20,
    },
    container: {
        flex: 1
    }
}

// component.js
import React, {StyleSheet} from 'react-native';
import {Style as Globalstyle} from 'style'

var styles = StyleSheet.create(Globalstyle);

Maybe I understood your question not correctly. To export those constants you could use the same approach.

//propertyfile.js
export const myName = "Username";
export const myURL = "www.google.com",
export const reactNativeUser = true;
export const age = 22;

//component.js
import {myName, myURL, reactNativeUser, age} from 'propertyfile'

edited Dec 15, 2015 at 8:06

answered Dec 15, 2015 at 7:51

purii

6,4542 gold badges28 silver badges32 bronze badges

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

2 Comments

DSK Over a year ago

where we will be placing this file 'propertyfile.js' in project structure? it should work for ios and android right.

purii Over a year ago

That’s up to you. Next to the component? Just leave out the suffix .ios or .android to use it cross-platform

Collectives™ on Stack Overflow

Using Property JS files in React Native

1 Answer 1

Export plain object

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Export plain object

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related