I'm developing a chat application that use inverted FlashList to render messages and I want to animate the layout once a new message is sent, but I'm having some problems.
Expo Snak
Bug Report on Github
Once I add a new message to the list, when user press on button "Send" I want to add a new message and perform a layout animation, here's a snippet of the button callback:
setMessages([{ content: message }, ...messages]);
listRef.current?.prepareForLayoutAnimationRender();
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
Related
I am using react-native-push-notification library to send local notifications from my ios app. I have setup deeplink using react navigation. I have also managed the local push notification to deeplink into specific app screen on click. But this requires me to set the in the message property. This means the resulting lo shows the URL in its display. This is ugly and I would like to hide the URL. Any pointers?
Here is how i schedule local notification
PushNotification.localNotificationSchedule({
title: "main title",
subtitle: "fake sub title",
message: "example://detail/one",
bigText: "My big text that will be shown when expanded",
date: new Date(Date.now() + 10 * 1000),
allowWhileIdle: false,
});
Here is my onNotification code
onNotification: function (notification) {
console.log("NOTIFICATION:", notification);
let isClicked = notification.data.userInteraction === 1
if (isClicked) {
Linking.openURL(notification.message)
}
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
Now this results in the example://detail/one url being displayed in notification. How do i achieve this?
Not exactly a solution to the above issue. But I switched to Notifee for local push notifications. And it just worked! So much easier to install and very minimal configuration needed. Was just an intuitive I expected the notification library to be.
See title: how to implement in-app (foreground) banner notifications with React Native Firebase Cloud Messaging?
I got it to work with the 'Alert' module but this pops up in the middle of your screen whereas I would want just a banner on the top of the screen that does not interfere with the user's actions.
messaging().onMessage(async remoteMessage => {
// Set the matchScreenParentState to 'loading' in case the message 'type' property specifies new match
// Notifications for chats don't trigger anything. That will be just socket.io
if (remoteMessage.data.notificationType==='matchFound') {
setMatchScreenParentState('loading')
Alert.alert('A new match was found!')
}
})
Looking at the documentation it shows that there are no notifications when app is in foreground but surely such a core feature must be available somehow??? https://rnfirebase.io/messaging/usage#notifications
If using webview for user login, we want to close the webview automatically after user submit their info. How to achieve that?
I have seen this being done when using Facebook sign in library, when user login with Facebook, it closes the website and calls the callback.
I am using 'react-native-inappbrowser-reborn'
you can do it use webView interact with js. firstly, when the user clicks the login button to submit their info, the html can post a message use window.postMessage("content") ., then in the react-native webview add onMessage handle.
<WebView
onMessage={this.onMessage}
...
/>
onMessage = (message) => {
// the message is you posted by window.postMessage
}
for react-native > 0.6; you should change to use window.ReactNativeWebView.postMessage.
Besides that, you can also use the injectJavaScripts. for more details about webview interact with js, you can read this artticle
I built a react-native app and if user clicks a link then app opens a default web browser and go to the link.
Linking.openURL(notification.link);
If user push back button from the android or ios devices, is there any way we can detect the back move?
You can add a listener for the same in react native.
There are total 4 listners for the same.
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)
Try the below code
componentWillMount(){
const didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.warn('didFocus ', payload);
# just write your code/call a method here which you want to execute when the app comes from background
}
);
}
Dont forget to remove it when it is done.
componentWillUnmount(){
didFocusSubscription.remove();
}
More you can read here. Thanks :)
I have implemented firebase cloud messaging in my app successfully. But when a new notification appears, my app should open and then redirect to the notifications page from app.js.
The app is showing log info when the notification is clicked but when I try this.props.navigator.push("Notification"); in that function, it shows an error undefined is not an object(evaluating this.props.navigation.push)
I am guessing this is because I haven't yet initialised my stacknavigator but I don't know this for sure. I am using react-navigation in my app.
Here is the function in my app.js that gets called when the notification is clicked.
const notificationOpen = await firebase.notifications().getInitialNotification();
if (notificationOpen) {
const { title, body } = notificationOpen.notification;
console.log('getInitialNotification:');
this.props.navigator.push("Notification");
}
Also, the navigation code is not working even in my render function in app.js so I think props is not initialised in app.js.
Can anyone help me fix this and land me to the notification page?
Considering you have a route called Notification in your stack navigator and also your app.js has access to the navigator's navigation prop, then you might want to use this.props.navigation.navigate('Notification') in case you are using react-navigation.
The problem with your code is this.props.navigation doesn't have any method called push so it will surely give an undefined error. To know more about navigation prop consider going through this doc.