Customizing developer options in React Native

Question

Can I add custom developer options to my React Native app? For example, I would like to add the ability to change the endpoint to which the application connects, so I can switch between the local host, intermediate content, production, etc. On your mobile phone

Answer 1

With webpack you can use the proccess.environment plugin so that you can use

if (process.env.NODE_ENV === 'dev')  {
  makeYourThingIncludingRequereETC();
}

https://github.com/webpack/docs/wiki/list-of-plugins#environmentplugin

if ('prod' === 'dev') {} prod , - " false".

Answer 2

-

react-native-config

Answer 3

webpack define: https://webpack.js.org/plugins/define-plugin/

, 2 webpack, , dev

new webpack.DefinePlugin({
    PRODUCTION: true)}

, if

if (PRODUCTION) {
    --do your thing }
else {
    -- do your other thing}

Answer 4

- , . React Native __DEV__, , .

iOS - :

, . , , , React Native .

Answer 5

__DEV__ (https://facebook.imtqy.com/react-native/docs/javascript-environment.

:

, , "DeveloperComponent".

...
class DeveloperComponent extends Component {
  ...
  changeEnv(env) { 
    // change used urls/keys/other based on env
  }
  ...
  render() {
    return (
      <View>
        <DeveleoperOption1 onPress={this.changeEnv("prod")} />
        <DeveleoperOption2 onPress={this.changeEnv("dev")} />
        <DeveleoperOption3 onPress={/* do other devlike action */} />
      </View>
    );
  }
}
...

, , , . , "DeveloperComponent" , .

  ...
  return (
    <View style={styles.container}>
      <YourRouterContainer />
      {__DEV__ && <DeveloperComponentTrigger />}      
    </View>
  );
  ...

  ...
  return (
    <View style={styles.container}>
      <SomeOtherSettings />
      {__DEV__ && <DeveloperComponent />}      
    </View>
  );
  ...

, , , devcomponents : " Babel, , DEV, , JavaScript" https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/