Skip to main content
100%

[React Native + RxJS] Create an Observable from DeviceEventEmitter - An example to handle 'locationUpdated' event

✓ Published0🌍 Public
Aalex-milanov
Last edited Oct 28, 2015
Created on May 29, 2016

This example demonstrates how to create an RxJS Observable from React Native’s `DeviceEventEmitter`, enabling reactive handling of the `locationUpdated` event from the `react-native-location` library. It shows the full flow: a factory function wraps `DeviceEventEmitter.addListener` via `Observable.fromEventPattern`, then a second observable applies `.throttle` to limit event frequency and maps raw location coordinates into a simple object. Finally, a subscription logs the transformed location data, with explicit unsubscribe support via `subscription.dispose()`.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist fadcc73c7137e3e731b2dc5a98894add

This example demonstrates a geolocation service that retrieves the user’s current position and exposes it as an observable stream. The code uses Angular’s `@Injectable` decorator and RxJS `Observable.create` to wrap the browser’s `window.navigator.geolocation.getCurrentPosition` API, converting the raw `Coordinates` object (latitude, longitude, and accuracy) into a typed `Coordinates` model. It handles browser support and user rejection errors via a predefined error-message array, completing the observable after a successful position fix. The visualization focuses on the service logic rather than rendering, with no charting or drawing libraries involved.

Aackuser
59% match
Loading thumbnail…

The introduction to Reactive Programming you've been missing

This example demonstrates the core concepts of reactive programming through asynchronous data streams, using a click-event stream on a button as the central illustration. The visualization walks through how streams emit values, errors, and completion signals over time, with diagrams showing event sequences and filtering operations. The code is written in JavaScript with the RxJS library, including APIs like `Rx.Observable.fromEvent` for capturing button clicks and methods such as `map`, `filter`, and `merge` to combine and transform stream data. The accompanying markdown references the original tutorial by André Staltz and includes inline images that depict stream behavior.

Aallyraza
54% match
Loading thumbnail…

Hello Reactor

This example demonstrates a minimal event-driven communication system built with JavaScript. It shows how two listeners attached to the same `'big bang'` event respond to a dispatched payload, with one listener logging a fixed message and the other printing the passed arguments. The code defines a custom `Reactor` class and an `Event` class, showcasing manual event registration, callback storage, and dispatch logic. The implementation relies on JavaScript's array `forEach` method to invoke all registered callbacks with the spread `...eventArgs` syntax. The data originates from a hardcoded dispatch call passing the values `135`, `'test'`, and `[1, 2, 3]`.

MMAKIO135
53% match
Loading thumbnail…

Hook for watching the users current location as geo coordinates.

This example demonstrates a React hook that continuously tracks the user's current geographic coordinates using the browser's Geolocation API. It shows the live position data and any associated error state returned from the device. The hook leverages `navigator.geolocation.watchPosition` to subscribe to location updates, storing results via `useState` and cleaning up with `clearWatch` on unmount. It accepts optional `PositionOptions` to configure accuracy, timeout, and maximum age, making the location stream configurable and reactive within any React component.

Aabonello
52% match
Loading thumbnail…

Gist 526288e386ee2a12ea8160fd56cc3672

This example shows a React Native application that connects a navigator component to a Redux store, enabling navigation state to be managed globally. The code uses `react-navigation`’s `addNavigationHelpers` to bind the navigation object to dispatch actions, while `mapStateToProps` and `mapDispatchToProps` link the Redux state and action dispatcher to the container. The `ApplicationNavigatorContainer` class renders the navigator with the merged navigation helpers, and the `connect` function from React Redux wraps the component to subscribe it to store updates. The data source is the Redux navigation slice, and the rendering approach relies on React Native’s component lifecycle.

Aanosikeosifo
52% match
Loading thumbnail…

Do we really need an event emitter?

This example shows how to replace event-emitter libraries like WildEmitter with native browser APIs. It defines a Vocab model that dispatches a custom `addToVocab` event via `dispatchEvent(new CustomEvent(...))` on the global `window` object, and a VocabView that listens with `addEventListener`. The code demonstrates that `addEventListener` and `dispatchEvent` work globally without needing an emitter instance, using only vanilla JavaScript and DOM events.

Aamundo
51% match
Loading thumbnail…

A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series

This example demonstrates the core concepts of @ngrx/store, a state management library for Angular built on RxJS. It explains the roles of reducers, actions, and the single application store, showing how immutable state flows through a centralized dispatcher and BehaviorSubject. The code highlights APIs such as `scan` for aggregating state, `map` for slicing state, `distinctUntilChanged` for managing updates, and `combineLatest` with `withLatestFrom` for projecting state into views. The accompanying walkthrough applies these patterns to a sample application, including middleware, meta-reducers, and state rehydration on bootstrap.

Aackuser
51% match
Loading thumbnail…

Gist 0377e5f0142844927575a50b922f67ed

This example shows a Redux state-management structure that combines reducers for event data, explore data, and navigation data into a single root reducer. The code uses the `combineReducers` API from the Redux library to merge three feature-specific reducers—imported from `features/events/reducers`, `features/explore/reducers`, and `navigation/reducers`—into one exported object. It does not render any visualization directly; instead, it defines the data-flow backbone that organizes state for an application, likely feeding charts or maps that consume these event, exploration, and navigation datasets. The source is a gist authored by anosikeosifo.

Aanosikeosifo
50% match