I am currently building a mobile app using react native. This is a parent app where parents can view marks, homework, fee details etc. We work with multiple schools and each school will need an app of their own. Only changes between these apps as of now is the splash screen and the app icon.
What can I do to keep my codebase more organized and less redundant between every app so that it will be easy to maintain, and also for new releases?
I have done a similar task before. I ported 4 different apps with unique styles from a single react native code base. You can read some related bits here.
Basically you just need to rename your app before building for ios and android.
If you need to apply different styles it is a much harder task just to explain here. However to give a hint, you need to make your app styles reusable like a theme. In my case I was using nativebase themeing. And before renaming the project I was changing the theme folder to be used for each app with a bash script. This gist might give you an idea.
For those looking for an answer,
The right way to build different apps out of the same codebase is to use android variants https://developer.android.com/studio/build/build-variants. This will allow you to sign your app with different keys for each variant. Each of these variants needs to have an appropriate folder inside the android directory, which is the place you configure splash screen, assets etc.
If you are using expo, this is not possible as you are not supposed to mess with native code. expo only supports release channels (dev, staging, prod) versions of your app.
Note: I didn't have to work with ios, so can't provide any useful links myself. But I am sure there will be something similar.
Related
I'm learning React. My goal is to create a few components that render cross-platform. Specifically, I'd to create components with the option to a) render in the browser b) render on the server c) render natively on Windows and d) render natively in iOS. Based on my limited understanding, it seems like each of these cases are possible. I'm trying to understand the simplest way to do this though. It almost seems like each scenario requires a different approach, which almost results in four different components. This seems like a misunderstanding on my part though.
If I wanted to render a button in the four scenarios above, what is the simplest approach? I figured a tutorial showing this would exist, but I haven't found one.
Thank you
First of all, try to use packages that support all of your environments. But if you need separate implementation then you should do it like this
Button example you mentioned:
create a button folder
create a Button.js or index.js file
create Button.[enviroment].js files you need and export only one Button component in the root Button.js file. like this:
-- /components
-- /button
-- `index.js`
-- `Button.web.js`
-- `Button.android.js`
-- `Button.windows.js`
// Button.web.js
export const Button = ({title}) => {
// web specific implementation
}
// Button.windows.js
export const Button = ({title}) => {
// windows specific implementation
}
// index.js
export {Button} from './Button'
What I know from React is that React components are different from React Native ones. you can't have a single component to be used both in React and React Native and you should create separate projects for each one. but in React Native you code once and you can run it on both android and IOS and as they introduced recently no windows and mac too (1).
So to wrap things up, you should separate your web application from your native applications (which can be android, IOS, windows, and mac) but since React and React Native are not that different from each other, it won't be as hard as starting a new project.
Your react native code works in both Android and Ios(unless you use some libraries which are platform specific) . To run your react native code in web, use react-native-web. For windows and macOS use this.
Best part with all this is, you write the code only once but run it everywhere.
Interesting - I thought I'd post some related thoughts based on my own efforts on unified UIs. It may not answer your question directly, but I hope it is of interest.
REACT AND APPROACH
I would argue that you should use the right tool for the job. React is a great choice for Single Page Apps, and also surprisingly good for Desktop Apps:
An SPA will run in all desktop and mobile browsers on any OS
A desktop app will run on Windows, MacOS and Linux
MOBILE
I work a lot with security tech, which requires up to date native support. In these cases Swift and Kotlin shine, and technologies such as React Native become hard work, because you are always going through extra layers, with many annoyances.
CODE EXAMPLES
My ongoing struggles with cross platform UI technologies are here, and they include a React SPA and React desktop app, both of which deal with difficult OpenID Connect security flows.
UI code is the same in all cases, including mobile, but I avoid React for mobile apps. Code sharing would be more effort than it is worth. Also, in a real company, mobile and web is often developed by different teams, who should be able to choose their own tech.
SUMMARY
The thing that should be shared is design patterns, not technology or code. Design patterns will scale over time, whereas code sharing will not.
Is it possible to take a desktop app made with Electron js and somehow make it work on mobile? I read it's possible to convert React applications to Electron applications and I was wondering if it's possible to do it the other way around. It's likely it might not be possible to convert it 1:1 because of native functions etc. probably.
I haven't tried anything because I doubt it's possible - I just want confirmation.
Depends on what it does. If the functionality would work equally well on a website inside a browser then yes. You'll just need to store data somewhere else than on user's file system. But if the electron app uses native or node features, like accesses local files, then probably not so easily.
I made a website (not yet online), it uses HTML, CSS, Javascript, only. No React or Angular, and I have the following problem :
I'd like to make a cross-platform application based on it (for iOS, Android, Windows, Linux and MacOS).
What's the best way to do that ?
My searches :
I did few searches, not really satisfactory, because it seems I'll need to re-make my client-website entirely !
I found 2 ways : React Native and NativeScript, like described here.
Have you some other option ?
If you don't, is it really impossible to keep the code in React ? Like I can see there
I'm a bit confused, and I don't know what I should do to perform what I want.
Thank you for all answers you could give me !
For Desktop Development you can try Electron. It's a js library which helps you build cross platform applications by using Node, Chromium and js.
You can also go one step ahead and add react to it.
Applications like VSCode, Skype, Microsoft Teams, Spotify and I think even Slack are made using it.
For Mobile Development, you can go with React Native. In this way you'd make a cross platform mobile dev app too.
The pros are that using these tech stack you can build modern cross platform apps. For a web dev, this is the way to go.
The cons of Electron:
It's little heavy on memory, but nothing that would be a bottleneck.
The cons of React Native:
Is not suited for apps that require heavy computation and it's bundle size is significantly larger than the native apps
I want to add to this :There is an other option nw.js for desktop app it's like electron using chromium ,node and js.
and for the front-end you can use angular, react, vue it is really as you want .This is a link https://nwjs.io/ (It is cross-platform too ).
For mobile development I think I will recommend you : NativeScript (https://play.nativescript.org/?_ga=2.144049845.1620166462.1585302566-1314322155.1583139217) . It is a good option also cause you can easily add your website(html,css,javascript files ) in your NativeScript webview as your interface and I think this option won't take you time as making an other one with react-native (even if I know that react-native have his webview too).
So go and have a look to this ::How to load a local html file into a NativeScript webview .
Then all your work will be the database in sqlite but even for this you have :https://www.npmjs.com/package/nativescript-sqlite and other things to go quickly
:https://market.nativescript.org/
I am new to react native I want to know can we able to share the same code base for web-based and for the mobile application using react native.
If yes then how to do that?
I think you're referring to using React to build a web application and then wondering if you can port it to React-Native? You can share the same idea's, method, and architecture. But no, the code doesn't translate 100%, really not even 50%. React vs React-Native use different things, for example React uses < Div >'s while React-Native uses < View >'s, img to < Image >, etc. So while figuring out many of the design questions and implementation for the web version will surely make your RN development faster. You still need to plan on the RN port being the same Development process (plus longer for bug testing on the many different devices) and allow a developer adequate time.
The answer is yes. You can share the same code using react-native-web.
But keep in mind that the idea behind React and React Native projects is that you could learn one time and use everywhere so their goal is to make possible to use a very similar architecture, data flow, etc. but not sharing the same code. Also, a lot of packages and third-party components will not work as expected. So, react-native-web is a very interesting project and you should definitely give it a chance, but most of the times it will not do the job 100%.
I am working on a pet project ( web application ) and I was wondering if I should use react because it would be easy to create native apps from this code (in future if I need to).
And if the answer is yes, what are the best practices to follow for
most resuse?
If the answer is no, can you recommend an alternative?
Some more information about my situation.
I am relatively new to react and my alternative will be good ol' html with bootstrap and jquery. I am considering using asp.net mvc and web api.
Sharing app logic between a React Web app and a React Native app, while keeping the individual component rendering unique to each platform is possible!
In my opinion, it is a great option we have available. I will give you an overview of the approach and a few advices.
In an ideal world, we would be able to share 100% of the code. As far as I know, that isn't possible, but still we can share a lot of the code. Although React Native is like React, it is very important to note that the rendering code is different. Instead web things like <div> or <span>, you use React Native components like <View>, <Text> and other built-in components.
However, the business logic in most cases is just JavaScript though and that's one of the important things which we can share!
The plan
Based on the Flux architecture you are using, it would mean that your store(s), reducers, actions would be shared code, as well as most of the business logic (inside services or whatever) and the constants and utilities too.
The UI layer would then be written specifically for each native platform using React Native and for web using React. Not only because it’s necessary to replace the HTML elements with React Native components, but also because the components will probably have a very different behavior on the mobile app.
Some General Guidelines / Advices
Consider a good architecture and code structure in order to share as much code (and application logic) as possible. Try to separate the UI presentation components (which will be different for each platform).
Take a look at the JavaScript Environment specifics in the React Native docs. When using React Native, you're going to be running your JavaScript code in two environments:
On iOS simulators and devices, Android emulators and devices. React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies.
Consider the different strategies for sharing the code. In order to accesses shared code, the apps you're building doesn't have to all live in the same codebase or git repository.
More realistically, you would have two or more projects hosted separately, so an npm package is one of the easiest ways to share code between them.
This is easy as making a new package and setting it as a dependency inside each of your projects. For the path to the shared project, you can use a git repository rather than pointing to a public package on npm.
Even though you're building only the web app now, you could spend some time thinking about how you could generalize some of the shared code, so it is easier to re-use it in future.
It's possible and viable. You must have a view for each platform (web/android/ios), because each one have your components..
The business logic must be out of the view. Use flux can easy your project with native, because the it move the api interaction to a data layer, letting the view be just a view.