How to make this work with Typescript

[lenguyenthanh]

I'm trying to make this work with a Typescript project but no success.

Here is sample code:

import * as Config from 'react-native-config'
console.log(Config.IS_DEBUG)

// declare file. 
declare module 'react-native-config' {
  
}

It'll have this error message:

[ts] Property 'IS_DEBUG' does not exist on type 'typeof 'react-native-config'

My other try:

import Config from 'react-native-config'
console.log(Config)

// declare file. 
declare module 'react-native-config' {
  export interface NativeConfig {
    [name: string]: any
  }
  export const Config: NativeConfig
  export default Config
}

Object Config is still empty.

Sorry for my naive question and thank you for help.

[lenguyenthanh]

My second try is correct. But I had wrong config for Android and iOS at that time.

[JulianKingman]

Just to follow up, if you want to type the individual values, you can do this:

declare module 'react-native-config' {
  export const ENV_VAR_EXAMPLE: string;
  export const ENV_VAR_EXAMPLE_2: string;
}

and save it anywhere in your project as something like react-native-config.d.ts

[asdolo]

Just to follow up, if you want to type the individual values, you can do this:

declare module 'react-native-config' {
  export const ENV_VAR_EXAMPLE: string;
  export const ENV_VAR_EXAMPLE_2: string;
}

and save it anywhere in your project as something like react-native-config.d.ts

Please be very careful with the above solution from @JulianKingman. With that solution you could wrongly import your environment variables like this:

import { ENV_VAR_EXAMPLE, ENV_VAR_EXAMPLE_2 } from 'react-native-config';

console.log(ENV_VAR_EXAMPLE);
// undefined

console.log(ENV_VAR_EXAMPLE_2);
// undefined

And of course that won't work. If you still want to use that solution, be sure to import your variables like this instead:

import Config from 'react-native-config';

console.log(Config.ENV_VAR_EXAMPLE);
// "something"

console.log(Config.ENV_VAR_EXAMPLE_2);
// "something 2"

---

If you want a better solution, the content of the file react-native-config.d.ts should be something like this:

declare module 'react-native-config' {
  export interface NativeConfig {
    ENV_VAR_EXAMPLE: string;
    ENV_VAR_EXAMPLE_2: string;
  }
  export const Config: NativeConfig;
  export default Config;
}

Then, typescript will warn you if you try to import your environment variables in an incorrect way:

import { ENV_VAR_EXAMPLE, ENV_VAR_EXAMPLE_2 } from 'react-native-config';
// Error: Module '"react-native-config"' has no exported member 'ENV_VAR_EXAMPLE'. Did you mean to use 'import ENV_VAR_EXAMPLE from "react-native-config"' instead?
// Error: Module '"react-native-config"' has no exported member 'ENV_VAR_EXAMPLE_2'. Did you mean to use 'import ENV_VAR_EXAMPLE_2 from "react-native-config"' instead?

console.log(ENV_VAR_EXAMPLE);
// undefined

console.log(ENV_VAR_EXAMPLE_2);
// undefined

[VirtuozTM]

Hello everyone, I have a question regarding this problem because I followed the instructions of @asdolo but it doestn't work...
Indeed, in my node Module I have an index.d.ts that I completed with :

export interface NativeConfig {
  API_KEY: 'azszecz';
  API_URL: 'https://....';
}
export const Config: NativeConfig
export default `Config`

I call this export like that :

import Config from 'react-native-config';
console.log(Config.API_KEY);

Problem : the console returns "undefined". Does anyone has a solution ?

[hyetigran]

Problem : the console returns "undefined". Does anyone has a solution ?

Wrap your exports

declare module 'react-native-config' {
  export interface NativeConfig {
      API_KEY: 'azszecz';
      API_URL: 'https://....';
  }
  export const Config: NativeConfig
  export default Config
}