Develop Reference

React-Native Server Driven ui

I always wonder how apps like Airbnb, Flipkart, and Swiggy update their UI on the fly. Even if I didn’t update the app, Flipkart shows different UIs during festivals, while Swiggy always changes its UI based on the device location.
How I implement this in my react-native-app?
Webview is the solution?
Kindly help me..
Thanks

There are multiple ways you can go about doing this.
One way would be to use WebViews as you've mentioned, this would make it trivial to change the interfaces as it's entierly controled in the servers. But the main issue with this approch will be performance and non native look and feel. These are the two main advantages of using React Native over hybrid frameworks in the first place and therefor, it wouldn't make much sense to use WebViews everywhere. But if there's a small slice of your application that updates regularly(ex - terms of service) you could use a WebView to do the custom views.
A more common way that's low effort would be to have all the code in place for the different looks, but use feature flags to toggle different views. This would work the same way that a dark theme would work. The amount of customization we can do this way is limited because we need to code everything ahead of time.
Another way is to use server driven UIs. With this approch, you will have a pre defined templates in the client that you them populate on run-time with data from the server. For a very simple example, you could have a header image that could be populated with a seasonal greeting image. But instead of simple things like images, this can be much more visible chagnes as well. (ex - List view instead of Grid View)
One more involved way would be to use code push. This would allow things like seasonal UI changes. But this requires a lot more setup and might not provide the best user experience.

Webview is best because this way you can change the UI and the business logic or UI handling logic.
But you have to develop a minimum architecture for that.
Here is my way.
Develop Host layer to use camera, shared preference, file system etc.
Develop a communication layer which will be responsible for communication between your webview and the host layer so that your webview can access all the required device platform(eg. android or ios) features which can not be normally accessed directly from webview.
So now you can render whatever UI(by HTML and CSS) you want, you can put whatever logic you want via javascript also now you can access all the required device features you really need.
So, now you are the king of your app.
Just you have to keep updating the UI or logic in server when you really need.
Some cons are there like
webview in android is different than our normal browser. Some required features are not available.
Its behaviors is different in different API level. So you have to test it very well. For testing, you can use Genymotion.
It does not work well in some old devices/APIs.
Look and feel really matters. But smart design can fix that problem.
If you want your whole app in a single webview then you have to compromise with page transition feature of android or ios. But again smart animation design will fix that.
But this is just a working solution not a smart solution for server driven UI.
I have used some server driven UI frameworks. But they seems to be overhead and lacks some features.
So there should be a framework by which we can render native UI dynamically from server with corresponding business logic change feature and accessibility of all the possible device functionalities.
A few months before I started to develop a Server driven UI framework. I did it little bit. But due to lack of time I really could not complete it.
If someone interested to contribute in this project feel free to contact with me.
I have a solid idea and architecture for this project.
This framework can create a revolution in the world of app development.
email: bedmad82#gmail.com

What if I create iOS App User interface just like Android App?

I have created one android app which I am going to port to iOS. Not actually port but I am going to create same app for iOS too. I want to user custom views in iOS and make it look just like Android App User Interface.
Will there be issue while submitting that iOS App to Apple Store?
github.com/dekatotoro/SlideMenuControllerSwift
I am using this library and another thing i am using is
https://s27.postimg.org/etqjld0fn/Screen_Shot_2017_01_02_at_19_18_46.png
Top Bar custom design
Are these two things going to give me problem?

You may encounter problems. While there is a chance you might be able to go through with publishing, there is still a high chance of rejection and a lack of user adoption that would not be conducive to success in the long-run.
Your best bet is to recreate the UI for those views following iOS Human Interface Design Guidelines. These are well-outlined and pretty intuitive.
If you're re-coding it natively as well and following documentation this should actually be easier than trying to make the Android style fit and risking going through re-approval after getting rejected. Better to do it right the first time, so to speak.
You can still technically have a custom design, but keep in mind that 1) Apple is strict with their aesthetic compatibility and 2) iOS users will not want an Android experience, and likely vice versa.
If you are not re-coding in native iOS i.e. Swift/Obj-C, etc., there are other workarounds you can look into for getting the functionality cross-compatible, however those UI incompatibilities will still need to be tweaked across the board to meet Human Interface Guidelines/standards.

Hard to choose between native or cross platform for mobile application

I would like to create an application that support in both Android and iPhone.
It will be a interactive system for people to chat,share photos, etc.
So, it will consist lo-gin system, and all information for users will stored in mysql.
The question is here, should I write two sets of code for Android and iPhone or use some cross platform tools such as Phonegap + jQueryMobile for development.
1)I am wondering if html + css + javascript can complete all the functions that I want to include in this application if I use Phonegap.For example, how to handle the data transfer when loading data from db, should I create many .html for different pages. And the performance of using Phonegap...
2)Also, how about the time of development. Suppose there is one developer for Android, and one for iPhone. If we develop separately, we cannot help each other. On the other hand, web may be easier and we can research on this together.
3)Then, for the UI, it is easier for native language. But it is much difficult for web to make the things like mobile application.
I have asked a lot of questions. But I really think about this kind of issue for a long time and this is the time for me to have the decision.
Can anyone help me and give me some idea? Really thx....

Consider these Factors & Make your own wise decision,
which coding technique are you familiar with (HTML, CSS, JS) or (Java, C#).
For your First Question about data transfer from db,(your question is not clear internal db or server side db) if internal db Here is My QuestionI couldn't find the solution with the given answers, Help me if you can solve the same.(if you are talking about server side db) both for native & Cross platform it has to be achieved by API's
Time of Development is less in PhoneGap, when consider for both platforms since you are coding for both platforms simultaneously.
UI is Easier in Native ONLY when you go with Default styles,
For example consider yourself adding a Customized Button in *.png format.
you are gonna add single button multiple times in multiple sizes. If you wanna achieve clicked or Hover Effect you are Gonna add 2 more Customized Buttons. Which makes totally 3 images for single click for single Screen & Single Orientation, to achieve Correct Quality, u have to add same image in different sizes in ldpi, mdpi, hdpi, x-hdpi, no-dpi which finally brings you 5x3=15 images for single Button.(imagine the size of your app). Finally you have to add few lines of Codes to achieve Clicked effect
The same can be achieved in CSS with few lines of Codes(hardly 5 KB). Many animations also can be achieved easily with js.
UI can be changed when ever you want with change in few lines of codes.UI - PhoneGap Wins your app runs in Browser, both Android & iOS use the same browser engine Webkit, but still significant differences even in Webkit
Here are few more issues in PhoneGap,
Performance Native wins. In PhoneGap your browser has to load js, CSS which gives you notable delay, which cannot be ignored. If you want awesome UI go with CrossPlatform. To achieve performance choose Native.
Finally time to take decision.

It depends on what your requirements are. Evaluate if all your requirements are possible with Phonegap. For a list of supported features see: http://phonegap.com/about/features
Note that you can only use the native phone functionality that phonegap provides.
The development time depends on various factors, such as complexity, size of project and developer skill. I think the main difference here is developer skill, as the complexity and size of project are the same.
This is a tradeoff you have to make. An example phonegap application can be found here:
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/

1.If you build application using cordova with more page, you app will get slow and some time it will get more bugs of design. So it
is better if you use single html page with different dives for each
pages and use "display: none;" from your java script or JQuery to
show and hide you current pages.then your application will more
fast.
there a lot of plugins in cordova those are supporting for both iOS and android so you don't need a iOS developer or android
developer if you have proper html and css design like responsive web
site.
UI won't be problem if you build a responsive html pages using bootstrap

iOS UI elements porting on Android

ladies and gentlemen!
Very often on my job I meet the following requirement from the client, when developing android applications: "make it look like and iPhone app".
Yes, I know, that the best way is to offer him canonical Android design with all these patterns like dashboard, using menu button etc... But sometimes this is not the case, as instead, I have to make it look and animate just the same. It's frustrating.
Can you guys, please advice me an android library (if there is one) with iOS-like UI elements? Many thanks in advance, I'm looking forward to hearing from you!

To expand on Martyn's comment, which I agree with.
Perhaps there is a great reason why a client would ask for this, but in many cases I bet they might benefit from being challenged on this requirement. If I was presented with this request, I would first ask "Why?". Perhaps they'd answer as follows:
we need a consistent experience across platforms, or
it will be more cost effective to design once and apply to each platform, or
it doesn't matter why, just do it!
Here are some responses for each:
each user will generally have one phone, and won't require the experience on Android to be identical to iPhone - they only care that it works and looks great on their phone. In fact, an Android user would prefer if you used the UI patterns that are more common to the platform, as opposed designing to match iOS. Likewise for an iPhone user.
we have found that having a designer create a set of creative for iOS allows us to pretty much use the creative as-is for Android. Even though Android might have Tabs on top, versus bottom, we are still able to take the backgrounds, button styles, fonts and color schemes from one platform to the next. There will be slight differences, but overall the brand and look should translate well. Here is an example of porting a single creative design across platforms: http://daleburgosdesign.com/
if they answer in this manner, you might want to consider passing on the job. Pixel perfect matching across platforms is tricky aside from the ideas offered in previous answers (OpenGL and the use of a WebView - via Macarse). If the client can't provide good reasoning for this tricky requirement, then it might be best to search for your next client.
Not a straight forward answer to your question, but I hope you find it helpful!

There is no iphone UI library for android that I know of. What you can do is, get the iphone GUI psd and redo it for 3 sizes of android (for the 3 size ranges) and use the elements of these psd's to theme your application.
I get these kind of similar requirements. Sometimes it wont be much about the looks but about the navigation flow of the application and how new views or activities are animated. From my experience, there is no easy way to do it. So I end up making a lot of adjustments and hacks to get the job done. And I over bill the client. :)
Btw you could also consider libraries such as Sencha Touch, it will look the same in all phones that use a webkit browser.

AFAIK there are no 'iOS-alike' widget libraries for Android.
Because of this, you could reasonably charge the client more for both development and support, thereby providing an incentive to stick with the standard Android UI design and principles.

There is no library to port iphone views to Android but if you are starting both applications from the scratch you have two possible approach to share views between both platforms.
First one is using WebViews and coding HTML, JS and CSS. This kind of app is called hybrid.
Second one is using openGL. You can do it directly or using a framework like cocos2d-x.
Depending on what you are willing to you should choose what to use.

Developing PhoneGap for Android - Best practice for different screen size / pixel density

I have recently completed the development of an iPhone application in phonegap and we are now completing the Android version of the application and I was hoping to turn to the SO community for some answers in best practice for getting your app to look right across every device. My approach was going to be to use sencha.io for all of the images and use em/percentage based flexible layout across the app so it scales based on available screen real estate. Is this approach fair, does anyone
have recommendations for workflow or implementaion?
Thank you in advance,
JN

In order for your app to look the same across all devices, use HTML5 and CSS (which you are already using with PhoneGap, correct?)
You must decide whether or not you want your android app to look like your iPhone app, or if you want it to look differently on a Android app, or if you want it look like your app regardless of platform.
Regardless of what route you take, the key to this to use well written and well formed HTML and CSS. When i say well written, i mean to not have any layout or styling depending on HTML and do all layout and styling with CSS.
From my personal experience, you are on the right track with percentage/em.
As for sencha.io, i have never heard of that. But i personally don't see what that does that you can't do with just CSS and HTML5.
Be sure to test on as many different devices as you can!
As a side note, i would recommend not using many images to help users reduce load times and data usage.