The NativeAppEventEmitter does not return any value

I've been grappling with obtaining a logged in user access token for quite some time. I initially faced challenges with it in JavaScript, so I switched to Objective-C and managed to succeed.

Following that, I referred to this RN guide: https://facebook.github.io/react-native/docs/native-modules-ios.html#sending-events-to-javascript on how to transfer a string from Objective-C to JavaScript, and it appeared to be successful. However, the frustrating part is that it keeps returning as undefined. This annoys me because I can see the proper return of the string in my Objective-C log, but in my JavaScript code after logging in, it reads as undefined.

In AppDelegate.m, here's what I have:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:sourceApplication
                                                             annotation:annotation
                  ];

  NSString *fbAccessToken = [FBSDKAccessToken currentAccessToken].tokenString;

  [self.bridge.eventDispatcher sendAppEventWithName:@"AccessToken"
                                               body:@{@"name": fbAccessToken}];

  NSLog(@"%@", fbAccessToken);

  return handled;
}

This successfully logs a functioning access token. In JavaScript, I trigger the EventEmitter using:

var subscription = NativeAppEventEmitter.addListener('AccessToken');
, which I assume should work since I also referenced this example: https://github.com/facebook/react-native/blob/master/Libraries/Geolocation/Geolocation.js, where it seems they have followed a similar approach like mine.

Simply calling the subscriber provides me with this result:

2016-05-06 10:39:31.013 [info][tid:com.facebook.React.JavaScript] { subscriber: 
   { _subscriptionsForType: 
      { AccessToken: 
         [ { subscriber: [Circular],
             listener: undefined,
             context: undefined,
             eventType: 'AccessToken',
             key: 0 },
           [Circular] ] },
     _currentSubscription: null },
  listener: undefined,
  context: undefined,
  eventType: 'AccessToken',
  key: 1 }

So accessing name or body only gives me undefined.

What am I missing here?

Answer №1

Ensure you capture incoming data by implementing a setup similar to the following (as seen in the documentation example):

const subscription = NativeAppEventEmitter.addListener(
 'AccessToken',
 (token) => console.log(token.name)
);

Keep in mind that calling subscriber directly is not possible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you import folders containing *.vue files in your project?

Repeating code is my least favorite thing. Currently, I am importing vue files in a repetitive manner in my main.js file. import Default from '../../src/components/default.vue'; import Home from '../../src/components/home.vue&apo ...

How can I make $.when trigger when a JSON request fails?

I am currently using the code below to retrieve JSON data from multiple URLs. However, I have noticed that if one of the URLs fails or returns a 404 response, the function does not execute as expected. According to the jQuery documentation, the "then" fu ...

Concealing My CollectionView Cell

I am using a ScrollView with a Collection View inside. The last 3 elements of my collection view are hidden within white space and do not show up when scrolling the ScrollView. They only show up when scrolling the CollectionView. I want to make all Colle ...

The Distinction Between "Q" and "q" in AngularJS and RequireJS

Currently, my project involves developing a single page application using AngularJS, Breeze, and RequireJS. While trying to configure AMD with requirejs to integrate Angular and Breeze, I ran into an issue related to Breeze's dependency on "q". Intere ...

Conceal the title attribute when hovering over a link using javascript/jquery

I have implemented the title attribute for all my links, but I want it to be hidden during mouse hover while still accessible to screen readers. var linkElements = document.getElementsByTagName('a'); for (var index = 0; index < linkElements. ...

Is it possible to implement a goto-like functionality in Node.js or how can one define and invoke a function inside an asynchronous function?

Utilizing puppeteer, I have set up an automated test to fill out a form and verify captcha. In the event that the captcha is incorrect, the web page refreshes with a new image. However, this requires me to reprocess the new image in order to reach the func ...

Issue encountered when attempting to assign an action() to each individual component

I'm facing an issue with the button component I've created. import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-button', template: ` <ion-button color="{{color}}" (click)="action()"&g ...

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

My Goal: I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. The ...

Accessing html form elements using jQuery

I'm having trouble extracting a form using jQuery and haven't been able to find a solution. I've tried several examples, but none of them display the form tags along with their attributes. Here is a sample fiddle that I've created: Sam ...

Achieving a Subset Using Functional Programming

Looking for suggestions on implementing a function that takes an array A containing n elements and a number k as input. The function should return an array consisting of all subsets of size k from A, with each subset represented as an array. Please define ...

Make sure that JSON.stringify is set to automatically encode the forward slash character as `/`

In my current project, I am developing a service using nodejs to replace an old system written in .NET. This new service exposes a JSON API, and one of the API calls returns a date. In the Microsoft date format for JSON, the timestamp is represented as 159 ...

Ways to identify the moment jQuery datatable is initialized and populated with information

I am currently using the most recent version of jQuery datatables. I'm curious if there is a callback function available that triggers right after the data has been loaded and displayed in the table? While experimenting with a datatable in IE8, I hav ...

Error: Headers cannot be set once they have already been sent

My app.js file has the following code snippet: app.use(function(req, res, next){ if(!req.user){ return res.redirect('/login_'); } next(); }) Everything seems correct so far. In my route/index.js file, I have the following code: rout ...

Exploring the syntax of ReactJS state management with setState

Trying to wrap my head around the following syntax in my React app. I am looking to understand how the code inside setState() works. this.getSomePromise().then( // resolve callback function someImg => this.setState(prevState => ( ...

Incorporating Data from a Dictionary into a Highcharts Series

Utilizing flask allows me to organize all my data in a dictionary for use with highcharts. my_data = { 'dataset1': {'x_values': [1, 2, 3, 4, 5, 6], 'y_values': [7, 8, 9, 10, 11, 12]}, ...

AngularJS routing is disrupted by html5mode

Encountering a unique issue while using html5Mode with ngRoute. Here is the relevant snippet of code: (function () { var config = function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'h ...

Error: The react render method is unable to determine the length of an undefined property

I created this component to extract the length of the followers array in order to display the number of followers each user has on their profile. The fetchUser() function is used to call a backend API, and I implemented Redux and Reselect for state managem ...

What methods does Enzyme have for determining the visibility of components?

I am facing an issue with a Checkbox component in my project. I have implemented a simple functionality to hide the checkbox by setting its opacity : 0 based on certain conditions within the containing component (MyCheckbox) MyCheckBox.js import React fr ...

Tips on enhancing SauceLabs javascript queries in your selenium testing for faster speeds?

My experience running Selenium tests on the Chrome browser in SauceLabs has been quite frustrating due to the sluggish performance. One of the major issues I have encountered is the significant delay in javascript queries, taking about 200ms to return res ...

Anticipate feedback from a new user

I'm currently working on a verification system that involves sending a message in one channel and triggering an embed with two emoji options (accept or deny) in another channel. The issue I'm facing is that the .awaitReaction function is getting ...