react-native-listener-provider v1.1.1

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

TouchableOpacityListener Props

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

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