I am new in react native. I've been dealing with this big project, that contains too many strings that can be reused many places in the project. So I created a strings.js file , as in android's strings.xml, to store all reusable strings in one file like this,

export const SOME_STRING = 'Some value';
export const ANOTHER_STRING = 'Another value';
...

and imports whenever i needed.

So these are my questions...

1) Is this a good approach ?

2) Is there any alternative to this ?

I am new in react native. I've been dealing with this big project, that contains too many strings that can be reused many places in the project. So I created a strings.js file , as in android's strings.xml, to store all reusable strings in one file like this,

export const SOME_STRING = 'Some value';
export const ANOTHER_STRING = 'Another value';
...

and imports whenever i needed.

So these are my questions...

1) Is this a good approach ?

2) Is there any alternative to this ?

• javascript
• reactjs
• react-native
• ecmascript-6

4 Answers 4

You don't need to export each value. One better way I know is to export

const SOME_STRING = 'Some value';
const ANOTHER_STRING = 'Another value';

module.exports = {
 SOME_STRING:SOME_STRING,
 ANOTHER_STRING:ANOTHER_STRING
}

Or you may like to wrap all of this in 1 constant object

const APPLICATION_CONSTANTS = {
    SOME_STRING : 'Some string',
    ANOTHER_STRING : 'Another string'
}

export default APPLICATION_CONSTANTS;

Usage

import APPLICATION_CONSTANTS from './strings';

APPLICATION_CONSTANTS.SOME_STRING

I am assuming you are using a lot of string because of styling. I do the same thing where I try to extract the maximum amount of styling information to a separate folder with different styling files. Not only variables, but commonly grouped styles as well.

For example:

const styleVariables = {

  // Fonts
  baseFontSize: 16,
  largeFontSize: 24,

  // Icons
  smallIconSize: 24,
  mediumIconSize: 36,

  // Colors
  mainColor: '#e85e45',
  secondaryColor: '#a0c5d8',
  offWhite: '#f4f4f4',
  darkColor: '#404040',

  // Dimensions
  headerHeight: 70,
  shadowSize: 6
};
export default styleVariables;

And I reference my variables in other styling files where related information is grouped:

/* presentation.js */
import variables from './variables';

export const shadow = {
  shadowColor: variables.darkColor,
  shadowRadius: variables.shadowSize,
  shadowOpacity: 0.35,
  shadowOffset: {width: 0, height: 0}
};

export const centered = {
  alignItems: 'center'
  justifyContent: 'center'
}

And in then in my components I just reference my styles:

import variables from './../styles/variables';
import {centered, shadow} from './../styles/presentation';

class RoundButton extends React.PureComponent {

  render() {
    return (
        <View style={styles.button}>
          {this.props.children}          
        </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    width: variables.buttonSize,
    height: variables.buttonSize,
    borderRadius: variables.buttonSize / 2,
    ...centered
    ...shadow
  }

For text styles and common presentations this really reduces code, and allows for easy modification in just one place.

Simple just you need to create one constantString.js file, and whenever you want to use string from the constantString.js file just import in particular file.

constantString.js:

module.exports = {
    SOME_STRING : 'Some string',
    ANOTHER_STRING : 'Another string'
}

Use is something like:

import constStr from './constantString';
console.log(constStr.SOME_STRING); // Some string
console.log(constStr.ANOTHER_STRING); // Another string

You can use react-intl to play with strings, dates and numbers. which will provide default functions to handle your data.

import { defineMessages } from 'react-intl';
const messages = defineMessages({
 SOME_STRING : 'Some value',
 ANOTHER_STRING : 'Another value',
});
export default messages;

learn more about react-intl library