undefined is not an object '_react2.PushNotificationIOS.FetchResult' - push-notification

I am currently running ReactNative version 0.54.0. I have scoured the internet and followed all of the directions to setting up PushNotification (manual linking: adding RCTPushNotification.xcodeproj to xcode and linking up the libRCTPushNotification, etc)
I copied the code from facebook, into the AppDelegate.m in xCode
I have imported PushNotificationIOS from react and PushNotification from react-native-push-notification.
I copied the PushNotification.configure() code into my app.js file. The error that I keep getting is "undefined is not an object '_react2.PushNotificationIOS.FetchResult'" in the onNotification method.
Can anyone let me know I am doing wrong?

Make sure you have imports like these
import {
StyleSheet,
View,
PushNotificationIOS
} from 'react-native';
and not
import {
StyleSheet,
View
} from 'react-native';
import {PushNotificationIOS} from 'react-native';

Related

VisualCode error { expectedcss(css-lcurlyexpected)

Please help me to solve the problem with import fonts into css file in React.js App.
I use typescript and when I import fonts into src/index.css file i received error:
"{ expectedcss(css-lcurlyexpected)"
How can I fix this?
import '#fontsource/roboto/300.css';
import '#fontsource/roboto/400.css';
import '#fontsource/roboto/500.css';
import '#fontsource/roboto/700.css';
I don't know how to fix this

ReScript React how to import CSS files?

I am working on porting an existing React App to ReScript React, however I am running into a few issues. Namely I can't for the life of me figure out how to import CSS in ReScript, for example, In React to import Bootstrap all I would have to do is:
import 'bootstrap/dist/css/bootstrap.min.css';
However there is no corresponding way to do this in ReScript (to my knowledge), I tried doing:
#module("bootstrap/dist/css/bootstrap.min.css")
But it doesn't work. How can I import CSS files in ReScript React?
Use a %%raw expression to import CSS files within your ReScript / React component code:
// in a CommonJS setup
%%raw("require('./styles/main.css')")
// or with ES6
%%raw("import './styles/main.css'")
Reference - https://rescript-lang.org/docs/react/latest/styling

Passing data to createApp (vue)

Using Webpack, I have this code:
import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
createApp(App).mount('#search-app')
On my website, I have a page for the search app that contains the <div id="search-app" /> to mount the root of the application to.
What I would like to know is, whether it's possible to somehow insert (preferably) some of the data from the page that includes the javascript file? There are a few things items I would like to include from the database, such as settings and search categories, and I'd like to avoid making an AJAX request for them if it can be helped.
Can it be helped or is there some way I can include this data inline at load time?
With Webpack, I don't quite understand how I can get access to App from the page that loads the javascript file, so that I can modify data before somehow passing it in to createApp(), or if it's even possible. Can I use import statements on a page that's loaded by the browser, or is this stictly a Webpack only (or similar) feature?
Many thanks in advance.
You can use createApp's second parameter to pass props.
import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
createApp(App, {myProp: "value"}).mount('#search-app')
docs

Fomantic UI - TypeError: $(...).toast is not a function

I am using Meteor with React and Semantic-ui-react. I needed a toast function so I wanted to change to Fomantic UI. Everything related is loaded by NPM.
I removed semantic-ui-css and added fomantic-ui-css.
I removed the
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" /> from the head.
I changed all import 'semantic-ui-css/semantic.min.css'; to import 'fomantic-ui-css/semantic.css';
When I try to execute a
$('body')
.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom'
})
;
I get TypeError: $(...).toast is not a function
I can't find anything on it over various searches through SO and repository issues.
Thanks for any help you can give!!
Phil
You basically need to import the semantic.js file, which will add the functionality to your jquery instances:
import 'fomantic-ui-css/semantic.js'
import 'fomantic-ui-css/semantic.css'
However, there is no need to import the .min.* minified files, because Meteor will use a js and css minifier when you build your app for production / deployment later.

React Js & ASP.Net Webforms - Navigation between apps

I am currently working in a new version of a Dashboard application in React with an API in the back. The old one is a site that was made with ASP.NET WebForms technology.
We are not going to migrate all the sections at once, so we are working on phases. We need to achieve navigation between both systems without problems.
Our main issue was cross-site authentication but we were able to solve it pretty fast. Then we started working on navigation, going from the new system to the old one works fine but the problem is when you are at old system and you want to go a new section of the React App. It always redirects you to the last page you visited instead of redirecting to the one you are pointing. I think its something related to the history of React, based on what I was reading.
I'm pretty much new with React so I don't know where to start. We are currently using "connected-react-router" for Routing and here there is code from the App.js file (I dont know if it is useful but I have characters limitation while adding content to the body):
import React from "react";
import { ConnectedRouter } from "connected-react-router";
import numeral from "numeral";
import "core-js/stable";
import "regenerator-runtime/runtime";
import routes from "./routes";
import Layout from "./components/layout";
import Notifications from "./components/globalNotifications";
import es_locale from "../configs/es_locale";
numeral.register("locale", "es", es_locale);
numeral.locale("es");
const App = ({ history }) => {
return (
<ConnectedRouter history={history}>
<Layout>
<Notifications></Notifications>
{routes}
</Layout>
</ConnectedRouter>
);
};
export default App;
Let me know if you need more code to guide me.
Thank you.

Resources