I implemented flux on top of a create-react-app application using the flux todomvc example as the point-of-departure:
AppView renders the create-react-app App component
AppContainer exports AppView (just like the todomvc)
index.js renders AppContainer (the todomvc uses root.js)
I'm wondering if that's the way to do it, or if it is better to rewrite the App functionality directly in AppView (in other words, get rid of the App component entirely).
Related
I'm building an app which mainly displays public data from a website. A few items require authentication to read. I don't want to recreate the entire website in the app so I'd like to have the user log in via a web view or browser popup and grab the cookie containing the token from this session. I would then use it to authenticate my in-app rest calls in order to fetch the data. This should work on iOS and Android but I couldn't come up with a functioning solution yet. How would one read and write cookies from the phone browser / webview? I'm using the latest Angular (9) and NativeScript.
For android
The webview UI
<WebView height="1200px" src="https://www.nativescript.org"
(loadFinished)="onLoadFinished($event)"></WebView>
The typescript code
import * as application from 'application';
declare const android;
....
....
....
onLoadFinished(args: LoadEventData) {
android.webkit.CookieManager.getInstance().getCookie(<cookie name>)
android.webkit.CookieManager.getInstance().setCookie(<cookie name>, <cookie value>)
}
For IOS seems it is little bit complicated
Refer StackOverflow set cookie in IOS nativescript
The application I'm currently working on requires data to be retrieved from a web service during app startup that roughly takes 1.5 seconds. After the data is retrieved, it needs to be displayed on the MainPage and that is another 1.5 - 2 seconds since the data is mostly URLs of images that have to be displayed, in my case, using ffimageloading library; which means actually downloading those images first to be displayed.
I have splash startup screens for both Android and iOS implemented separately in platform projects but splash screen only stays up for the amount of time Xamarin Forms needs to load and afterwards disappears not waiting for my actual model to load from the web service. I have searched for solutions to extend the splash screen duration and mostly every solution I have read involves creating another splash screen page, loading page if you will, that is already controlled in PCL project but having two separate splash loading screens just seams not feasible to me at the moment.
So I was wondering, how would one load the initial model in platform projects, during the actual splash screen, and then later pass it to PCL project when Xamarin Forms has finished initialization, presumably to App.xaml.cs 's App() constructor function?
There is no code or enough details so I am assuming this is what you want to do.
Call the APIs asynchrnously , till then show splash screen.
Before assigning MainPage in your App.xaml.cs you should call these APIs asynchronously with await and then you use the same for binding of your mainpage
public App()
{
InitializeComponent();
//do all my prefetch stuff for app initialization.
// API and what not
var viewmodel = new AppMainViewModel();
await viewmodel.CallFooFetchAsync();
await viewmodel.BlahBlahAsync();
MainPage = new NavigationPage(new AppMainPage(viewmodel));
}
In Page
public AppMainPage(AppMainViewModel vm)
{
BindingContext =vm;
}
So by the time page loads it has all the data handy.
You can explore adding this code in OnAppearing of the page.
Note that the concept of default Splash screen is just to show an image(with different theme in Android) and setting image in iOS. You need to have conventional UI technically its not splash screen anymore.
Alternatively you can get shared project handle in native
Android Sp
protected override void OnCreate(Bundle bundle)
{
...
var app = new App(); //this will be shared project App object
Device.BeginInvokeOnMainThread(async () => await app.DoPrefetchStuffFirst()); //API calls if needed in this async method
//then
LoadApplicationm(app)
}
You can do similar thing in iOS AppDelegate
And if you call native specific methods in platforms (may be for API calls) then you would use DependencyService feature , that will pass it to shared project or Custom renderer based on where you want to use it.
The application I am working with uses AppCenter with code like this:
public App()
{
InitializeComponent();
VersionTracking.Track();
VersionChecks();
VersionChecks();
DB.CreateTables();
DB.GetSettings();
DB.PopulateTables();
SetDeviceInfo();
SetResourceColors();
SetResourceDimensions();
MainPage = new AppShell();
}
protected override void OnStart()
{
AppCenter.Start("xx", typeof(Crashes), typeof(Push));
Analytics.TrackEvent(VersionTracking.CurrentVersion);
}
Although I don't see any error messages when it starts up I am concerned about the way this is coded as from what I can see the App constructor fires first followed by the OnStart().
So if this happens, how can VersionTracking work. Should that code not be in the OnStart and how about the additional code that I have which sets up the application?
Would appreciate any advice that people can offer about the use of AppCenter with Xamarin forms.
Answer
Yes, you can use Xamarin.Essentials.VersionTracking in the constructor of App.
Explanation
You are confusing three different SDKs: Xamarin.Essentials, Xamarin.Forms and AppCenter.
VersionTracking is an API in Xamarin.Essentials.
App is a subclass of the Xamarin.Forms.Application API.
AppCenter.Start is an API in the AppCenter
These are three independent SDKs and each can be used independently of the others.
Xamarin.Forms app startup flow is like : Native App Startup -> Xamarin.Forms.Application Startup
Your App class is instantiated only after Native app has finished loading.
As versioning is managed by native app, there is no problem in initialising VersionTracking in constructor, as Native app has fully loaded by this time.
I am trying out redux. For some reason, when I use redux, react-router no longer works properly. When I click on the Link, the url changes, but the new component does not load. It only loads if I refresh the page.
Router without Redux
Router and Redux
What am I doing wrong?
The connect(...) wrapper function from redux produces a new component. This new component implements the shouldComponentUpdate function to only update itself and children, when it's props are different (pr shallowEqual).
See https://reacttraining.com/react-router/web/guides/redux-integration
The standard workaround is to wrap connect(...) with withRouter. This injects new props, that forces the connect-ed component to update on location changes.
ie. withRouter(connect(...))
https://codesandbox.io/s/2xl5pp1l4n
Is it possible to use websockets (via socket.io etc.) in a React Native app for bidirectional communication with a custom backend rather that using the supported fetch() with polling etc.? For example, neccessary for a chat app with React Native.
Their website does not mention an API for this yet.
I have not tried it myself but it should be no problem to run socket.io for react-native app (it's. Socket.io is pure javascript library without any HTML/CSS dependencies I believe, so simple
npm install socket.io --save
in your project should be enough to start using it.
Actually, it looks like someone did it before and managed to get socket.io working for react-native: https://github.com/badfortrains/wsExample
Here is a step by step of what needs to be done to get socket.io up and running in a react native app. Its very similar to Jarek Ptiuk's answer but has an example of what to do.
Is it possible to combine React Native with socket.io
the example:
import React from 'react-native';
// ... [other imports]
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/socket.io';
export default class App extends Component {
constructor(props) {
super(props);
this.socket = io('localhost:3001', {jsonp: false});
}
// no you can use this.socket.io(...)
// or any other functionality within socket.io!
...
}