I have currently a problem to display image in notification (with an url).
The problem is only on iOS, it works on Android.
I'm using React Native Firebase :
It works on Android but not in iOS.
I have created the Notification Service and i have followed the react-native-firebase documentation and the image still doesn't appear.
NotificationService.m
#import "NotificationService.h"
#import "FirebaseMessaging.h"
#interface NotificationService ()
#property (nonatomic, strong) void (^contentHandler).
(UNNotificationContent *contentToDeliver);
#property (nonatomic, strong) UNMutableNotificationContent
*bestAttemptContent;
#end
#implementation NotificationService
- (void)didReceiveNotificationRequest:(UNNotificationRequest
*)request withContentHandler:(void (^)(UNNotificationContent *
_Nonnull))contentHandler {
self.contentHandler = contentHandler;
self.bestAttemptContent = [request.content mutableCopy];
[[FIRMessaging extensionHelper]
populateNotificationContent:self.bestAttemptContent
withContentHandler:contentHandler];
}
- (void)serviceExtensionTimeWillExpire {
// Called just before the extension will be terminated by the.
system.
// Use this as an opportunity to deliver your "best attempt" at
modified content, otherwise the original push payload will be
used.
self.contentHandler(self.bestAttemptContent);
}
#end
NotificationService.h
#import <UserNotifications/UserNotifications.h>
#interface NotificationService : UNNotificationServiceExtension
#end
I received the notification json with the fcm_options (image) but it doesn't appear.
Info.plist
NotificationService.m
NotificationService.h
Notification Code
Notification Code Bis
Thanks you.
I have the same problem.
I have followed the react-native-firebase documentation
But when "NotivicationService" in my picture is "ImageNotification" created by xcode, It's "OS Deployment Target" is different the main project "Sitesurveillance" "OS Deployment Target"
Before change ImageNotification target 15.2 and main project target 11.0.
I solved it by change "ImageNotification" > "Build Setting" > "OS Deployment Target" like the "Sitesurveiilance" > "Build Setting" > "OS Deployment Target" is 11.0
this is my project build setting
Edited a bit for clarity
Related
I'm following this demo from the FilePond, copied the code to my project and it does work as expected on my desktop but doesn't work on my mobile (iOS) allowing me to only open the camera rather than having an option to select photos from the Camera Roll as well as open the camera. But if I open this demo from the codesandbox on my mobile it does show an option to select photos. So I'm very confused.
I've tried multiple browsers on my mobile (i.e. Safari, Firefox)...
Could anyone please help me to solve this issue, spent already two days trying to find the solution but without any success...
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
v-bind:files="myFiles"
/>
</div>
</template>
<script>
// Import Vue FilePond
import vueFilePond from 'vue-filepond'
// Import FilePond styles
import 'filepond/dist/filepond.min.css'
// Import FilePond plugins
// Please note that you need to install these plugins separately
// Import image preview plugin styles
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
// Create component
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginImagePreview
)
export default {
name: 'FilePondDemo',
data: function() {
return { myFiles: [] }
},
components: {
FilePond
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
I don't really see anything wrong with the code. Is it possible that this is a problem with your test device?
I've just tried the code sandbox link (https://p3v8zoprp7.csb.app) on iOS 15.4 iPhone 13 Mini Simulator + iOS 14.5 iPhone 8 Simulator and it shows me a choice between camera / photo library.
I have created a library in angular which is styled using tailwind. This is then been push to NPM and then imported into a new project, but the css is not getting applied. I have referenced the node-module path in my tailwind.config.ts:
content: [
"./src/**/*.{html,ts}",
'./node_modules/components-name/**/*.{html,js,ts}'
],
What am i missing?
Tailwind is working if i apply it directly to the new application, it just doesn't work with the imported library.
If you expect all depender apps to utilize tailwind, you can use tailwind classes in your library HTML and have them configure a content path of ./node_modules/my-lib/esm2020/**/*.mjs.
It finds the inlined/escaped classes in the Ivy compiled files.
esm2020 to scope the scan.
Update 11/30/22 - allowing the use of #apply in the library
#applys are not resolved in precompiled library code as these files are not processed in that lifecycle.
As a workaround, you can pre-process your components to resolve #apply styles before building the library.
Create a tailwind.config.js to use in the compilation
If your library project has a demo-app (highly suggest for impl testing), could utilize it's config file, unless you've got some crazy config in there. Since we're not rendering #tailwind components or anything, we won't get any excess styles
projects/my-lib/tailwind.config.js
module.exports = {
content: [
'./projects/my-lib/**/*.{html,ts,css,scss}',
],
};
Note the content path is still relative from project root as that's the context it's ran at
Create precompiler process
Tailwind resolve into a new file (mostly so we don't mess things up accidentally locally)
Point component at the new file
import { readFile, writeFile } from "fs";
import { sync } from 'glob';
import { exec } from 'child_process';
const libRoot = 'projects/my-lib/src/lib';
const tailwindConf = 'tailwind.config.js'; // may be apps/demo when using NX
const processedExt = '.precompiled.scss';
const styleRegex = /styleUrls:\s*\[([^\]]+)]/;
// Find all `.scss` files and tailwind process them
sync(`${libRoot}/**/*.component.scss`).forEach(file => {
const cssFile = file.replace(/\.scss$/, processedExt);
exec(`npx tailwind -c ${tailwindConf} -i ${file} -o ${cssFile}`, (err, stdout, stderr) => {
if (err) {
console.error(stderr);
throw err;
}
});
});
// .component.ts update
// Find all components with `styleUrls` and switch `.scss` extension to our precompiled file names
sync(`${libRoot}/**/*.component.ts`).forEach(file => {
readFile(file, (err, data) => {
if (err) throw err;
const content = data.toString();
const match = content.match(styleRegex);
if (match) {
const styleUrls = match[1]
.split(',')
.map(s => s.trim().replace('.scss', processedExt))
.join(', ');
writeFile(file, content.replace(styleRegex, `styleUrls: [${styleUrls}]`), (err) => {
if (err) throw err;
});
}
});
});
This should only be ran by your CI process and never committed.
Also this could easily be switched to javascript instead of typescript
Other possible ways to do this (untested) without the .component.ts update:
Utilize environment.prod.ts's production: true flag to decide the style file to use
styleUrls: [ environment.prod ? 'my.component.precompiled.scss' : 'my.component.scss' ],
Gotta remember this for all new components
Change the tailwind compile to output to the same scss file
Less moving parts - I liked the separate file so I'd realize quickly if it were accidentally ran/committed
Add CI precompile command to package.json
"build:ci": "node --require ts-node/register projects/my-lib/src/precompile.ts && npm run build:my-lib"
Very rough implementation - remove --require ts-node/register if converted to javascript
I use NX workspace, so I added a new target in the library's project.json:
"ci": {
"executor": "nx:run-commands",
"options": {
"command": "node --require ts-node/register libs/my-lib/src/precompile.ts"
}
},
and added a the package.json entry as:
"build": "nx run-many --all --target build",
"build:ci": "npx nx ci && npm run build",
allowing build to still be used locally.
Build and Package/Release as normal
With #apply's resolved, all should flow well
If you used tailwind utility classes in HTML, be sure to see the very beginning of this answer
Tailwindless Depender
If you want applications to be able to utilize your library without them installing tailwind you could supply a stylesheet containing all the helper classes you used.
Create a stylesheet to contain all used utilities
projects/my-lib/style.scss
#tailwind utilities;
Add a postbuild to your package.json to produce the stylesheet, assuming you use npm run build to build the library.
"postbuild": "npx tailwind -c projects/my-lib/tailwind.config.js -i projects/my-lib/style.scss -o dist/my-lib/style.scss",
Direct depender projects to then include this compiled stylesheet:
#import 'my-lib/style.scss'
Note tailwind does not compile SCSS into CSS - need to run through a SASS processor if you want to supply CSS.
Downside of this is all utility classes used in all components are produced, even if the depender app doesn't use them (same happens for projects using tailwind, so not so bad).
Also the depender project may produce duplicate utility classes if using tailwind itself.
Plus side is your library doesn't require the depender to have tailwind.
Note that you still need the above process to resolve #apply's - this only gathers the utility classes used in the HTML
I am building an online course website.
When the user watches a lesson in full-screen mode, I want to remember that, so as to use full-screen mode when I mount react-player with the next lesson. I hoped there would be an onFullscreenMode callback, but the documentation does not list anything of the kind. How can I achieve this?
Edit 1: Based on the reply of #onkarruikar, I tried using screenfull. First, I was surprised that it was not installed although real-player was supposed to use it to enter full-screen mode. After installing the package and importing it, I get the compilation error:
.../node_modules/screenfull/index.js 11:44
Module parse failed: Unexpected token (11:44)
File was processed with these loaders:
.../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| for (const methodList of methodMap) {
> const exitFullscreenMethod = methodList?.[1];
|
| if (exitFullscreenMethod in document) {
Edit 2: I also don't get it why the demo uses a custom button for switching to full-screen mode, whereas I see a button () on the player itself:
The player doesn't have fullscreen inbuilt. It uses screenfull to go full-screen. As per their demo https://cookpete.com/react-player/ full-screen is handled externally by the component users.
You can use following screenfull features directly on your website:
screenfull.isFullscreen //<-- is the browser in fullscreen
screenfull.isEnabled //<-- is the facility available to use
screenfull.request(element);
screenfull.toggle(element);
etc.
Or you can use standard web apis like:
if(document.fullscreenElement) { //<-- is the browser in fullscreen
...
}
document.fullscreenEnabled //<-- is the facility available to use
Document.fullscreenElement / ShadowRoot.fullscreenElement
The fullscreenElement property tells you the Element that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is null, the document (or shadow DOM) is not in full-screen mode.
ref
These apis should work even if you go fullscreen using controls inside player.
Here is a demo website using react: https://gizcx.csb.app/
Corresponding codesandbox code
Also, if you are not playing videos one by one then you can pass full course playlist to the player at once:
<ReactPlayer
url={[
'https://www.youtube.com/watch?v=oUFJJNQGwhk',
'https://www.youtube.com/watch?v=jNgP6d9HraI'
]}
/>
For the benefit of others, this is how it is achieved:
import { findDOMNode } from 'react-dom'
import { toast } from 'react-toastify';
const PlayerComponent = () => {
const [fullscreenMode, setFullscreenMode] = useState(false)
let player = null;
const ref = (p) => {player = p;}
const onStart = () => {
if (fullscreenMode)
findDOMNode(player).requestFullscreen().catch(
(err) =>
{toast.error("Could not activate full-screen mode :(")}
);
}
const onEnded = () => {
setFullscreenMode(document.fullscreenElement !== null);
}
return (
<ReactPlayer
ref={ref}
url="whatever url"
onStart={onStart}
onEnded={onEnded} />);
);
}
As per the instructions at https://rnfirebase.io/docs/v4.3.x/notifications/ios , I added the following to my AppDelegate.m:
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
[[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}
However, I get this error:
No known class method for selector 'instance'
Question 1: Why?
Note: I'm not importing RNFirebaseNotifications.h
The docs for setup react-native-firebase and settings up the Messaging / Notification modules are really confusing.
Import BOTH:
#import "RNFirebaseNotifications.h"
#import "RNFirebaseMessaging.h"
and it should fix your issue.
I'm going through the motions of upgrading a Meteor 1.2 app to 1.3.5.1 and have a large number of console warnings saying something like:
Warning: You are manually calling a React.PropTypes validation function for the direction prop on MosoTabsScroll. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://facebook.github.io/react/warnings/dont-call-proptypes.html for details.
I've read the link, and can't see how it applies to my code, which is pretty straightforward and worked perfectly in Meteor 1.2. For example, here is one of the React classes that is generating warnings:
import React from 'react';
MosoTabsScroll = React.createClass({
propTypes: {
direction: React.PropTypes.string,
active: React.PropTypes.bool
},
getDefaultProps() {
return {
direction: 'left',
active: false,
}
},
render() {
// Set the classNames
var aClasses = 'btn btn-default btn-shadow scroll-';
aClasses += (this.props.active ? "active" : "inactive");
return (
<a className={aClasses} onClick={this.props.onClick}>
<i className={"fa fa-lg fa-chevron-" + this.props.direction}></i>
</a>
)
}
});
The react package.json under node_modules/react says that it is version 15.3.0.
Not exactly an answer, but I've managed to get past these errors by starting from a fresh meteor directory, copying my files into that new directory, and then manually adding back all of the packages that were needed.
So I would put this down to a conflict with some older packages.