react-native-listener-provider

An alternative to react-native-event-listener.

Either one is fine and has no difference in terms of functionality. This library is only made with react/react-native in mind and is created with react hooks and typescript.

Installation

Either npm or yarn works.

npm install react-native-listener-provider

yarn add react-native-listener-provider

Usage

Add this to the root of your project (either index.js or App.js)

import ListenerProvider from 'react-native-event-listener'

// ...

return (
  <ListenerProvider>
    <App />
  </ListenerProvider>
)

Afterwards, you can start using hooks to add listeners and trigger it.

import { useListenerProvider } from 'react-native-event-listener'

// ...

const ExamplePage = (props) => {
  const ListenerProvider = useListenerProvider()

  useEffect(()=>{
    ListenerProvider.addEventListener('example', (data)=>{
      console.log("data", data)
    })
  }, [])

  // ...

  return (
    <View>
      <TouchableOpacity onPress={()=>{
        ListenerProvider.emit('example', 'test')
      }}>
        <Text>Test Button</Text>
      </TouchableOpacity>
    <View>
  )
}

TouchableOpacityListener

It is basically <TouchableOpacity> but instead of manually adding an emit(...) function to it, it will create a listener based on the provided name, then create an emit and merge with your existing onPress props.

import { TouchableOpacityListener } from 'react-native-listener-provider'
import { useListenerProvider } from 'react-native-event-listener'

const ExamplePage = (props) => {
  const ListenerProvider = useListenerProvider()

  useEffect(()=>{
    ListenerProvider.addEventListener('example-button', (data)=>{
      console.log("got button", data)
    })
  }, [])
  //...

  return (
    <View>
      <TouchableOpacityListener name="example-button">
        <Text>Press Me</Text>
      </TouchableOpacityListener>
    </View>
  )
}

API

//import and wrap at top level component
import { ListenerProvider } from 'react-native-listener-provider'

//import hook and custom component
import { useListenerProvider, TouchableOpacityListener } from 'react-native-listener-provider'

Hook methods

Methods/functions returned when using useListenerProvider() hook

| Methods | Parameter | Returns | Description | | :------------------ | :---------------- | :-----------------| :---------------------------------------------------------------------| | addEventListener | string | string | boolean | Returns either a unique event listener id or false if an error occurs | | removeEventListener | string | boolean | True if success, false if fail to remove | | removeAllListeners | void | void | Removes all listeners | | emitEvent | string, any | void | Sends data over a specified event name | | on | string | string | boolean | shorthand for addEventListener | | rm | boolean | boolean | shorthand for removeEventListener | | rmAll | boolean | boolean | shorthand for removeAllListeners | | emit | string, any | void | shorthand for emitEvent |

TouchableOpacityListener Props

Inherits all of TouchableOpacity's props with some additional custom/new props added.

| Name | Type | Required | Default | Description | | ------------------ | -------- | -------- | --------------- | ---------------------------------------------------------- | | name | string | No | touchable-event | Unnamed components will share the same default event name | | onPress | function | No | | |

Notes

There is no restrictions on what kind of data you can pass, so feel free to use strings, numbers, objects, etc.

Contributing

Cookzz (myself)

License

MIT