React Native and how to (partly) integrate it in your native app

React Native
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
With Hot Reloading, you can even run new code while retaining your application state.
React Native combines smoothly with components written in Objective-C, Java, or Swift.

React Native

Currently it's full monty or none: Either you use React Native completely for you app or you can't use it at all, e.g. for a single widget or screen. If you face the same situation take a look at:

Electrode Native: The Platform For Integrating React Native Into Your Apps

Electrode Native offers a streamlined integration of React Native into existing mobile applications. With Electrode Native, there will no longer be a need for an engineer who specializes in both mobile and React Native technology in order to put the two technologies together. For your existing mobile application, there is no heavy infrastructure, code, or development lifecycle changes. Electrode Native takes care of all that while providing quite a few more capabilities!

Medium.com

Electrode Native is a mobile platform that simplifies development and streamlines the integration of React Native components into existing mobile applications. Electrode Native requires minimal changes to the existing mobile code base and infrastructure. Using Electrode Native, you can leverage React Native potential in your mobile application.

electrode.io

Comments

Most Favorite Posts

Server-driven UI (SDUI): Meet Zalandos AppCraft and AirBnB Lona

A short WTF: Joe Birch: SERVER DRIVEN UI, PART 1: THE CONCEPT Zalando seems to follow the SDUI principle as well - defining a common design language and construct the screens on the backend while displaying them natively on the clients. They even go one step further; they implemented a mighty toolset to enable non-technical stakeholders to define their own native app screens Compass: Web tooling to create screens and bind data Beetroot: Backend service that combines the screen layout definition with the data Lapis/Golem: iOS/Android UI render engines Crazy cool! Good job, guys (when you do an open-source release?) To even move faster a Flutter based UI render engine implementation was great! See also AirBnB Lona SDUI approach Building a Visual Language Why Dropbox sunsetted its universal C++ mobile project and AirBnB its React Native implementation

Judo App - Server Driven UI out of the box

Judo App Judo brings server-driven UI to your iOS and Android apps. Build user interfaces visually in a fraction of time and publish them instantly without submitting to the app store. Build Experiences - With No Code The Judo app for macOS, available through the App Store, is built for design professionals with common keyboard shortcuts and familiar concepts like canvas, layers and inspector panel. Workflow is streamlined with the ability to drag and drop media files directly into your experiences and manage your own Judo files in Finder. Manage Creative Execution A Judo experience is interactive and can include text, images, video and buttons. An experience may be part of a screen, a single screen, or more typically multiple linked screens. Judo supports screen transitions, carousels, horizontal scrolling and modals. Clients can add custom fonts and define global colors and these are updates applied universally. Effortlessly Deploy Judo Cloud syncs your experiences with your iOS and

Dark Theme (Dark Mode) in Android WebViews, WKWebViews and CSS

So your apps just implemented a shiny new dark theme and it’s looking 👌 There are lots of benefits to having a dark theme in your application, and having it consistent throughout your application allows for a great user experience. But what happens when the the user runs into a WebView in your app? Support: if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... } Set: WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON) Current setting: val forceDarkMode = WebSettingsCompat.getForceDark(webView.settings) Joe Birch Assuming your question is asking how to change the colors of the HTML content you are displaying in a WKWebView based on whether light or dark mode is in effect, there is nothing you do in your app's code. All changes need to be in the CSS being used by your HTML content. CSS dark mode via :root variables, explicit colors and @media query: :root { color-scheme: light dark; --h1-color: #333;

Backend-driven native UIs

Backend-drive native UIs John Sundell Slide Share Using Back-End Design to Create Customizable Front-End Mobile Experiences By controlling the front end of mobile apps from the back end we can build customized experiences at runtime, creating cleaner interfaces and reducing load times. Nithin Rao UX Magazine The Hub Framework Welcome to the Hub Framework - a toolkit for building native, component-driven UIs on iOS ( no Android support released yet ). It is designed to enable teams of any size to quickly build, tweak and ship new UI features, in either new or existing apps. It also makes it easy to build backend-driven UIs. The Hub Framework has two core concepts - Components & Content Operations. Spotify LeeGo: Build UI without UIView LeeGo is a lightweight Swift framework that helps you decouple & modularise your UI component into small pieces of LEGO style's bricks, to make UI development declarative, configurable and highly reusable. Wang Sheng Jia

netfox - A lightweight, one line setup, iOS network debugging library!

A lightweight, one line setup, network debugging library that provides a quick look on all executed network requests performed by your app. It grabs all requests - of course yours, requests from 3rd party libraries (such as AFNetworking, Alamofire or else), UIWebViews, and more Very useful and handy for network related issues and bugs Implemented in Swift 2.1 - bridged also for Objective-C Start To start netfox add the following line in didFinishLaunchingWithOptions: method of your AppDelegate Swift NFX.sharedInstance().start() Invoke netfox UI Just shake your device and check what's going right or wrong! Shake again and go back to your app! GitHub kasketis/netfox

ImageOptim

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations. ImageOptim seamlessly integrates various optimisation tools: PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. It solves too the Xcode bug: corrupt PNG file. ImageOptim

KSCrash

Another crash reporter? Why? Because all existing solutions fall short. PLCrashReporter comes very close, but not quite: It can't handle stack overflow crashes. It doesn't fill in all fields for its Apple crash reports. It can't symbolicate on the device. It only records enough information for an Apple crash report, though there is plenty of extra useful information to be gathered! As well, each crash reporter service, though most of them use PLCrashReporter at the core, has its own format and API. KSCrash is superior for the following reasons: It catches ALL crashes. Its pluggable server reporting architecture makes it easy to adapt to any API service (it already supports Hockey and Quincy and sending via email, with more to come!). It supports symbolicating on the device. It records more information about the system and crash than any other crash reporter. It is the only crash reporter capable of creating a 100% complete Apple crash report (including thre

iOS & Android Development

Search This Blog