The problem
My idea is to create some simple components using Flutter so that they can be used in multiple native iOS and Android projects in our firm.
For example, consider a generic login view. This view can be coded once in Flutter and then can be included later on into projects that have both iOS and Android parts(native) . So such common components can be written once using Flutter instead of twice as native iOS and Android components.
What I have tried so far
I have followed the steps here https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps and it works, but it seems very restricted in functionality.
My questions are
How can I add multiple flutter projects like this, with each project representing a reusable component? Is that even the way to go?
Can I have smaller components- for example in iOS, UIViews instead of FlutterViewController without native hacking ?
How do I handle passing data between the native and Flutter part and also the navigation?
What do you mean by "it seems very restricted in functionality" ?
https://flutter.dev/docs/development/add-to-app lists these limitations:
Running multiple Flutter instances or running in partial screen views may have undefined behavior.
Using Flutter in background mode is still a WIP.
Packing a Flutter library into another sharable library or packing multiple Flutter libraries into an application isn’t supported.
Your 1st question is answered by the 3rd limitation. If you were considering splitting your simple components up into a separate Flutter library each, then no. You would need to package all your components into a single Flutter library, then let the native app pick from the pool.
For your 2nd question, can you be more specific what you mean by "without native hacking" ? Is there a reason you don't/can't use FlutterViewController?
3rd question about passing data between native and Flutter will involve https://flutter.dev/docs/development/platform-integration/platform-channels
From Flutter to native, here's an Android example https://stackoverflow.com/a/49308193/6668797, passing the value "text":
// flutter side, send the data
final String result = await platform.invokeMethod('getBatteryLevel', {"text":text});
// native side, retrieve it
String text = call.argument("text");
From native to Flutter, you use result.success(batteryLevel); to send it back to final String result.
Related
I am working on a project where an old library is being used in Android natively. Because of this, I am forced to work in Kotlin and use a xml file in order to view some elements on the screen. However, I am questioning myself if there is a way to create a custom activity/fragment in Android and call a flutter screen file where I can use all the Flutter widgets within the app. I am currently using method channels in order to communicate between Kotlin and Dart and this is why I came up with this question. Any help is very much appreciated!
It is possible to launch an Android Activity in which Flutter engine will be able to display UI and perform any actions you want within a native Android application.
To do so, you need to create a Flutter module, here is the documentation.
I have an app I'm wanting to try out in Flutter but one major thing may hold me back. Our app will need to access and edit the layout in code depending on what comes from saved data. A user can choose to leave something disabled, and those settings will be saved in a Realm.
Is this something that's possible with Flutter? I know it works with native code, but haven't been able to find anything yet indicating that native code can access widgets build in Flutter.
I see that Realm has a native Android and iOS plugin. With Flutter, you can use a MethodChannel to execute native code. So you could create a Realm wrapper for Flutter using native code.
In short: Yes it is possible.
This is a useful link if you end up creating a wrapper: https://flutter.io/platform-channels/
Has anyone had any success using react native to create both iOS and Android apps that can be used as libraries/sub-projects in other iOS and Android native projects that were created without react native? My goal is to create new functionality for an existing app that has both a iOS and Android codebase that was developed without react native.
As a simple example, lets image that I need to create a series of screens and logic to allow a user to 'create a new account'. Ideally I would like to create the new functionality (controller, views, api-client, etc.) using react native and then export it as a self contained iOS and Android app. In addition to being able to run these apps on their own, I would also like to be able to include them in other native iOS/Android projects as sub-projects. The native iOS project would then create a new storyboard/ViewController/segue(s) and link the main-view of the react native iOS App to it.
I know on iOS/xcode I can add a sub-project by drag-and-dropping an .xcodepro into another one. If I did this with a .xcodepro that was created with react native, how would I go about linking the top level view to the existing non-react native iOS project? Is there a similar process on the Android side to achieve the same functionality?
I would like to explore React Native as well. We have similar needs as you - to develop a common library/framework for iOS and Android. Our solution was to code the library in C++ and use it in XCode on iOS and through a JNI (Java Native Interface) converter on Android as well. The JNI is a pain as not everything translates 1 to 1. I researched using Ruby/RubyMotion but that also has a JNI conversion step. There are other languages that do not require a JNI conversion - but from my last read these are also eperimental. Trying all of these will require effort and results are not guaranteed. Assuming aside from the shared library you still want Native for the rest of the App (UI etc), this will require developers with a combination of Swift, React, and Java (which could get expensive) The approach that makes most sense would be to use Swift for the iOS framework and Kotlin for the Android library and use the same style (functional/react-swift/react-java style code) That way, while the libraries are still different, they are coded in the same style so development/maintenance effort on one can be quickly copied/applied to the other.
Does anyone have experience with NativeScript and can compare it to developing native apps, especially for Android?
I have read all these articles:
FIRST THOUGHTS ON NATIVESCRIPT
SECOND THOUGHTS ON NATIVESCRIPT
Introduction to Native Script – Is It Worth Your Time?
My Experience Developing with Telerik NativeScript
I know especially three of them may be outdated. But I want to ask all of you developers:
How is your experience with NativeScript?
Are there any Android-Components you cannot use? Which are these ones?
Is styling really so limited?
Do apps really look so different at runtime as in the mockup as in the pictures of the first article referenced above?
Does loading of native Android objects into JavaScript Code always work correctly?
Does NativeScript generate Java-Code for Android-Platform out of the NativeScript code I write?
Is it possible to modifiy this code if I want to use some native-only features? What if I want to make UI changes then? Do I have to regenerate the code and do I miss my native extensions then?
Very glad to see that you are evaluating NativeScript to eventually use it in present and future projects.
I'll try to condense answers to a few of the questions into one, as they really are mostly related.
Skipped.*
That depends on what has already been exposed through a custom view/plugin or module. The core-modules that every NativeScript app comes with contains the most basic of wrappers for both Android and iOS under a common API. There are plugins (nativescript npm modules) that provide additional wrappers on native android views (nativescript-telerik-ui for one, nativescript-carousel), most of which are created by the NS community.
As RexSplode mentioned before me - it's mostly the platform that imposes certain limitations. NS uses CSS to declare style, but you can also access the native components and manage their style and appearance programatically if what you need isn't readily available out of the box.
First I'd like to note that the first 3 articles you've linked are over a year old now, and trust me, NativeScript has evolved a lot since then. With all the available components (remember the npm modules I mentioned earlier?) there's a good chance that you will get a close to 1:1 similarity to a well-styled native Android mockup.
At build time metadata is generated for the Android/Java public API used in the project. When the JavaScript Engine (V8) fires up, that metadata is loaded into memory, prototype chains are constructed, and callbacks are attached, so that when you call new android.widget.Button(); in your JavaScript code, the proper virtual machine instructions will be called, and a native button will be created. Static methods are accessed similarly, check out the official docs to get a better understanding of how it all works.https://docs.nativescript.org/runtimes/android/advanced-topics/execution-flow
and 7., and a cont. of 2. Java code, or rather compiled Java code is generated whenever you wish to extend a native Android class that isn't available already in a module or in the native Framework. Extending classes is very similar to how you would do it in Java - you extend a class, and create new implementations of interfaces. That means that you won't have to open Android Studio to create a new class, build it into a native plugin and then add it to your project, since you can do it all in your NativeScript code using JavaScript/TypeScript. https://docs.nativescript.org/runtimes/android/generator/extend-class-interface
Disclaimer: I am on the NativeScript Engineering team
I investigated the Native Script a little and my colleague at work writes an app with it, so I can offer you a bit of information that I have.
1. skipped
There are limited amount of components you can use with native script out of the box. However, if you have a native-java developer who can write a wrapper for you - you can use everything.
It is limited to the platform you are using. Android itself has a lot of style limitations which cannot be easily overwhelmed.
don't know
It works a little different. Your JS object, or rather widgets are translated to java code. So with the items from the box - yes, they are okey. If you write a wrapper for your custom component, then all is up to you.
Yes it does.
No, the code is generated, how are you going to modify it? Changes will be undone on the next build. However, you can write a native module for your application and use any features you want. It is like defining an interface, which you can use in JS code afterwards.
I wrote my app using native method, currently I want to use reactive native in our further development to avoid writing two copies of code for iOS and Android.
The problem is we can't completely rewrite all the code, we want to replace the project piece by piece.
So I am wondering if I can write some views of my project using reactive native and others remain native code that we have used a long time.
If this is possible, is there any existing tutorial about how to do this?
You can keep your originally written native code via native modules. You can port your current project pieces by pieces to native modules, then let React-Native have access to it.
I guess best option is, start a new React-Native project and make it access your native modules, you won't have to rewrite everything then.
Here is more info for Android and iOS
There is official documentation to this. Checkout:
https://facebook.github.io/react-native/docs/integration-with-existing-apps.html