When do you use react-native-push-notification vs #react-native-community/push-notification-ios? - react-native

I'm reading the installation instructions for react-native-push-notification and it indicates that for iOS, you use #react-native-community/push-notification-ios. It seems as though you have to add both of these modules separately. However, I don't understand which to use in my actual code. Do you use var PushNotification = require("react-native-push-notification"); as it says in react-native-push-notification, or do you use import PushNotificationIOS from "#react-native-community/push-notification-ios"; from #react-native-community/push-notification-ios?

You do have to have both packages in your package.json but you do not need to use PushNotificationIOS for anything other than a finish handler as shown in the usage section here.
Generally though, you would only need to use var PushNotification = require("react-native-push-notification") and call your handlers on that.

Related

How to use Troisjs in Nuxt 3 project

I would like to use TroisJS (three.js wrapper for Vue) with Nuxt.js. According to the TroisJS documentation (https://troisjs.github.io/guide/install.html#existing-vuejs-3-project) I need to add it to my project like:
import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);
However, I don"t know how to figure out where I should put this code. I would expect the nuxt.config.js file, but I don't seem to quite get it where it should go.
I decided to use TroisJS and not three.js because I thought the former might be easier to import and use. If importing three.js directly is easier, I don't mind using it.
Thank you very much for any help!
In /plugins folder add new file named troisjs-plugin.js with the following content :
import { TroisJSVuePlugin } from 'troisjs';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(TroisJSVuePlugin )
})
I found a repo with some testing with Trois and Nuxt 3, probably outdated and maybe some apis have changed, but if you wanna check it out: alvarosabu/nuxt3-trois
Also, there's an official repo from the Trois author with a Nuxt 3 custom plugin (probably outdated too) here

Upgraded to React Native 0.62.0 Getting Warning Sign - "Calling `getNode()` on the ref of Animated component is no longer necessary

I just upgrade my react native app to 0.62.0, and now my app keeps getting this warning sign
ReactNativeFiberHostComponent: Calling `getNode()` on the ref of an Animated component
is no longer necessary. You can now directly use the ref instead.
This method will be removed in a future release.
I'm not sure why this issue is showing up? Can someone please explain?
I also see Stack
ref.getNode |
createAnimatedComponent.js:129:20
SafeView#_updateMeasurements | index.js:192:14
SafeView#componentDidUpdate | index.js:154:9
Update
I believe this might be coming from SafeAreaView from react-navigation
I also came to this warning after upgraded ro RN 0.62.1, and I didn't use getNode() at all, turns out it came from a depedencies that I use, called react-native-snap-carousel because they build it with FlatList and possibly using the getNode() as well.
And now there's an open issue about this in their GitHub repo that we can follow, here's the link to the issue
Update
this also came from package react-native-safe-area-view, possibly your app is using this package and now they have released new version to fix getNode() deprecation, see this PR
so instead of fixing the file directly yourself, you just need to update the package, simply run: npm i react-native-safe-area-view
Hope that's help :)
To quick fix this go to node_modules/react-native-safe-area-view => index.js
at line 192 change
this.view.getNode().measureInWindow((winX, winY, winWidth, winHeight)
to
this.view.measureInWindow((winX, winY, winWidth, winHeight)
If you are using react-native-snap-carousel you can fix it by modifying your node module locally.
first go to
./node_modules/react-native-snap-carousel/src/Carousel.js
change
const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);
into
const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;
and finally, change your _getWrappedRef function to
_getWrappedRef () {
return this._carouselRef
}
This will stop the warning until we have an update on that package.
As seen in the blog post announcing the release of RN62, getNode() is now deprecated. You can just use ref without calling getNode(). See this commit.
the issue will happen when you use createAnimatedComponent for components while its already exist in animated library for example if we use it to FlatList this warning will be showing
for fix it just call componenty directly
for more detail enter link description here
change
return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
to
return this._carouselRef;
*Removing getNode() will fix it.
i find that error in my project.
Fix: copy "getNode()" and find all in your project, delete it.
Delete warning getNode()

Is there any pre-defined flag from detox that I can know App is running on detox?

I'm looking for some pre-defined flag (macro) so I can skip a specific code in my App when I run detox.
if (__RUNNING_ON_DETOX__) {
return; // skip this function
}
As a workaround, I'm using react-native-config and put ENVFILE on detox build.
But I'm looking for a simpler way.
If there is no flag that is provided from detox, I like to know the way that I could inject an inline export at least.
Thanks.
No predefined flag, but you can mock out the dependency that you don't want to interact with instead - see https://github.com/wix/Detox/blob/master/docs/Guide.Mocking.md

How does module path resolution work for functions in react native library?

I've noticed that files inside the react-native/Libraries can be imported without specifying the full path.
Like,
const EdgeInsetsPropType = require('react-native/Libraries/StyleSheet/EdgeInsetsPropType');
Is the same as,
const EdgeInsetsPropType = require('EdgeInsetsPropType');
How does this work?
In the case of the EdgeInsetsPropType module, those should be the same thing. The reason that you can import that module directly by its name is because of this line.
The #providesModule EdgeInsetsPropType comment is what makes it so you can import it directly. Here is a good basic explanation of why #providesModule works the way it does.
The packager uses two methods to look up modules. The first is based
on docblock headers: if you write "#providesModule X" in the first
docblock this enables require('X'). The other method is Node's
resolution.
This description was taken from this comment on Github.

How to add JS frameworks to use in the backend of SailsJS?

I want to add Underscore JS to be used in the BackEnd so I can call _. functions from my Controllers. How do I do that?
You don't need to do anything.
Sails loads LoDash by default.
It is already assigned to "_".
So unless you need some very specific incompatibility between LoDash and underscore.... of which i don't know of.....your done.
First, you have to install the library you want to add with npm install --save <libraryName>.
Then, on top of your controller, before module.exports = ..., require this library:
var libraryName = require('<libraryName>');
That's it.
In case of Underscore.js it will be:
npm install --save underscore
then
var _ = require('underscore');
on top of your controller. After that you'll be able to use _.-functions anywhere in this file.
UPDATE
The answer by InternalFX makes perfect sense too. Sails.js indeed globalizes Lodash via _, and pretty much all the functionality of Underscore Lodash implements too, so in this case, that's right, you don't even have to do anything.