EventEmitter does not works

[pranshuchittora]

Hey I am trying to use the NativeEventEmitter. But that seems not work.

1. I am getting this warning on app initialisation on the JS side.

 WARN  `new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method.
    at Example (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.snackbardemo&modulesOnly=false&runModule=true:122502:36)
    at RCTView
    at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.snackbardemo&modulesOnly=false&runModule=true:59472:43)
    at RCTView
    at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.snackbardemo&modulesOnly=false&runModule=true:59472:43)
    at AppContainer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.snackbardemo&modulesOnly=false&runModule=true:59316:36)
    at SnackBarDemo(RootComponent) (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.snackbardemo&modulesOnly=false&runModule=true:108032:28)

2. The callback is not being called on any snackbar dismiss event.

Here's the code I used.

App.tsx

import React, {Component} from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  NativeEventEmitter,
  NativeModules,
  EmitterSubscription,
} from 'react-native';
import Snackbar from 'react-native-snackbar';

import styles from './styles';

class Example extends Component {
  private eventListener: null | EmitterSubscription = null;
  componentDidMount() {
    const SnackbarEventEmitter = new NativeEventEmitter(
      NativeModules.RNSnackbar,
    );
    this.eventListener = SnackbarEventEmitter.addListener(
      'onSnackbarVisibility',
      event => {
        console.log('EVENTTTT', event.event);
      },
    );
  }

  componentWillUnmount() {
    this.eventListener.remove();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Snackbar Examples</Text>

        <TouchableOpacity
          onPress={() => Snackbar.show({text: 'Hello, World!'})}>
          <Text style={styles.button}>Simple Snackbar</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() =>
            Snackbar.show({
              text: 'Hello, World! How are you doing today? Enjoying the sun?! This should wrap to two lines.',
              duration: Snackbar.LENGTH_LONG,
            })
          }>
          <Text style={styles.button}>Simple Snackbar - two lines</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() =>
            Snackbar.show({
              text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
              duration: Snackbar.LENGTH_LONG,
              numberOfLines: 5,
            })
          }>
          <Text style={styles.button}>Simple Snackbar - extra lines</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() =>
            Snackbar.show({
              text: 'Please agree to this.',
              duration: Snackbar.LENGTH_INDEFINITE,
              action: {
                text: 'AGREE',
                textColor: 'green',
                onPress: () => Snackbar.show({text: 'Thank you!'}),
              },
            })
          }>
          <Text style={styles.button}>Snackbar with action</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() =>
            Snackbar.show({
              text: 'Please agree to this.',
              duration: Snackbar.LENGTH_INDEFINITE,
              textColor: 'blue',
              backgroundColor: 'silver',
              fontFamily: 'Lobster-Regular',
              action: {
                text: 'AGREE',
                textColor: 'blue',
                onPress: () => Snackbar.show({text: 'Thank you!'}),
              },
            })
          }>
          <Text style={styles.button}>Snackbar with style</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() =>
            Snackbar.show({
              text: 'يرجى الموافقة على هذا.',
              rtl: true,
              duration: Snackbar.LENGTH_INDEFINITE,
              action: {
                text: 'يوافق على',
                textColor: 'green',
                onPress: () => Snackbar.show({text: 'شكرا لكم!', rtl: true}),
              },
            })
          }>
          <Text style={styles.button}>Snackbar with RTL text</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() =>
            Snackbar.show({
              text: 'Use a bottom margin to avoid covering navigational elements such as a tab bar.',
              marginBottom: 500,
            })
          }>
          <Text style={styles.button}>Snackbar with bottom margin</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => Snackbar.dismiss()}>
          <Text style={styles.button}>Dismiss active Snackbar</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Example;

styles.ts

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'black',
  },
  button: {
    fontSize: 16,
    textAlign: 'center',
    margin: 10,
    color: 'green',
  },
});

export default styles;

[hyochan]

You should use [email protected]+ which you should manually install instead of npm install react-native-snackbar. #191 is not included in [email protected].+

[cooperka]

Thanks for the reply @hyochan, hopefully that addresses the issue. v2.7.2 is now the default version.