Fichero Constantes React Native

Tiempo de lectura: 2 minutos

Buenas tardes a todos,

En el tutorial de hoy, os voy a mostrar como crear Ficheros con constantes, para que este sea accesible desde cualquier punto de nuestra aplicación y tener todo mas ordenado.

Esto vale tanto para aplicarlo en un componente como en una Screen.

En mi caso lo voy a aplicar en un componente Boton.js

import React from "react";
import { StyleSheet } from "react-native";
import { Button } from 'react-native-paper';

//Componente boton
const Boton = (props) => {

    //Parametros de constructor se pasan por props
    const { texto, onPress } = props;

    return (
        <Button style={[styles.boton]} mode="contained" onPress={onPress} >{texto}</Button>
    )
};

export default Boton;

const styles = StyleSheet.create({
    boton: {
        backgroundColor: '#FF7000',
        marginLeft: 5,
        marginRight:5,
        marginTop: 10,
    },
});

Esto lo que nos nuestra es un componente Botón de la siguiente manera:

Pero lo que nosotros queremos evitar es que tanto en componentes como en screen repitamos código de colores dado que en un momento dado, si decidimos cambiar el diseño de nuestra aplicación, tendríamos que cambiarlo en todas las screen, componentes, etc…

A continuación os muestro como se haría vamos a cambiar el color naranja a blue por ejemplo para que veáis el resultado

1. Creamos en la raiz de nuestro proyecto, una carpeta llamada «constantes» (por ejemplo), y dentro de ella creamos el siguiente archivo «Colors.js» en el cual guardaremos todos los colores que contenga nuestra app:

2. En el fichero Colors.js añadimos lo siguiente:

const azul_general = 'blue';

export default {
    azul_general,
}

Ahora vamos a usarlo en nuestro componente botón, como veis importamos el fichero Colors.js de la carpeta constante para poder acceder a el y en los styles, en vez de usar los colores de manera individual usamos la constante.

import Colors from "../constantes/Colors";

    backgroundColor: Colors.azul_general,

import React from "react";
import { StyleSheet } from "react-native";
import { Button } from 'react-native-paper';

import Colors from "../constantes/Colors";

//Componente boton
const Boton = (props) => {

    //Parametros de constructor se pasan por props
    const { texto, onPress } = props;

    return (
        <Button style={[styles.boton]} mode="contained" onPress={onPress} >{texto}</Button>
    )
};

export default Boton;

const styles = StyleSheet.create({
    boton: {
        backgroundColor: Colors.azul_general,
        marginLeft: 5,
        marginRight:5,
        marginTop: 10,
    },
});

Con lo que quedaría de la siguiente manera:

Pongamos el color que pongamos en todos los lugares donde tengamos esta constante cambiará sin necesidad de ir una a una y por lo tanto, nos aseguramos que se cambie en todos los lugares de nuestra app.

Espero que os guste y os sirva,

¡Buen fin de semana!