capacitor VS react-native

If you've been struggling with testing and iterating on your Firebase project, constantly having to push to a live environment just to see your changes, then you're in luck! In this post, we'll show you how to integrate Firebase Emulator into your Vite, Vue project using Ionic Capacitor, giving you the power to test, iterate and reset your data, all from the comfort of your local machine.

In the blog post linked above, we talked about creating mobile applications with Vue, Vite, and Ionic Capacitor.

Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

There is https://capacitorjs.com/ which is fairly well used. I've only ever tried it with a traditional single page app and it works well for that. Never tried it with sveltekit.

https://github.com/ionic-team/capacitor/discussions/3899#dis...

Apparently it's an issue with Android's webview interaction with accessibility settings.

https://engineering.fb.com/2022/09/30/android/launching-a-ne...

Facebook ships their own webview implementation to solve a couple other webview issues, but that's not really a viable solution for everyone else

Here's the site: https://capacitorjs.com/

And yes, Capacitor apps can target all of those platforms from a single codebase. If you ever need help or have questions feel free to reach out to me on twitter (link in bio)!

There is if you use Capacitor.js (and Ionic framework - not sure if you need it to accomplish what you want)

This meant I had to decide on a new framework and so I did that. I basically had to rebuild what I already did, thankfully I was able to re-use a lot of what was already done. I'm now getting back to where I was initially and I think I honestly made the right choice.

There are layers that offer access to native APIs like capacitor, cordova and nativescript. Apparently sometimes multiple of them should be used, but I didn't understand what are the differences even after reading the announcement. These seem to be frontend agnostic technologies and Capacitor is apparently the more modern choice at the moment.

Konsta UI + Capacitor.JS + some native code for operating the printer. You can see the result here.

React Native (and Expo) is a framework that allows us to build native mobile applications using Javascript and React. React Native also gives us access to many of the sensors and features that exist on phones, such as the camera, which we will use to capture images for our app.

i am sad to say that lists and tables are totally unsolved problems, look how many issues there are in react's virtualized list[1] (just an example, not picking on react)

but i think we are talking about the same thing :) programming is creative, and for me it is art, i love it.

https://github.com/facebook/react-native/issues?q=is%3Aissue...

You mentioned you want the mobile app to be for Android only. You could consider using Flutter or React Native, which will allow your app to run on both, iOS and Android. However, this will probably take some extra time since you might need to learn a new language. So if you're set on using Android Studio and presumably Java or Kotlin, then go with that.

Firstly I am not talking about the old architecture and I have already gone through this

The reason behind choosing my tech stack was to get to know modern SPA frameworks better. So naturally, my choice was React Native. As a novice in mobile development, I decided to start with Expo. It is a nice way to start the project since it contains a couple of templates as well as a nice debugging toolset.

/** * Sample React Native App * https://github.com/facebook/react-native * * @format */ import React from 'react'; import type { PropsWithChildren } from 'react'; import { Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native'; import { Colors, DebugInstructions, Header, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; import { NativeModules } from 'react-native'; import { PermissionsAndroid } from 'react-native'; import { MapboxNavigation } from './src/MapboxNavigationView'; type SectionProps = PropsWithChildren<{ title: string; }>; function Section({ children, title }: SectionProps): JSX.Element { const isDarkMode = useColorScheme() === 'dark'; return ( {title} {children} ); } function App(): JSX.Element { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; const { MapboxNavigationModule, TestModule } = NativeModules; const NewModuleButton = () => { const onPress = () => { MapboxNavigationModule.createNavigationEvent('25 Commerce Crescent, Kramerville, Johannesburg, 2090'); }; return ( ); }; const TestModuleButton = () => { const onPress = () => { TestModule.createTestEvent('25 Commerce Crescent, Kramerville, Johannesburg, 2090'); }; return ( ); }; const requestLocationPermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, { title: 'Need to know where you are Permission', message: 'Gief location access ' + 'so that I can navigate you.', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', }, ); console.log(granted) if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('You can use location'); } else { console.log('Location permission denied'); } } catch (err) { console.warn(err); } }; const requestNotificationPermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS, { title: 'Be notifed Dammit Permission', message: 'Gief permissions to notify ' + 'so that I can notify you.', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', }, ); console.log(granted) if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('You can use notfications'); } else { console.log('Notifications permission denied'); } } catch (err) { console.warn(err); } }; return ( Edit App.tsx to change this screen and then come back to see your edits. ); } const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', }, }); export default App;

If you want a single codebase for web and mobile I would look into react-native and react-native-web. You could probably code the web app with react-native-web, make it responsive and build it through react-native for mobile. Designing an app for mobile and for web can lead to significant difference though since the experience is quite different. Some things might make sense for a mobile and not for a desktop or the opposite. So I wouldn't discard completely the idea of having separate codebases. Highly depends on the app though, totally valid for many use cases.

The only reason why DevClient apps can't be deployed through TestFlight is because the React Native dev tools use parts of Apples API that aren't public. Apple checks for the use of non-public API and won't allow any apps that use to to be deployed through it's ecosystem. Luckily the only place where non-public API is used in React Native is inside RCTKeyCommands.m, a helper that registers key shortcuts that hardly anyone uses outside the Simulator. So the only thing this plugin does is disabling this one file and everything just works.

React Native - a popular framework for building mobile apps with JavaScript

[!] /bin/bash -c set -e #!/bin/bash # Copyright (c) Meta Platforms, Inc. and affiliates. # # This source code is licensed under the MIT license found in the # LICENSE file in the root directory of this source tree. set -e PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}" CURRENT_ARCH="${CURRENT_ARCH}" if [ -z "$CURRENT_ARCH" ] || [ "$CURRENT_ARCH" == "undefined_arch" ]; then # Xcode 10 beta sets CURRENT_ARCH to "undefined_arch", this leads to incorrect linker arg. # it's better to rely on platform name as fallback because architecture differs between simulator and device if [[ "$PLATFORM_NAME" == *"simulator"* ]]; then CURRENT_ARCH="x86_64" else CURRENT_ARCH="arm64" fi fi # @lint-ignore-every TXT2 Tab Literal if [ "$CURRENT_ARCH" == "arm64" ]; then cat <<\EOF >>fix_glog_0.3.5_apple_silicon.patch diff --git a/config.sub b/config.sub index 1761d8b..43fa2e8 100755 --- a/config.sub +++ b/config.sub @@ -1096,6 +1096,9 @@ case $basic_machine in basic_machine=z8k-unknown os=-sim ;; + arm64-*) + basic_machine=$(echo $basic_machine | sed 's/arm64/aarch64/') + ;; none) basic_machine=none-none os=-none EOF patch -p1 config.sub fix_glog_0.3.5_apple_silicon.patch fi export CC="$(xcrun -find -sdk $PLATFORM_NAME cc) -arch $CURRENT_ARCH -isysroot $(xcrun -sdk $PLATFORM_NAME --show-sdk-path)" export CXX="$CC" # Remove automake symlink if it exists if [ -h "test-driver" ]; then rm test-driver fi # Manually disable gflags include to fix issue https://github.com/facebook/react-native/issues/28446 sed -i.bak -e 's/\@ac_cv_have_libgflags\@/0/' src/glog/logging.h.in && rm src/glog/logging.h.in.bak sed -i.bak -e 's/HAVE_LIB_GFLAGS/HAVE_LIB_GFLAGS_DISABLED/' src/config.h.in && rm src/config.h.in.bak ./configure --host arm-apple-darwin cat << EOF >> src/config.h /* Add in so we have Apple Target Conditionals */ #ifdef __APPLE__ #include #include #endif /* Special configuration for ucontext */ #undef HAVE_UCONTEXT_H #undef PC_FROM_UCONTEXT #if defined(__x86_64__) #define PC_FROM_UCONTEXT uc_mcontext->__ss.__rip #elif defined(__i386__) #define PC_FROM_UCONTEXT uc_mcontext->__ss.__eip #endif EOF # Prepare exported header include EXPORTED_INCLUDE_DIR="exported/glog" mkdir -p exported/glog cp -f src/glog/log_severity.h "$EXPORTED_INCLUDE_DIR/" cp -f src/glog/logging.h "$EXPORTED_INCLUDE_DIR/" cp -f src/glog/raw_logging.h "$EXPORTED_INCLUDE_DIR/" cp -f src/glog/stl_logging.h "$EXPORTED_INCLUDE_DIR/" cp -f src/glog/vlog_is_on.h "$EXPORTED_INCLUDE_DIR/" patching file config.sub checking for a BSD-compatible install... /usr/bin/install -c checking whether build environment is sane... yes checking for arm-apple-darwin-strip... no checking for strip... strip checking for a thread-safe mkdir -p... ./install-sh -c -d checking for gawk... no checking for mawk... no checking for nawk... no checking for awk... awk checking whether make sets $(MAKE)... yes checking whether make supports nested variables... yes checking for arm-apple-darwin-gcc... /Library/Developer/CommandLineTools/usr/bin/cc -arch arm64 -isysroot checking whether the C compiler works... no xcrun: error: SDK "iphoneos" cannot be located xcrun: error: SDK "iphoneos" cannot be located xcrun: error: SDK "iphoneos" cannot be located xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos' /Users/apurvc99/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-04b94/missing: Unknown `--is-lightweight' option Try `/Users/apurvc99/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-04b94/missing --help' for more information configure: WARNING: 'missing' script is too old or missing configure: error: in `/Users/apurvc99/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-04b94': configure: error: C compiler cannot create executables See `config.log' for more details Couldn't install Pods. Updating the Pods project and trying again... > pod install --repo-update Auto-linking React Native module for target `rnVideoStreamerApp`: VisionCamera Framework build type is static library [Codegen] Generating ./build/generated/ios/React-Codegen.podspec.json Updating local specs repositories [!] CDN: trunk URL couldn't be downloaded: https://cdn.cocoapods.org/all_pods_versions_7_6_3.txt Response: Timeout was reached Couldn't install Pods. Updating the Pods project and trying again... Command `pod install` failed. └─ Cause: CDN: trunk URL couldn't be downloaded: https://cdn.cocoapods.org/all_pods_versions_7_6_3.txt Response: Timeout was reached