#Jetifier

[dahlbrendan]

Jetify launches Testpilot, its AI QA engineer https://techcrunch.com/2025/01/28/jetify-launches-testpilot-its-ai-qa-engineer/

[critchpodcast]

Jetify startet mit Testpilot: KI-gestützte Qualitätssicherung für Entwickler

Jetify startet mit Testpilot: KI-gestützte Qualitätssicherung für Entwickler: https://www.it-boltwise.de/jetify-startet-mit-testpilot-ki-gestuetzte-qualitaetssicherung-fuer-entwickler.html

[ryadel]

React Native with Push Notifications and Firebase - Part 3 of 5

In this five-part tutorial we'll see how we can create a sample React Native app (you might call it a "Hello World" or "boilerplate") that will be capable of receiving Push Notifications using Firebase. Such guide could be a great headstart for React Native beginners, yet also for those intermediate or experienced developers who want to know more about push notifications: how they work, what are their best usage scenarios and how much they can be an improvement for almost any mobile app. For the sake of simplicity this tutorial has been splitted into multiple parts, each one dedicated to a specific sub-topic: Part 1 of 5: Understanding Push Notifications, in which we'll try to understand what push notifications actually are and the impact they could have (when used properly) on a typical client-server app. Part 2 of 5: Setup React Native and Firebase, where we'll deal with the installation and configuration of our whole development stack: React Native, the Firebase SDK and the Visual Studio Code environment, together with the required settings to get our app ready to work with Android and iOS. Part 3 of 5: Configure the Firebase Service, in which we'll create the Firebase Project and configure the Firebase Push Notification Services to ensure that our React Native app will be able to receive push notifications through the Firebase API on any Android and iOS device. Part 4 of 5: Design and Test the React Native UI, where we'll test our front-end skills by laying out a React-Native UI in order to make our app actually able to receive push notifications and send HTTP requests to the server to remotely keep track of our actions - and possibly fire subsequent push notifications to other clients. Part 5 of 5: Server-Side Handler, in which we'll use ASP.NET Core to create a sample, lightweight web server that will be able to receive HTTP requests issued by the clients and/or feed them with push notifications through the Firebase API. In this third post we'll see how we can configure the Firebase Service for Android and iOS environments.

Create the Firebase project

Now that our app is up and running, we just need to configure the Firebase Service to ensure that our React Native application will be able to receive push notifications through the Firebase API. Create a Google account (if you don't have one already). Navigate to the Google Firebase website. Click to the Get Started button. Add a new Firebase project.

Configuring the Firebase Service

Once the project is ready, you'll be asked to add one or more app on it. More specifically, we need to add two apps: one for Android and one for iOS. Firebase Android App Add a new Android app by clicking on the android logo and fill in the relevant values.

Once done, you'll be given the chance to download a google-services.json file containing the required configuration to run Firebase on the Android version of your React Native app: download and save it within the /android/app/ folder of your React Native app, just as explained and illustrated on the web page itself:

Download the google-services.json file and placing it in the appropriate folder, then get ready to go ahead. Steps 3 and 4 can be skipped, as we already performed their relevant tasks in the part 2 of this guide: for this reason, just click the Next button a couple times press the Next button a couple times to enter into the Run your app to verify installation phase. This is basically a ping test that Firebase will do to verify that your app can connect to its API, thus ensuring that the SDK has been installed correctly. As soon as the test runs, you will see a grey message saying that Firebase is trying to check for your app presence. Leave the web page open, switch to Visual Studio Code and run your React Native app in debug mode. If you did everything correctly, the app should run with no issues and show the "Welcome to React" sample view on your emulator (or test phone) screen:

Right after that, switch back to the Firebase testing page and ensure that the app has been detected there as well. If everything is OK you should be able to see the following green message:

Our Firebase Android App is complete. Now we need to do the same with the iOS App. Firebase iOS App Creating the iOS app is rather similar to the Android process we've just dealt with. Go back to the project dashboard, then click the Add app button to add a new iOS app: click on the iOS logo when asked to choose a platform and then fill in the relevant values to the Add Firebase to your iOS app form, just like we did with the Android app.

Once you've done, click Register App and then Next to continue to the step 2, wher e you'll be given the chance to download a GoogleService-info.plist file containing the required configuration to run Firebase on the iOS version of your React Native app: download and save it within the /ios// folder of your React Native app, the same folder where the Info.plist file is. If you use XCode, you can take the picture shown on the Firebase web page as a useful reference:

Again, the next two steps (3 and 4) can be skipped, as we already performed the mentioned tasks in the part 2 of this guide: for this reason, just click the Next button a couple times to enter into the Run your app to verify installation phase. This is basically a ping test that Firebase will do to verify that your app can connect to its API, thus ensuring that the SDK has been installed correctly. As soon as the test runs, you will see a grey message saying that Firebase is trying to check for your app presence. Leave the web page open, switch to your Mac's XCode and run your React Native app in debug mode.

Conclusion

That's it! If everything went good, it means we've successfully created our Firebase project, the Android and iOS Firebase app, and tested our connection between them and our React Native app... meaning that we can already receive push notifications on our device(s)! Now we need to deal with our React-Native UI in order to make our app actually able to receive push notifications. Part 4 of 5: Implement the React Native UI   Read the full article

[nhacly]

Failed to launch emulator on Android Studio

Failed to launch emulator on Android Studio

I am presently building a react-native app and I get this erroneousness message everytime I run : react-native run-android erroneousness message : info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 1052 file(s) to forward-jetify. Using 8 workers... info Starting JS server... info Launching emulator... error Failed to launch…

[veeehaaa]

@shadowdemon95 @majestic-moon @k-i-nd @kryex @ultra-fashion-universe-blog @catfishgabriel @inflictivee @dimflow @imsadfornoreason @dutcheva-blog @hzylzz @tniranj @frenchjedi @silkysaturnn @revolucija-snova @missangela-le @thtblessedgirlcici @neunoia @jetify @1fashiondiva-blog @matchingsleeves @donkeyslap @cock-martins-blog @dp-hereandthere @teaforterry @marxlce-blog @rfusher @thisispureblissxo @ratchethoesandcameltoes @lovelydancinglily 

Ray-Ban Sunglasses

[t-baba]

Getting Started with the React Native Navigation Library

One of the most important aspects of React Native app development is the navigation. It’s what allows users to get to the pages they’re looking for. That’s why it’s important to choose the best navigation library to suit your needs.

If your app has a lot of screens with relatively complex UI, it might be worth exploring React Native Navigation instead of React Navigation. This is because there will always be performance bottlenecks with React Navigation, since it works off the same JavaScript thread as the rest of the app. The more complex your UI, the more data has to be passed to that bridge, which can potentially slow it down.

In this tutorial, we’ll be looking at the React Native Navigation library by Wix, an alternative navigation library for those who are looking for a smoother navigation performance for their React Native apps.

Prerequisites

Knowledge of React and React Native is required to follow this tutorial. Prior experience with a navigation library such as React Navigation is optional.

App Overview

In order to demonstrate how to use the library, we’ll be creating a simple app that uses it. The app will have five screens in total:

Initialization: this serves as the initial screen for the app. If the user is logged in, it will automatically navigate to the home screen. If not, the user is navigated to the login screen.

Login: this allows the user to log in so they can view the home, gallery, and feed. To simplify things, the login will just be mocked; no actual authentication code will be involved. From this screen, the user can also go to the forgot-password screen.

ForgotPassword: a filler screen, which asks for the user’s email address. This will simply be used to demonstrate stack navigation.

Home: the initial screen that the user will see when they log in. From here, they can also navigate to either the gallery or feed screens via a bottom tab navigation.

Gallery: a filler screen which shows a photo gallery UI.

Feed: a filler screen which shows a news feed UI.

Here’s what the app will look like:

You can find the source code of the sample app on this GitHub repo.

Bootstrapping the App

Let’s start by generating a new React Native project:

react-native init RNNavigation --version react-native@0.57.8

Note: we’re using a slightly older version of React Native, because React Native Navigation doesn’t work well with later versions of React Native. React Native Navigation hasn’t really kept up with the changes in the core of React Native since version 0.58. The only version known to work flawlessly with React Native is the version we’re going to use. If you check the issues on their repo, you’ll see various issues on version 0.58 and 0.59. There might be workarounds on those two versions, but the safest bet is still version 0.57.

As for React Native version 0.60, the core team has made a lot of changes. One of them is the migration to AndroidX, which aims to make it clearer which packages are bundled with the Android operating system. This essentially means that if a native module uses any of the old packages that got migrated to the new androidx.* package hierarchy, it will break. There are tools such as jetifier, which allows for migration to AndroidX. But this doesn’t ensure React Native Navigation will work.

Next, install the dependencies of the app:

react-native-navigation — the navigation library that we’re going to use.

@react-native-community/async-storage — for saving data to the app’s local storage.

react-native-vector-icons — for showing icons for the bottom tab navigation.

yarn add react-native-navigation @react-native-community/async-storage react-native-vector-icons

In the next few sections, we’ll be setting up the packages we just installed.

Setting up React Native Navigation

First, we’ll set up the React Native Navigation library. The instructions that we’ll be covering here are also in the official documentation. Unfortunately, it’s not written in a very friendly way for beginners, so we’ll be covering it in more detail.

Note: the demo project includes an Android and iOS folders as well. You can use those as a reference if you encounter any issues with setting things up.

Since the name of the library is very long, I’ll simply refer to it as RNN from now on.

Android Setup

In this section, we’ll take a look at how you can set up RNN for Android. Before you proceed, it’s important to update all the SDK packages to the latest versions. You can do that via the Android SDK Manager.

settings.gradle

Add the following to your android/settings.gradle file:

include ':react-native-navigation' project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')

Gradle Wrapper Properties

In your android/gradle/wrapper/gradle-wrapper.properties, update Gradle’s distributionUrl to use version 4.4 if it’s not already using it:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

build.gradle

Next, in your android/build.gradle file, add mavenLocal() and mavenCentral() under buildscript -> repositories:

buildscript { repositories { google() jcenter() // add these: mavenLocal() mavenCentral() } }

Next, update the classpath under the buildscript -> dependencies to point out to the Gradle version that we need:

buildscript { repositories { ... } dependencies { classpath 'com.android.tools.build:gradle:3.0.1' } }

Under allprojects -> repositories, add mavenCentral() and JitPack. This allows us to pull the data from React Native Navigation’s JitPack repository:

allprojects { allprojects { repositories { mavenLocal() google() jcenter() mavenCentral() // add this maven { url 'https://jitpack.io' } // add this } }

Next, add the global config for setting the build tools and SDK versions for Android:

allprojects { ... } ext { buildToolsVersion = "27.0.3" minSdkVersion = 19 compileSdkVersion = 26 targetSdkVersion = 26 supportLibVersion = "26.1.0" }

Lastly, we’d still want to keep the default react-native run-android command when compiling the app, so we have to set Gradle to ignore other flavors of React Native Navigation except the one we’re currently using (reactNative57_5). Ignoring them ensures that we only compile the specific version we’re depending on:

ext { ... } subprojects { subproject -> afterEvaluate { if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) { android { variantFilter { variant -> def names = variant.flavors*.name if (names.contains("reactNative51") || names.contains("reactNative55") || names.contains("reactNative56") || names.contains("reactNative57")) { setIgnore(true) } } } } } }

Note: there are four other flavors of RNN that currently exist. These are the ones we’re ignoring above:

reactNative51

reactNative55

reactNative56

reactNative57

android/app/build.gradle

On your android/app/build.gradle file, under android -> compileOptions, make sure that the source and target compatibility version is 1.8:

android { defaultConfig { ... } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } }

Then, in your dependencies, include react-native-navigation as a dependency:

dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" implementation "com.facebook.react:react-native:+" implementation project(':react-native-navigation') // add this }

Lastly, under android -> defaultConfig, set the missingDimensionStrategy to reactNative57_5. This is the version of RNN that’s compatible with React Native 0.57.8:

defaultConfig { applicationId "com.rnnavigation" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5" // add this versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86" } }

The post Getting Started with the React Native Navigation Library appeared first on SitePoint.

by Wern Ancheta via SitePoint https://ift.tt/34ZFDci

[ryadel]

React Native, Push Notifications and Firebase - Part 1 of 5

In this five-part tutorial we'll see how we can create a sample React Native app (you might call it a "Hello World" or "boilerplate") that will be capable of receiving Push Notifications using Firebase: this can be a great headstart for React Native beginners, yet also for those intermediate or experienced developers who want to know more about push notifications: how they work, what are their best usage scenarios and how much they can be an improvement for almost any mobile app. For the sake of simplicity, the tutorial has been splitted into multiple parts, each one dedicated to a specific sub-topic: Part 1 of 5: Understanding Push Notifications, in which we'll try to understand how push notifications actually are and the impact they could have on a typical client-server app. Part 2 of 5: Setup React Native and Firebase, where we'll deal with the installation and configuration of our whole development stack: React Native, the Firebase SDK and the Visual Studio Code environment, together with the required settings to get our app ready to work with Android and iOS. Part 3 of 5: Configure the Firebase Service, in which we'll setup the Firebase Service to ensure that our React Native app will be able to receive push notifications through the Firebase API on any Android and iOS device. Part 4 of 5: Design and Test the React Native UI, where we'll test our front-end skills by laying out a React-Native UI in order to make our app actually able to receive push notifications and send HTTP requests to the server to remotely keep track of our actions - and possibly fire subsequent push notifications to other clients. Part 5 of 5: Server-Side Handler, in which we'll use ASP.NET Core to create a sample, lightweight web server that will be able to receive HTTP requests issued by the clients and/or feed them with push notifications through the Firebase API. In this first post we'll talk about push notifications.

Introduction

Before going further, let's spend a couple minutes to properly understand how a push notifications workflow tipically works for most apps, which can be useful to understand what do we have to do. Let's say we want to create a Personal Calendar app that can be used to configure events and (optionally) schedule reminders that will be sent to the user whenever these events are about to start: the best method we can use to "send" these reminders are notifications. The user will see them, even if the app is minimized, and (optionally) click on them to open the app and get further info on that topic. This is a typical example of an interactive app that makes use of notifications to fullfill some of its features: the users add events, configure reminders and receive notifications accordingly. The big question here is, who is in charge of sending these notifications? The answer of such question is not trivial, as it entirely depends on how the app itself actually works. Serverless or Client-Server? Here's a list of the most common implementation patterns that we could theoretically follow to implement a Personal Calendar app in a decent way: Serverless: both the app and the events database, including the reminders, are entirely installed on the mobile phone. We won't need to fetch/receive anything from the web, therefore we won't need a server - as well as dealing with the whole HTTP stack. Such approach grants a tremendous gain in terms of development costs and overall complexity, which definitely is a a huge pro, yet also a lot of cons in terms of data resilience, backup plans, app usage through different clients and/or devices, and a lot of "cloud-based" features we would be forced to give up. These cons are often very relevant, to the point that serverless apps are a small minority. It's a viable approach for simple apps that are supposed to do specific "offline" tasks, such as torch lightning or size measurement apps. Server-Client: the app is meant to be a client installed on the mobile phone, but the database, as long as most business logic and data-handling tasks, are handled using a collection of services installed on a remote public or private server. This is the most common approach for almost any app nowadays: games, instant-messaging, social networks, and almost any app which requires to fetch any possible kind of data from the outside. Push Notifications If we choose to make our Personal Calendar a serverless app, we wouldn't need to handle push notifications at all... because there would be nothing to push. The word "push" implies that there's something coming from the outside: serverless apps doesn't interact with a server, therefore there would be noting to receive. Conversely, if we choose to follow the client-server path, our Personal Calendar app could greatly benefit from such feature: push notifications are the perfect way to have the server take track of our reminders and sends them to any client that should receive them: that way we could support multiple clients for a single user, a "reminder sharing" feature that would allow us to "share" our events (and their reminders) with other users, and so on. Long story short, we can say that push notifications would be a huge feature even for a rather "simple" app such as a Personal Calendar, meaning that we should really favor the client-server approach over the serverless one. In more general terms, we can say that whenever there are good reasons to pick the client-server approach, it means that our app could also benefit from push notifications. That being the case, imagine how important push notifications would be for instant-messaging apps like Whatsapp, Line, Telegram, and virtually any app who needs to support some form of real-time communication between clients. In these kinds of scenarios push notifications could play a major role, as they can be used to istantly notify any relevant action performed by a single client to any other "connected" clients. Push Notifications Workflow The following diagram depicts a standard Push Notification Workflow that could be used on a typical instant messaging app:

As we can see, the push notifications are originated by a single HTTP request sent by the Client to the Server (black line) to inform it about a relevant action: a message, yet also a channel join (or part), an avatar change, a logout, and so on. The HTTP request is received by the server in a RESTful fashion and initiates a series of subsequent tasks: The Server, typically a Web Server, calls the Database Server (orange line) to log the action performed by the client and save the relevant changes (for example, save its new message in the messages table). However, the interaction with the DB Server is bidirectional, as the server, immediately after writing the new data, also needs to retrieve from the DB the necessary info required to send a push notification to the affected clients to notify them of the new action - in our example, the new received message. Those info are typically the unique IDs which the notification service can use to identify those client: if we use Firebase, they are called FCM Tokens (read here for additional info).  It goes without saying that those IDs, which act just like a fingerprint of each client, must be collected before sending the push notifications, for example when the client installs the app for the first time, or the user creates its account, or during the login phase... But we'll deal with that later on. Once the action has been logged and/or saved and the unique tokens have been retrieved, the Server can call the notification service (in our example, Google Firebase) using its API (blue line), and tell it to send the push notifications to the affected clients: doing that is almost as easy as sending the new action's details (in our example, the new message) to the notification service, together with the list of unique tokens to send them to. The notification service (in our example, Firebase) sends the push notifications to the clients (green lines), who can receive and consume them thanks to the notification service's SDK (the client-side modules) which has been installed on them during the development phase. A push notification can be consumed in a number of ways: showing its title and body attribute values in the device's notifications area, showing a dedicated popup, launch our app and/or bring it to foreground, and so on. In our example, since the push notification contains info about a new message, consuming it would most likely mean to show it in the chat view within a "bubble", create a notification popup to tell the user that a new message has arrived, and maybe even incrementing the "notification counter" on our app's icon (if the app is minimized). That's basically it: now we should have a pretty clear idea about what we need to implement whenever we want to add push notification support to our app. Part 2 of 5: Setup React Native and Firebase Read the full article