Setting up a native UISplitViewController in React Native - android

I'm developing a React Native application and I would like to use a UISplitViewController interface. This would allow the correct format for iPad and iPhone as well as split view and multitasking.
I haven't been able to find any information on how to setup a UISplitViewController controller in React Native. I wonder if anyone could help me with advice on how I can setup a UISplitViewController using React Native for iOS. I am a iOS developer by background in swift so it would be amazing to learn how to do this in React Native.
Also I wonder if you could provide me some help on how to then do the same layout (UISplitViewController) type on the Android side for the Raect Native App.
Thank you for your help on this one.

There is no included bridge to Split View Controller in React Native. However, you can write your own Native Module (see https://facebook.github.io/react-native/docs/native-modules-ios.html) — once you set it up it’s typically just a few lines of code for each method call you want to enable. You may wish to review the source code for https://github.com/wix/react-native-navigation in order to see how they implement some of the same functions on a UINavigationController.
Android doesn’t have an equivalent to iOS/tvOS’s split view controller, so you’ll either need to roll your own on the Java side of things, or just bridge to regular Activity/Fragments in Android.
This bridge is probably fine for a split view controller. But if you really want good tablet support for your app, including split screen multitasking, drag and drop, PIP video, stylus support, etc., you should probably just write it fully native instead of using React Native since the tablet support isn’t really there.

Related

Use react native to create a iOS framework and Android library (not app) from common code base

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.

React native web-view vs Cordova

I have an app build using cordova. However, making it look properly on android is being a bit though. I read reac-native documentation and I thought about combining the current state of the app, embedding it on a web view and building the rest of the app using react-native.
The reason behind this is that I feel more comfortable building the android specific ui of the app (like sidebars, and menus) using react-native than cordova, and I want to know if this approach makes sense. Is react native web view as powerful as cordova? Does this make any sense?
Thanks and regards
Despite React Native owns a WebView component I believe that this component is not appropriate for your approach.
From the docs:
WebView renders web content in a native view. You can use this
component to navigate back and forth in the web view's history and
configure various properties for the web content.
The purpose of React Native WebView is simply "renders web content".
I believe that you can not simply put your current Cordova code inside a React Native Web View and "it works". If your current Cordova app is more than simple HTML pages and use some Cordova Plugin, for example, you will have problems at this point.
Added to this the fact that strange architecture will probably increase the maintenance cost.
And about React Native to be as powerful as Cordova: I would say that React Native is more promising and very powerful, but actually Cordova has a ecosystem more mature and consistent. Maybe you should take a look at NativeScript.
Is react native web view as powerful as Cordova?
Answer: It's more powerful than Cordova
Unlike Cordova/PhoneGap your code runs in a JS runtime on the OS, but the UI is rendered as native components. This makes it very different than Cordova/PhoneGap.
You can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.
As for Cordova, you're bound to the limitations of the WebView.And since JavaScript is single threaded, you will at one point run into issues if there are too many things going on in your application code. Such as sluggish animations etc...

React Native & Android?

I'm contemplating on using React Native for a new web app. Is it possible to ship both iOS and Android apps using it?
I know that it's on the roadmap, but it's unclear to me whether it's going to be a separate open-source project (e.g., React Android vs React Native), or just one (e.g., React Native).
TLDR: Most likely you can. But it depends on your use cases.
You can aim for about 80~99+% code reuse (depending on how much Android/iOS native views/modules you use eg. Do you have custom graphics code or low-level TCP networking code; Those can only be done in native code; And expose as API to your JS code. The amount of the platform-specific JS code is actually minimal. Plus you can also use platform check like if (Platform.OS === 'android'){} to solve that) of code reuse, which is pretty nice. Dropbox and other companies have done similar projects: using c++ to build a 'shared' component between iOS and Android project, while implementing most of the UI code in native iOS(Objective-c or swift) and Android(java). But now you are doing C++ with Java and Objective-C or Swift, more language to master, more complexity and more brain juice went down the drain. And it probably took some super tough gymnastic move to make different native code work in both iOS and Android, plus debugging...
React Native just makes it a lot easier to write almost everything in JavaScript. But there is a catch, only about 80% of the JS code could be shared. In the foreseeable future, you still need to write 'platform-specific' JS code for Android and iOS versions.
That's why FB said they aim for 'Learn once, code anywhere' instead of 'run' everywhere.
But it's still very nice other than code reuse(80+% code reuse is still a big improvement comparing to maintaining 2 entirely different versions: Android and iOS ya?)
Cmd +R to refresh the app is a GREAT boost for development speed. Waiting for a big project to compile just makes you felt you were dying inside.
Declarative UI you get for free, because of using React. This is another great plus! As you don't need to 'dig' into your specific UI code that often anymore. Data changed? Just 'flush' it and UI just update accordingly. No brain juice wasted.
I just ported my not so complicated Android React Native App to iOS. And it took me 3 days. The request for and iOS version for the App came as a rather abrupt and unplanned move. So could definitely be even faster had I built the Android with a plan for iOS too. Huge win:)
Another great benefit is able to do hot code push without going through the hellish 1 week app store review process. So no more, "YAY, our app is approved. Let's release. Oh Shiiit. Critical bug and our app keeps crashing(that's gonna keep happening for at least a week before your fix is live). And you have to beg Apple to speed up the process". This is possible because the major part of the code base would be written in JS and with tools like AppHub or CodePush, you could almost instantly deploy code to your users. This is conditionally allowed by Apple.
3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code, and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.
Lastly, as an open-source project, project longevity tends to be a concern. Not an issue for React Native. Internally used by(FB Ads Manager) and backed by FB(a dozen FB Engineers?) by Facebook, with close to 500 contributors and 25k Stars, React Native is full of life. Seeing is believing :) (https://github.com/facebook/react-native)
EDIT 1
I realized that I am apparently a bit biased and only talked about the good stuff about React Native. So do checkout https://productpains.com/product/react-native/ and Github issues to have a full picture. It's definitely not silver bullet. That being said, it satisfies most of my use case and I couldn't see me use native iOS or Android anytime soon.
EDIT 2
The Facebook F8 conference app released by Facebook (duh..) is 100% open source and they have a really nice tutorial to show you how you could have both iOS and Android native experience(90% as good as native ?), and at the same time, achieved 85% code re-use. check it out --> https://makeitopen.com
EDIT 3
You may also want to checkout Flutter and its pros & cons :)
It doesn't make sense to have a single codebase if you want a truly native experience. At the moment we have things like NavigatorIOS in React Native which provides an iOS-style UI for navigating between app screens, but if we were to just start using that on Android it wouldn't feel like a true Android app.
Therefore I'd expect to see a NavigatorAndroid component or similar when the time comes, and the same for various other components that behave differently between the platforms.
One benefit that you would get is that any application logic - maybe a store, or your backend interactions - could be written in a JavaScript file and then included by both iOS and Android.
So while you won't get that write-once run-everywhere developer experience from React Native I would expect to see a solution that gives first-class UI on both platforms while encouraging as much reuse as possible. I personally also hope to see strong build tools to help develop and ship on multiple platforms.
React Native for Android has just been released, Android folder will be creating along side with iOS folder upon creating a new project.
Just another tip as NavigatorIOS was mentioned. Facebook are not really maintaining the code for NavigatorIOS. Instead they are focusing on Navigator.
Yes. We're running it in production with about 5m registered users.
Some things are a little behind iOS but catching up quickly. It's a good wagon to be on.
React Native is designed so that you can deploy to both iOS and Android. There is a caveat, of course.
React Native has supported iOS for much longer, coming to Android only recently. So, there are some differences in terms of what is supported on each platform.
For example, if you place borders on Text, they will show up on iOS, but not on Android. In order to overcome this, you need to place a View around the Text, and apply a border to that. Luckily, React Native makes it easy to integrate separate stylesheets for each platform (or even platform-specific styling on a single stylesheet).
Support for Android is continuously evolving, so it will only be a matter of time before React Native for Android is on par with iOS. Nevertheless, this shouldn't deter you. In my experience, it's a great way to quickly develop for both platforms, and it does save some headaches.
you don't need to maintenance separate code base for android & ios. Actually you can use same code base for build android & ios. I recommend to read the react-native documentation(according to react-native version you are using) before using any inbuilt component in your code.
Eg:- TextInput component onKeyPress function supports for ios only.
if ur are using external lib check these lib support for both ios and android.
Anyway you have to configure external lib separately(install) both android and ios.
hope this will helpful.

How can I add a native Android action bar to my Air Mobile app?

I have an Air mobile language learning app on the Google Play store that I'm happy with. It performs at 60fps and does what I need it to do.
I plan on adding more language packs and was wondering if I could use a native slide-out tray and action bar.
I have no idea if I can add any native android UI elements to an air mobile app. Does anyone have experience doing this?
you'd need a native extension to interact with OS related items. checked out this yet? http://help.adobe.com/en_US/air/build/WS597e5dadb9cc1e0253f7d2fc1311b491071-8000.html
This is technically possible using an ANE, though this is not what ANEs are meant for. ANEs are meant to give you access to native APIs, not native GUI elements. You should refrain from mixing AIR and native GUI elements. If you want to use native elements, you should switch to using native code.
If using native code is not something you wish to do, you can write your own implementation. The GUI structure is not difficult to mimic and AS3 offers a multitude of MouseEvents and TouchEvents that would allow you to properly write an AIR version of that GUI element (I've done so in the past, actually).
Another option is to use Flex or Starling or another GUI framework that offers a pre-built component for this. If you are not already using one, however, it will require you re-build your entire app.

Native Code Generation in Titanium

How is native code generated in Titanium ?? I have read the documentaion on the internet and from it i can only understand the high level architecture but i need more details about the in depth working. For eg. when we create a button in Titanium using Ti.UI.createButton() how is this binded with native code and how do we get the same button as we get using native code.
Is UIButton object created and returned (talking only abt iOS) or the execution flow is different ? Also where should i look in the native code to for better understanding ?
First of all, how it works is different for each platform, so it is impossible to generalize effectively since the platforms are so specific.
For iOS Titanium uses native bridge wrapper objects called a KrollObject. These proxy objects form a bridge from a Javascript object to the native object in native code. For your UIButton use-case, the UIButton is created but is not returned to the Javascript, you control it through the Kroll bridge. (As a side note, Kroll is the process of refining the material titanium, punny).
Really you dont need to know the really intrinsic details of how it works to write modules, especially since it requires a huge amount of native platform knowledge (in which case theres no reason for you to use titanium).
Here is a great video on how it all works from the last Codestrong. If you really want to know how garbage collection and lifecycle of objects works study this video.

Categories

Resources