Phonegap Build , using Firebase, notification icon is just white/grey square - push-notification
Lots of people have been asking about this issue but all the solutions now seem to be outdated. I tried all the solutions but it's still not working for me using Phongap Build CLI9.0.0, Firebase Cloud for push notifications and phonegap-plugin-push 2.1.3.
I can add icons to my app with no problem. The correct logo is shown as expected when installing and loading the app up. However when I receive a push notification the icon in the tray area is just a white/grey square.
So far here's what I've tried:
My icon is a white circle with a transparent background.
It is called notification_icon.png.
I have made 6 different sized versions to meet the ldpi, hdpi etc requirements.
I have added the icon name to the push notification init like so...
var push = PushNotification.init({
android: {
senderID: senderId,
iconColor: "#e73439",
alert: true,
badge: true,
icon: 'notification_icon',
sound: true,
vibrate: true,
},
ios: {
senderID: senderId,
iconColor: '#e73439',
alert: true,
badge: true,
icon: 'notification_icon',
sound: true,
vibration: true,
},
windows: {}
});
I have added all variants of the icon to my config.xml like so (the first 6 are my logo icons, not the notification icon)...
<platform name="android">
<icon density="ldpi" src="icons/android/icon36x36.png" />
<icon density="mdpi" src="icons/android/icon48x48.png" />
<icon density="hdpi" src="icons/android/icon72x72.png" />
<icon density="xhdpi" src="icons/android/icon96x96.png" />
<icon density="xxhdpi" src="icons/android/icon144x144.png" />
<icon density="xxxhdpi" src="icons/android/icon192x192.png" />
<icon src="icons/notification_icon96x96.png" target="res/drawable/notification_icon.png" />
<icon density="ldpi" src="icons/notification_icon36x36.png" target="res/drawable-ldpi/notification_icon.png" />
<icon density="mdpi" src="icons/notification_icon48x48.png" target="res/drawable-mdpi/notification_icon.png" />
<icon density="hdpi" src="icons/notification_icon72x72.png" target="res/drawable-hdpi/notification_icon.png" />
<icon density="xhdpi" src="icons/notification_icon96x96.png" target="res/drawable-xhdpi/notification_icon.png" />
<icon density="xxhdpi" src="icons/notification_icon144x144.png" target="res/drawable-xxhdpi/notification_icon.png" />
<icon density="xxxhdpi" src="icons/notification_icon192x192.png" target="res/drawable-xxxhdpi/notification_icon.png" />
</platform>
I even tried adding the icon to the FCM payload like so...
$notification = array
(
'body' => $message,
'title' => $titlenotification,
"icon" => 'notification_icon',
"content_available" => "1",
"image" => "push_notification" ,
"icon" => "push_notification" ,
"color" => "#e73439" ,
);
$data = array
(
"title" => $titlenotification,
"message" => $message,
"content_available" => "1",
);
$fields = array
(
'registration_ids' => $registrationtokens,
'notification' => $notification,
'data' => $data,
"priority" => "high",
"content_available" => true,
);
....etc
I am using Phponegap build to compile so I can't edit any other xml parts, just config.xml.
the only way I have had it work so far is if I removed my other logo icons and just use the notification icon - but then the notification icon is displayed as the main icon too.
I thought that perhaps just the smaller icons would be used as the notification icons so I tried using the notification icon for the ldpi, mdpi and hdpi and the main logo for the xhdpi, xxhdpi and xxxhdpi but no matter what I try the result is either the notification_icon works but it is also used as the logo when loading up the App, or the notification icon is ignored, the logo is used as the loading up icon and the white/grey square is used for the notification icon.
Can anyone help?
I've figured it out. The solution took far too long to find, but in essence it is really simple. To help anybody else with the same issue (it's 2019, Android target SDK is 28), using Phonegap Build 2, Phonegap cli-9.0.0, and using Firebase (FCM) push notification:
1) Remove your custom notification icon from the PushNotification.init javascript. You should only be adding your senderID there. The rest is now handled by your push payload
2) In your payload (I'm using my own PHP notification sender, following the Firebase API info), under the "notification" parameter add your custom icon name:
$notification = array
(
'body' => $message,
'title' => $titlenotification,
"icon" => 'notification_icon',
"content_available" => "1",
"iconColor" => "#e73439",
);
3) Ensure your icon is a white shape with a transparent background. Save as png. Make sure the name exactly matches your "icon" value. In this case: notification_icon.png
4) Create all density versions of your icon. You can do this by going here: https://romannurik.github.io/AndroidAssetStudio/index.html ....this will create all necessary sizes.
5) Save your icons in their respective folders (eg. /drawable-mdpi/notification_icon.png). Put these folders in the following place locally:
/your-project-folder/www/locales
6) in your config.xml add the following lines (assuming notification_icon.png is the name of your image)
<platform name="android">
<resource-file src="locales/android/notification_icon.png" target="app/src/main/res/drawable/notification_icon.png" />
<resource-file src="locales/android/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
<resource-file src="locales/android/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
<resource-file src="locales/android/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
<resource-file src="locales/android/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
<!-- Configure Firebase -->
<config-file parent="/manifest/application" target="AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/notification_icon" />
</config-file>
</platform>
...note the target values, and the extra config-file bit at the end. Very important parts.
This works for me on Android 6,7,8 and 9. Ios notifcation icons are a mystery to me, I don't think Phonegap currently supports this but, whatever, it works on Android.
More info can be found here: https://arnesson.github.io/cordova-plugin-firebase/docs/NOTIFICATIONS.html
Related
Nextjs Image an issue with "loader" property that does not implement width
This is my code for the Nextjs Image component:
... Cell: ({ value }: CellType) => (
<Image
priority
src={value}
loader={() => value}
className={''}
height={100}
width={100}
alt={'profile_picture'}
/>
),
Does it mean I need a custom loader function to get rid off the warning? Thanks!
I had a same issue like yours and solved by adding unoptimized={true} prop into the <Image> tag.
If you don't apply optimizations, you need to announce that you don't optimize.
Something like below:
<Image
priority
src={value}
loader={() => value}
unoptimized={true} // <=== insert this prop
className={''}
height={100}
width={100}
alt={'profile_picture'}
/>
Please let me know if it work.
Thank you.
I had the same error but what I have done to fix it is to incorporate in the next.config.js file the URL of my media files, in my case it is cloudinary, the file should look like this:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: [
'res.cloudinary.com'
],
},
}
module.exports = nextConfig
And when I use the image component (next/image) I remove the loader and just put the URL like this:
<Image
key={element.id}
src={element.url}
width={500}
height={500}
alt="some description"
/>
I don't use unoptimized={true} because the point is that the component changes the quality of the image according to the client's device.
good look :)
Switching between LTR and RTL using styled-components?
I'm building an English-Arabic app with next.js, and want to enable users to switch between the two languages.
I found this example from next.js: with-styled-components-rtl. It uses StylisRTLPlugin, which flips all CSS styles to fit RTL layout:
// _document.js
<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
<App {...props} />
</StyleSheetManager>
It works fine, but the problem is that I can't remove stylisRTLPlugin conditionally based on the current locale bacause I have no access to useRouter() in _document.js.
What I want to be able to do:
<StyleSheetManager stylisPlugins={locale === 'ar' ? [stylisRTLPlugin] : null}>
<App {...props} />
</StyleSheetManager>
Add this config to your .babelrc to force your styled to be rendered on the server.
"plugins": [
[
"styled-components",
{
"ssr": true,
}
]
]
How to change the font family of a TextInput with secureTextEntry?
I have some TextInputs to put passwords, when the secureTextEntry is false the font family changes without problem, but when it is true it takes another font by default:
With SecureTextEntry true:
With SecuretTextEntry false:
This is my TextInput
<TextInput
style={stylesLoginScreen.inputPassword}
placeholder="Tu contraseña"
onChangeText={(password) => this.setState({password})}
secureTextEntry={this.state.hidePassword}
placeholderTextColor={'white'}
// autoCapitalize={'none'}
/>
I had the exact same issue and my problem was solved through the use of useRef hook, I can't find the link to the post that helped me, so I am going to paste my code here. My email field style would appear perfect but the password font style would change on toggling between secureTextEntry to true and false. Below code helped me.
const inputRef: any = useRef();
useEffect(() => {
if (inputRef && inputRef.current) {
inputRef.current.setNativeProps({
style: {fontFamily: props.inputStyle.fontFamily},
});
}
}, []);
And adding adding ref={inputRef} to the TextInput as
<TextInput ref={inputRef}.../>
How to style React Native <CheckBox> component?
Is it possible to style the React Native CheckBox component?
There is no style property listed here: https://facebook.github.io/react-native/docs/checkbox.html
I put an invalid style property on it, and the RN warning message that popped up told me all the valid CSS properties, but none of them did anything beneficial towards styling.
The component looks decent, but I want to change it from that teal color to a brand color.
Is it possible?
These properties are not working but are listed as valid style props for CheckBox:
{
height: 50, // changes the hitspace but not the checkbox itself
width: 50,
borderWidth: 1, // does nothing
backgroundColor: 'red', // makes the area around and inside the checkbox red
borderColor: 'green', // does nothing
borderStyle: 'dotted' // does nothing
}
I don't understand why it even exists if everyone just makes their own checkbox. If I did that, I wouldn't really have any use for because all it gives is
value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}
unless there is something magic it does under the hood. It has a decent onChange animation, but that would be deprecated instantly when I make my own and use something like <TouchableHighlight or Opacity> wrapped around an on/off image or <View>.
I can't find any info on Google except hundreds of custom checkboxes. It's actually really hard to search around them.
You can use https://github.com/react-native-community/react-native-checkbox
Android: you can use tintColors.
import CheckBox from '#react-native-community/checkbox';
.
.
.
<CheckBox
value={option.item.selected}
onValueChange={() => {}}
tintColors={{ true: '#F15927', false: 'black' }}
/>
Transform can be used to change CheckBox size.
<CheckBox
style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
/>
checkbox examples
https://github.com/react-native-checkbox/react-native-checkbox
No I couldn't find a way, but wrapping it in a View was one option:
<View style={{
position: 'absolute',
right: 0,
width: 50,
height: 50,
margin: 10,
zIndex: 100,
}}>
<Checkbox
status={i === index ? 'checked' : 'unchecked'}
className=""
/>
</View>
Short answer is you simply can't. React Native uses the native Android Checkbox component, and the only customization you get to do is changing the tint colors, as seen in the react-native-checkbox community project. This prop is undocumented in the official React Native docs. Additionally, here's the TypeScript definition for this component: AndroidCheckBoxNativeComponent.js. Notice how the only props relayed to the native component are onChange, onValueChange, testID, on, enabled and tintColors.
Yes, you can, i recommend you that use react native elements, and with this library you have 2 options, checkedColor and uncheckedColor, by default in checkedColor is green, but you can change it to what you want, for example, checkedColor={"#fff"} or checkedColor="#fff" try them, it apply for 2 options, good luck!
For IOS use onTintColor and pass the value in string onTintColor={'red'}
<CheckBox
onTintColor={Color.theme}
onCheckColor={Color.theme}
value={isSelected}
onValueChange={setSelection}
style={Style OBJECT}
/>
import CheckBox from '#react-native-community/checkbox';
const Checkbox = (props) => {
// const [isSelected, setSelection] = useState(false);
const [toggleCheckBox, setToggleCheckBox] = useState(false)
return (
<View style={[useTailwind``, styles.container]}>
<View style={styles.checkboxContainer}>
<CheckBox
disabled={false}
value={toggleCheckBox}
tintColors={{true: '#368098'}}
onCheckColor={'#6F763F'}
onValueChange={(newValue) => setToggleCheckBox(newValue)}
/>
<Text style={[useTailwind`font-normal text-base font-sans`, styles.label]}>{props.value}</Text>
</View>
{/* <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text> */}
</View>
);
};
its possible now.. just simply gives tint color of the same color of background
How to hide back button of React Native navigator
I have made a login button which will jump to main-ui. I don't want people to see the back button at top-left position of navigator's default style. It seems that NavigatorIOS has no suitable API to use. Can you give me some idea?
You'll have to use Navigator. I recommend using it in conjunction with React Native Navbar.
With Navbar, you can pass in the right and left button components... Or just make them an empty view, if they shouldn't be visible. The property is leftButton and rightButton.
The navigator example on the React docs should get you started:
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MySceneComponent
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
Now in the definition of MySceneComponent you would include displaying NavBar:
const MySceneComponent = (props) => (
<View style={{ flex: 1, }}>
<NavigationBar
title={titleConfig}
rightButton={BUTTON_OR_NOT}
{...props} />
{props.children}
</View>
);
Of course you will want to abstract your navigation bits perhaps into a component which displays the navigation bar around it as I have shown above with the display of {children}. You will further want to pass the route and navigation information into Navbar so it can display the page information and make it so that clicking on the back button calls navigator.pop(), which is what I did by passing on props via {...props}.