React Native trying to use same array globally

July 11, 2024

I am trying to learn React Native and am wondering if there is a way to store an array, say in a constant file or something, and reuse it in different components. States will be one, as an example. I want to create an array of States for a dropdown select component (I am using react-native-element-dropdown for that) and use it in several different components. The array would be like:

const states = [
    { label: 'Alabama', value: 'AL' },
    { label: 'Alaska', value: 'AK' },
    { label: 'Arizona', value: 'AZ' },
    { label: 'Arkansas', value: 'AR' },
    { label: 'California', value: 'CA' },
    { label: 'Colorado', value: 'CO' },
    { label: 'Connecticut', value: 'CT' },
    { label: 'Delaware', value: 'DE' },
];

I’m not even sure there is a way to do this, but everything I have tried so far has errored out with too many renders errors. I have to ask before I start copying and pasting these long arrays 🙂

>Solution :

To achieve what you’re trying to do, you can follow these steps:

Create a constants file to define the array of states.

Import and use the array in your components as needed.

Step 1: Create a constants file

Create a file, for example constants.js, and define your array of states there:

export const states = [
{ label: 'Alabama', value: 'AL' },
{ label: 'Alaska', value: 'AK' },
{ label: 'Arizona', value: 'AZ' },
{ label: 'Arkansas', value: 'AR' },
{ label: 'California', value: 'CA' },
{ label: 'Colorado', value: 'CO' },
{ label: 'Connecticut', value: 'CT' },
{ label: 'Delaware', value: 'DE' },
];

Step 2: Import and use the array in your components.

Now, in any component where you need to use this array, simply import it and use it:

import React from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { states } from './constants';  // Adjust the path according to your project structure

const MyComponent = () => {
    return (
        <View>
            <Dropdown
                data={states}
                labelField="label"
                valueField="value"
                placeholder="Select a state"
                // other necessary props
            />
        </View>
    );
};

export default MyComponent;