XLForm multi level selectors

I'm working on a very old iOS project that is using XLForm. I have to support a dynamic screen flow such as this attached

As XLForms is no longer on active development, I thought of asking the question here.

I've tried using XLFormOptionsObject and using a formSegueIdentifier to fully go custom but has not been that much helpful. If anyone has experience on a similar type of implementation using XLForms, any advice is really appreciated.

Side question; I can intercept the Screen's C selection on Screen B using formRowDescriptorValueHasChanged, but how do I then manually pass that back to Screen A to update it's value?

---

Screen A - Select Option > (tap pushes to Screen B)

Screen B - Option 1 (tap selected option 1, pops and updates screen A row value) - Option 2 (Same as option 1) - Grouped Options > (tap goes to screen C) - Option 3 (Same as option 1) ...

Screen C - Option 1 from Grouped options (tap selects option 1, pops Screen C & B to go to A and updates screen A's row value) - Option 2 from Grouped options (same as above) ...

from XLForm multi level selectors

Bluetooth headphones button event detection in javascript.

I am building a web app where i detect the headphones button event. I succeeded in capturing headphones button event when they are plugged in. Now i am trying to capture Bluetooth headphones next button event. Any help on this please.

Code for headphone button detection.

 document.addEventListener('volumeupbutton', () => {
   //Do something here
 }, false);

I need something similar to this.

from Bluetooth headphones button event detection in javascript.

Build React components library with Webpack 4

I'm currently building a library of React components and bundling it with Webpack 4.

Everything works just fine from building the library's bundle to publishing it on an npm registry.

But then, I'm not able to import any of its components in an other React application and get this error message at runtime:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

And here is the related code:

A dumb component from my components library: button/index.js

import React from "react";

const Button = () => <button>Foobar</button>;

export { Button };

The main entry point of my library index.js:

import { Button } from "./src/components/Button";

export { Button };

My Webpack config webpack.config.js:

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "commonjs",
    library: ""
  }
};

And finally, the import of this component in an other application:

import { Button } from "my-design-system";

I guess I'm missing something in my Webpack config or one of the property may be wrong, but after reading multiple posts and tutorials, I can't figure which one.

from Build React components library with Webpack 4