How to view logs (Console.log) after ejecting from expo? - javascript

In my react native app am using expo.In order to implement InAppPurchase feature using expo-in-app-purchases,am ejecting my app using expo eject.Then i running it on my device(ios 14.2).But I am no longer able to see log outputs.where should i see the logs.After ejecting i build the solution with xcode.What i have is:
App.js
componentDidMount = async () => {
console.log("componentDidMount");//this logs
try {
await SplashScreen.preventAutoHideAsync();
} catch (e) {
console.warn(e);
}
connectSocket(store);
const history = await InAppPurchases.connectAsync();
console.log("history", history);//this logs where should i see those logs?
}
If anyone can provide any help or advice would be really appreciated.

Related

(ERROR: internal) Testing Firebase functions using React Native Expo

I'm trying to test my firebase functions in my React Native Expo app. Here's my initialization code:
import { connectFunctionsEmulator, getFunctions } from 'firebase/functions'
// ...Initialize app
export const fucntions = getFunctions()
connectFunctionsEmulator(fucntions, "localhost", 5001)
I then have code which maps functions in an object:
import { httpsCallable } from "firebase/functions";
import { fucntions } from "../../firebase";
export default {
helloFirebase: httpsCallable(fucntions, "helloFirebase")
}
And I call the function as follows:
functionsObj.helloFirebase({ myParam: "Hello!" })
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error.message)
})
But when I call the function I get the following, very small and unspecific error message in the console:
ERROR: internal
I'm guessing it's something to do with not being able to access localhost, but I still don't know how to fix the issue.
Any help would be appreciated, thanks!
FIXED: I found this article on this exact issue.
Make sure to run firebase serve --only functions -o ${YOUR_LOCAL_IP} once you've followed all the steps

When using React Native + Expo, where is the iOS API accessed?

I'm following the Expo tutorial where you build a simple image-sharing application (https://docs.expo.dev/tutorial/image-picker/).
I'm curious where in node_modules is the actual code that accesses the iOS permissions interface.
For example, in app.js I have the following code:
let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
The requestMediaLibraryPermissionsAsync method is located in node_modules/expo-image-picker/build/ImagePicker.js where I find:
export async function requestMediaLibraryPermissionsAsync(writeOnly = false) {
const imagePickerMethod = ExponentImagePicker.requestMediaLibraryPermissionsAsync;
return imagePickerMethod(writeOnly);
}
Going to node_modules/expo-image-picker/build/ExponentImagePicker.js I find:
import { NativeModulesProxy } from 'expo-modules-core';
export default NativeModulesProxy.ExponentImagePicker;
//# sourceMappingURL=ExponentImagePicker.js.map
This is where I'm becoming confused, and I'm not sure how to continue tracing through the modules. I see in node_modules/expo-modules-core/ios/interfaces/Permissions there are objective-c files related to iOS permissions - are these being used in this code example? Where in the code are we actually accessing the iOS API? I have a strong feeling that I'm approaching this question from the wrong angle, so please excuse my ignorance.
I think you have to look at the repository https://github.com/expo/expo/search?q=ExponentImagePicker
Try to find the API names you need.

Use workbox in Jest test

My Vue app has a component that listens to a service worker to determine if the app needs to update. I would like to add a simple test that the component displays like it should. However, I need service workers and workbox working properly in a jest. I got service workers working with service-worker-mock, however I can't find any resources on how to incorporate workbox. Here is my test so far:
import UpdateNotification from '#/components/UpdateNotification.vue';
import { workbox } from 'workbox-sw';
const makeServiceWorkerEnv = require('service-worker-mock');
describe('UpdateNotification', () => {
beforeEach(() => {
Object.assign(global, makeServiceWorkerEnv(), workbox);
jest.resetModules();
});
it('displays', async() => {
require('../../../src/service-worker');
render(UpdateNotification);
});
});
And here is my service worker:
/* eslint-disable no-undef*/
workbox.precaching.precacheAndRoute(self.__precacheManifest);
workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL('index.html'));
My solution so far is breaking at require('../../../src/service-worker'); in the test due to:
TypeError: Cannot read property 'precacheAndRoute' of undefined
1 | /* eslint-disable no-undef*/
> 2 | workbox.precaching.precacheAndRoute(self.__precacheManifest);
That import of { workbox } is just kind of guesswork, and I think that's where I'm going wrong.

Using Shared Worker in React

I have a backend app that constantly serves events to my React app via Web Sockets. When a specific event is received a new browser tab should be opened.
The application will be run by a user in multiple tabs, so I need to open a new tab only once and prevent it from being opened by all running instances.
I've tried using Redux persistent storage, but it doesn't seem to correspond my needs. The best solution that I've found is Shared Workers.
I've tried using Shared Worker in my React app, but I can't set up it properly. It's either being imported incorrectly or Webpack is unable to load it
Uncaught SyntaxError: Unexpected token <
When I googled I haven't found any examples of using Shared Worker in React app (with or without CRA) and at this point, I'm not even sure it's possible. I did found some Web Workers examples, but they have totally different configs.
Can anyone please share some specifics of running Shared Worker in React? Or any other ideas that can provide me with similar functionality will be also greatly appreciated.
Edit: Adding lastest code of what I've tried. Disregard the counter logic, consider just the setup:
worker.js
import React from 'react';
export const startCounter = () => {
window.self.addEventListener("message", event => {
console.log(event.data, self);
let initial = event.data;
setInterval(() => this.postMessage(initial++), 1000);});
}
App.js
import React, { Component } from 'react';
import {startCounter} from './worker';
class App extends Component {
componentDidMount() {
const worker = new SharedWorker(startCounter);
worker.port.start()
// worker.postMessage(this.state.counter);
// worker.addEventListener('message', event => this.setState({counter: event.data}));
}
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
make a file called WebWorker.js which looks like this:
export default class WebWorker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(['('+code+')()']);
return new SharedWorker(URL.createObjectURL(blob));
}
}
and import it to your main file and do this:
const workers = new WebWorker(worker);
workers.postMessage(some message);
Clarifying #Birat's answer: The SharedWorker constructor is looking for a URL, but here you're passing it a function:
const worker = new SharedWorker(startCounter);
Give this a try instead:
const worker = new SharedWorker(new URL('./worker', import.meta.url));

Trying to mock just certain named exports (e.g. PushNotificationsIOS) in react-native with jest

Given I have an implementations files that looks something :
import ReactNative, { PushNotificationIOS, AsyncStorage } from 'react-native';
export function tryNotify() {
PushNotificationIOS.addEventListener('register', token => {
callback(token);
});
PushNotificationIOS.requestPermissions();
}
export function trySave(token) {
AsyncStorage.setItem('blah', token);
}
So if I want to write a test that spies on:
PushNotificationIOS.addEventListener.
However, I can't work out how to mock it, because as soon as I mock react-native...
describe('notify()', () => {
let generator;
beforeAll(() => {
jest.mock('react-native', () => ({
PushNotificationIOS: {
addEventListener: jest.fn(),
requestPermission: jest.fn(),
},
}));
});
afterAll(() => {
jest.unmock('react-native');
});
// No tests yet!
});
...I start getting the following error in my test:
Invariant Violation: Navigator is deprecated and has been removed from this package. It can now be installed and imported from `react-native-deprecated-custom-components` instead of `react-native`. Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html
My best guess is I'm interfering with the inbuilt react-native mocks that jest provides:
The Jest preset built into react-native comes with a few defaults mocks that are applied on a react-native repository.
-jest docs
But I don't know where to look for to confirm this.
Does anyone have experience with this?
Thanks!
Edit
So I have two solutions:
AsyncStorage: the answer below works, as does this SO answer
PushNotificationsIOS: the answer below does not work for me, but this SO answer did
You can't jest.mock('react-native',... because react-native does some slightly nasty things with its exports, such that they can't be imported en-masse by jest or anything else.
You'll need to bypass this by targeting the module more directly:
jest.mock('react-native/Libraries/PushNotificationIOS', () => {})

Categories