iOS

iOS open settings are relatively simple. You can use the Linking component to:

Linking.openURL('app-settings:')
  .catch(err => console.log('error', err))

Android

1. Create the opensettings folder under the Android / APP / SRC / main / Java / COM / < ProjectName > / folder
2. In this folder, create the module file OpenSettingsModule.java (module function) and package file OpenSettingsPackage.java (register our module).
3. In the OpenSettingsModule.java file, fill in the following code:

package com.<projectname>.opensettings; // Remember to change < ProjectName > to your project name

import android.app.Activity;
import android.content.Intent;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReactContextBaseJavaModule;

public class OpenSettingsModule extends ReactContextBaseJavaModule {

  @Override
  public String getName() {
    /**
     * return the string name of the NativeModule which represents this class in JavaScript
     * In JS access this module through React.NativeModules.OpenSettings
     */
    return "OpenSettings";
  }

  @ReactMethod
  public void openNetworkSettings(Callback cb) {
    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {
      cb.invoke(false);
      return;
    }
    try {
      currentActivity.startActivity(new Intent(android.provider.Settings.ACTION_SETTINGS));
      cb.invoke(true);
    } catch (Exception e) {
      cb.invoke(e.getMessage());
    }
  }

  /* constructor */
  public OpenSettingsModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }
}

4. The above module function can open android settings by calling the openNetworkSettings function. Now we need to register this module. Fill in the following code in OpenSettingsPackage.java:

package com.<projectname>.opensettings; // Remember to change < ProjectName > to your project name

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class OpenSettingsPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new OpenSettingsModule(reactContext));

    return modules;
  }

//   @Override
//   public List<<Class>? extends JavaScriptModule> createJSModules() {
//     return Collections.emptyList();
//   }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

5. Provide the package to the getPackages method of MainApplication.java file:

import com.<projectname>.opensettings.*; // Or change to your own project name
...
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new OpenSettingsPackage() /* <---- add here */
  );
}

6. The preparation is completed, and then call:

import { NativeModules } from 'react-native'

export default class App extends Component {
  constructor(props) {
    super(props)
  }

  openSettings() {
    NativeModules.OpenSettings.openNetworkSettings(data => {
      console.log('call back data', data)
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text onPress={this.openSettings}>Open Android Settings</Text>
      </View>
    )
  }
}   

This time, I can open the settings happily~