We have a developed react native project using JavaScript, now we decided to have it's website too. We found out that Microsoft introduced ReactXP and it is able to release website too. is it possible to convert current react native project to reactXP?
Yes, it's possible. You'll need to replace tags like <View/> with <RX.View/>, <Text/> with <RX.Text/>, etc. Then, when compiling for the browser or native, ReactXP will internally exchange <RX.View/> etc. with the appropriate tag automatically depending on your current target (<div/> for the browser and <View/> for native).
But you don't have to exchange all tags with their <RX.* counterparts right away. Meaning you can still use a few <div/> etc. for the browser target and <View/> etc. for the native target. However, if you really only want one codebase and then cross-compile to any target, then you need to replace them all.
Styling is a bit different too: ReactXP doesn't have percentage values for width, height, etc.
Related
I'm creating a vue native app but the input text looks like an input text on HTML. I thought vue-native would create a native input with native styles per device.
Do I forget something?
I found https://nativebase.io/ which seems to be the solution I need. Since I'm new on this native apps, is this library the way to implement native styles per device?
While react-native renders native views, it doesn't take native (platform and os-version-specific) styles to apply to them. These would look different on each platform and version of the device, and also be impossible to style from react-native. There are some components that look like native ones (e.g. Button, Switch) but they are also styled from react-native so that you can override any styles you want
So yes, the only way to make react-native views look like native ones is to style them accordingly, and that's what libraries like nativebase do
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
I'm now studying framework react native native-base.
While reading document, I think it is little bit different with original code.
For example, <View> is replace to <Container>
Also many codes replace to native-base's style code like this.
So I'm wondering, are there a lot of people coding in native-base syntax?
Does native-base have any performance problem?
(I know that there are lots of good features, But I'm not talking about that. Just performance, and syntax...)
NativeBase framework are exposing exactly the same UX as natively written applications because NativeBase uses the React Native platform's default rendering and layout engine.
NativeBase allows to have a common codebase for all their application code.
NativeBase is targeted specially on the look and feel, and UI interplay of your app. NativeBase without a doubt fits in well with mobile applications (i.e. use of Container, Header, Footer etc) which cut downs one huge part of your app The Front end.
I've been evaluating React Native as a replacement for Cordova, and was wondering if there is a widely accepted solution for styled text inputs. I'd like to see text inputs rendered in Material Design on Android, and Apple style on iOS.
Do you have recommendations for a specific library, or will I have to write my own/combine multiple libraries? Thank you!
You could check out https://nativebase.io/ it supports platform specific default styling there are others as well like https://react-native-training.github.io/react-native-elements/ and http://www.xinthink.com/react-native-material-kit/ which has consistent styling regardless of platform.
Coming from a Cordova/Sencha Touch background I suggest you try to create your own style using only the default react native components, the reason is that before I was having the same question regarding component library that I could use so that I could target all platform at once, but react native isn't 100% cross platform and learning to style on different platform might give you an idea and feedback with your evaluation, unless your aiming to have a project as soon as possible and that is a different story.
As I know the first priority of React Native is not cross platform. It claims "learn once use everywhere" instead of "write once use everywhere". So there are a few specific components like StatusBarIOS, NavigatorIOS, AlertIOS. Although there are some cross platform alternative components like Navigator, StatusBar, etc, Facebook suggest us to use platform specific version for better performance.
But my question is why don't just wrap the platform specific version inside the universal version in the first place? For example, Navigator, why don't just use NavigatorIOS internally in iOS? Wouldn't it be nicer to keep the performance and make it cross platform at the same time?
Depends on what you mean by
But my question is why don't just wrap the platform specific version inside the universal version in the first place?
I was trying to build a so called cross-platform app. But I ended up writing too many if-else blocks for rendering simplest of platform-specific components. I scrapped the whole app altogether, and tried using better folder structure instead.
I created an src folder in root of the application. And then divided the app into api, views, components. The views and components were further divided into android and ios folders. Inside src folder, I had a main.js which contained Navigator.
This is what I prefer to do! You might want to do something else. That's okay. At the end of this learning experience, I found that Facebook was right. it is not write once use everywhere. It is learn once apply however you want! As long as your app is delivering 60 FPS experience to your user, anything is valid in React Native.