I have a question related to using native modules with react-native apps.
As described here it appears that application created with CRNA is not supposed to be used with native modules. Is it still true?
Recently I was able to integrate #shoutem/ui module with my app created with CRNA (as far as I understand this is native module because it requires me to run react-native link command) and it was working just fine on my android and ios phones and ios simulator as well.
As this PR explains, using react-native link should display error message but I cannot observe it at all.
Has anything changed? This is really confusing. Or maybe my understanding of native modules in react-native is wrong?
If you've imported the fonts used in the toolkit (as described in this Github issue):
async componentWillMount() {
await Font.loadAsync({
'Rubik-Black': require('./node_modules/#shoutem/ui/fonts/Rubik-Black.ttf'),
'Rubik-BlackItalic': require('./node_modules/#shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
'Rubik-Bold': require('./node_modules/#shoutem/ui/fonts/Rubik-Bold.ttf'),
'Rubik-BoldItalic': require('./node_modules/#shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
'Rubik-Italic': require('./node_modules/#shoutem/ui/fonts/Rubik-Italic.ttf'),
'Rubik-Light': require('./node_modules/#shoutem/ui/fonts/Rubik-Light.ttf'),
'Rubik-LightItalic': require('./node_modules/#shoutem/ui/fonts/Rubik-LightItalic.ttf'),
'Rubik-Medium': require('./node_modules/#shoutem/ui/fonts/Rubik-Medium.ttf'),
'Rubik-MediumItalic': require('./node_modules/#shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
'Rubik-Regular': require('./node_modules/#shoutem/ui/fonts/Rubik-Regular.ttf'),
'rubicon-icon-font': require('./node_modules/#shoutem/ui/fonts/rubicon-icon-font.ttf'),
});
this.setState({fontsLoaded: true});
}
You shouldn't have issues using Shoutem UI toolkit components.
Fonts are linked into the app's binary and are therefore considered a native dependency.
Related
Plugin nativescript-mapbox is not included in preview app on device
tns plugin add nativescript-mapbox
anyone experiencing this?
It means exactly what it says. The Nativescript Preview app only has a limited number of libraries installed, making it usable only for basic, simple apps.
The Preview app comes with a predefined set of NativeScript plugins. If your app > utilizes a plugin that is not present in the Preview app, you will see a warning > message and your app might not work as expected.
tns preview documentation
The best solution while developing your app is to use emulators.
As a side note, from my experience, I've found that the iOS Preview app has more plugins and generally works better.
Does anyone know if it’s possible to develop a fully Native iOS and Android based Social Media Platform using React Native and Swift or Objective C to integrate a native instant messenger app into the newsfeed via a floating icon?
Our website is responsive and would make a great hybrid app using a native wrap but we are looking to stray away from web based solutions and want to try and build a fully native solution with React Native and possible Swift or Objective C. We discovered a decent IM sdk that is feature rich but is written in Objective C and Swift and wish to use this Instant Messaging Solution and attempt to match chat graphics with the rest of the app.
All thoughts, ideas and solutions are appreciated.
You can write code in Objective-C/Swift or Java for developing your own modules and to take advantage of native API for iOS or Android. But React-Native has some build-on modules that would simplify your workd just by writing JavaScript and that the magic of React-Native. It makes possible to build Apps in JavaScript that use real native elements and not just WebViews.
If you need to write your own modules in Objective-C/Swift or Java you should make use of the Bridge that implements React-Native for sharing data between Native-Code and Javascript code.
"Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions." from React-Native oficial website
I intend to develop an app for our site but one of the main worry is that I need to use a 3rd party payment gateway that only provides SDK for android in Java and iOS in Objective-C.
I want to know if it is appropriate to use React-Native or Ionic for the app. I am not sure which of these framework supports integration of native integrated and work flawlessly.
Hope someone with experience can help advise on this.
Thanks.
For react-native you can write your native modules for both android(JAVA) and ios(OBJECTIVE-C). It provides you right to write code in module and then register the module for your further use inside your application.
You can read the complete docs from :-
For android https://facebook.github.io/react-native/docs/native-modules-android.html
and for ios https://facebook.github.io/react-native/docs/native-modules-ios.html
Material-UI v0.18.7 docs example has a build for ios/android, but it is not clear to me if it also works for react-native. While I could make it work for react (web), I could not make it work for react-native.
Is it possible to run the docs example for react-native ?
PS: If it doesn't work for react-native, then why do the ios/android build exist ?
android and ios was only folders for poc, and that implementation has react-native 0.17 version only, react native changed a lot through the time and now has ^0.47 version.
As I see, previous roadmap of working with react native included writing of native components and reorganisation of project,. So material-ui 0.18.7 does not support react-native,
As they wrote, there are a lot of troubles:
Bringing the web API to the native
We gonna have to make sacrifices, I'm expecting some web feature to be really hard to implement on native, for instance, the CSS media queries, the CSS animations. (advanced CSS rules)
Handling missing native API in the web
Some of the missing web API features is around touch handling, scroll & infinite list view, native components like a DatePicker or a Drawer.
So, it is only included in roadmap, check out discussion about it here:
https://github.com/callemall/material-ui/issues/593
How are Rhodes, Phonegap, and Appcelerator able to take Javascript or Ruby, and compile them into binaries for app SDKs that normally require apps to be written in Obj-C, Java, and others?
Jeff Haynie, Appcelerator co-founder, explains how Titanium Mobile works here.
Phonegap uses the default browser rendering engine, and uses that to display your application.
The javascript is then handled by the native (compiled) part of the framework.
Appcelerator uses something simular, but compiles the whole application if i remember correctly.
MoSync uses a somewhat simular setup as javaME.
Rhodes uses local server. It uses this to communicate with the device.
A Javascript interpreter is built into the webkit browser engine, and the iPhone/iOS SDK gives enough access to this interpreter to run nearly an entire app written in Javascript, with just a tiny Objective C wrapper to start things up.
Android supports native ARM machine code though the NDK, so nearly any language with a compiler that can create a stand-alone ARM binary (but requiring little to no OS access) can be used as a library and accessed via the NDK interface from a Java app stub.
I've created an open source project http://propertycross.com that helps select a cross-platform mobile framework by showing the same application implemented with Sencha, Titanium, Xamarin and more. The project also includes details of how each framework works. It should help you compare end-user experience, code, developer experience and code shared between the various options.