title: React native Required Unknown Module for custom native component
body: <p>I am trying to implement custom native component for ReactNative. As per documentation i created all my components like below. But still i am getting error Required Unknown Module "MyCustomToast". Please help me to resolve this.</p>
  
  <p><strong>SampleToast.java:-</strong></p>
  
  <pre><code>public class SampleToast extends ReactContextBaseJavaModule {
  
  
  public SampleToast(ReactApplicationContext reactContext) {
      super(reactContext);
  }
  
  @Override
  public String getName() {
      return "MyCustomToast";
  }
  
  @ReactMethod
  public void showToast(String message) {
      Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>MakeReactPackage.java:-</strong></p>
  
  <pre><code>public class MakeReactPackage implements ReactPackage {
  @Override
  public List&lt;NativeModule&gt; createNativeModules(ReactApplicationContext reactContext) {
  
      List&lt;NativeModule&gt; modules = new ArrayList&lt;&gt;();
      modules.add(new SampleToast(reactContext));
      return modules;
  
  }
  
  @Override
  public List&lt;Class&lt;? extends JavaScriptModule&gt;&gt; createJSModules() {
      return Collections.emptyList();
  }
  
  @Override
  public List&lt;ViewManager&gt; createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.asList();
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>MainActivity.java:-</strong></p>
  
  <pre><code>public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  
  private ReactInstanceManager mReactInstanceManager;
  private ReactRootView mReactRootView;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      mReactRootView = new ReactRootView(this);
  
      mReactInstanceManager = ReactInstanceManager.builder()
              .setApplication(getApplication())
              .setBundleAssetName("index.android.bundle")
              .setJSMainModuleName("index.android")
              .addPackage(new MainReactPackage())
              .addPackage(new MakeReactPackage())
              .setUseDeveloperSupport(BuildConfig.DEBUG)
              .setInitialLifecycleState(LifecycleState.RESUMED)
              .build();
  
      mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorldBha", null);
  
      setContentView(mReactRootView);
  }
  
  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_MENU &amp;&amp; mReactInstanceManager != null) {
          mReactInstanceManager.showDevOptionsDialog();
          return true;
      }
      return super.onKeyUp(keyCode, event);
  }
  
  @Override
  public void onBackPressed() {
      if (mReactInstanceManager != null) {
          mReactInstanceManager.onBackPressed();
      } else {
          super.onBackPressed();
      }
  }
  
  @Override
  public void invokeDefaultOnBackPressed() {
      super.onBackPressed();
  }
  
  @Override
  protected void onPause() {
      super.onPause();
  
      if (mReactInstanceManager != null) {
          mReactInstanceManager.onPause();
      }
  }
  
  @Override
  protected void onResume() {
      super.onResume();
  
      if (mReactInstanceManager != null) {
          mReactInstanceManager.onResume(this);
      }
  }}
  </code></pre>
  
  <p>And in JS</p>
  
  <p><strong>react-native.js:-</strong></p>
  
  <pre><code>MyCustomToast:require('MyCustomToast'),
  </code></pre>
  
  <p><strong>SampleToast.js:-</strong>   </p>
  
  <pre><code> 'use strict';
  
  /**
   * This exposes the native ToastAndroid module as a JS module. This has a function 'show'
   * which takes the following parameters:
   *
   * 1. String message: A string with the text to toast
   * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
   */
  var { NativeModules } = require('react-native');
  module.exports = NativeModules.MyCustomToast;
  </code></pre>
  
  <p><strong>Index.android.js:-</strong></p>
  
  <pre><code>    /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   */
  'use strict';
  
  var React = require('react-native');
  var toastMessage = require('SampleToast')
  var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      NativeModules
      } = React;
  
  
  
  
  var HelloWorldBha = React.createClass({
      render: function () {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;Text style={styles.welcome}&gt;
                      Welcome to React Native!
                  &lt;/Text&gt;
                  &lt;Text style={styles.instructions}&gt;
                      To get started, edit index.android.js
                  &lt;/Text&gt;
                  &lt;Text style={styles.instructions}&gt;
                      Shake or press menu button for dev menu
                  &lt;/Text&gt;
  
  
                  toastMessage.show('Bharath Kumar');
  
              &lt;/View&gt;
          );
      }
  });
  
  var styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
      },
      welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
      },
      instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
      },
  });
  
  AppRegistry.registerComponent('HelloWorldBha', () =&gt; HelloWorldBha);
  </code></pre>