DEV Community: Denis Shtabnoy

React Native AppState - A workaround to detect screen lock

Denis Shtabnoy — Sun, 28 Mar 2021 22:06:43 +0000

Hello devs 👋

Today I'm gonna tell you about a hacky way to detect screen lock in react native applications (iOS only).

As you probably already know, React Native gives you the AppState API, which helps to monitor the app state changes. But it's a bit restrictive, meaning that it has only three different states to look after (for Android, it's only two): active, inactive, and background.

Problem

I worked on the app where I needed to track when a user locks the screen. I hadn't used AppState in react native applications before, so I was hoping that background meant "the screen is locked". So I checked the basic flow of these states on my iPhone using Expo. I put a console.log in the render method and started looking at the states in the terminal, turning the screen on and off and switching between the apps.

Unfortunately, it turned out that the app always goes through the background state no matter if you lock the screen or swipe to the Home screen or switch between the apps. And it doesn't only go directly to the background state but also goes through inactive on its way to background. The only case when it doesn't go directly to the background is when you swipe up to the App Switcher and stay there for a while before swiping right or left to another app. This is the inactive state.

App states

So basically, we can divide the state changes into three different scenarios:

Whenever a user goes to the Home Screen, swipes to another app, or turns off the screen: active -> inactive -> background.
If a user goes to the App Switcher without swiping to another app: active -> inactive.
When a user brings the app back to the foreground: background -> active.

In the search for solutions

Obviously, none of these cases fitted my need to track the screen lock. So I searched for some answers on the internet that could help me solve it. It turned out that the only way to do so is to exploit the magic of Native Modules. That means that I should either write a native module myself or use a third-party library to fill this gap.

None of the options seemed very compelling to me. First of all, I'm not a swift or a kotlin programmer, and I don't have much time to look into it. Of course, it's fun to learn new stuff, but only when it's systematic, planned and balanced approach. Not when you have to learn something new ad hoc to solve a little problem that you have right here right now.

That's why we usually use someone else's wheels instead of inventing our own. And this is when the third-party libraries and modules are at our service. So I looked for some React Native libraries on GitHub and found only this package.

But it is three years old, and it didn't work for me, unfortunately. And since I don't know how to debug native modules and I didn't want to spend more time on this, I continued searching, but everything else that I found was only some Objective C pieces of code like this one.

Another reason why I didn't want to use or create a native module for it was that I didn't want to eject from Expo because with it, React Native development is easier and much more fun. And of course, eventually, I would also have to write two different native modules: one for android and one for iOS.

Workaround

So I thought that maybe there is a way to bypass that limitation somehow, and I started looking closely at the behavior of that state changes. I noticed that when I minimize the app, i.e., go to the Home screen, the app goes from the inactive state to background a bit slower than when I lock the screen.

Using the code from the App State React Native tutorial, I added two Date objects to check the time difference, and it turned out that it was drastic.

export default class App extends React.Component {
  state = {
    appState: AppState.currentState,
  };
  a: any = 0;
  b: any = 0;

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState: any) => {
    if (nextAppState == 'inactive') {
      this.a = new Date();
    }
    if (nextAppState == 'background') {
      this.b = new Date();
      console.log(this.b - this.a);
    }
    if (nextAppState == 'active') {
      this.a = 0;
      this.b = 0;
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Current state is: {this.state.appState}</Text>
      </View>
    );
  }
}

The first scenario finished in ~800ms, while the latter one finished within 5-8ms. This is about 100 times faster to lock the screen than to minimize the app.

Thus, we can write an if statement to check a transition from inactive to background. If it is done in less than 10ms, we can assume that it is the screen lock, and if more than 100ms we can assume that it is all other cases.

Conclusion

I understand that it is a completely unstable and very hacky workaround to make it work without any native modules and keeping Expo in the game. Of course, the numbers might be different from one version of iOS or Expo to another. Also, they might vary in the final build.

And this only works for iPhones because Android, unfortunately, doesn't have the inactive state. But it has focus and blur events, which might fix this issue.

If you have any other solutions to this problem or some stable native modules, please share them with me. I would be glad to hear how you tackled this problem if you ever faced it. Also, any Android solution would be appreciated as well.

Thank you! And happy coding!

Touching a quantum computer

Denis Shtabnoy — Tue, 09 Jun 2020 22:21:46 +0000

Try to remember the first time you saw a computer. Just a regular computer based on a binary set of rules, that we all use now. What did you feel back then? It was like a whole new world hidden inside it. The whole new universe was captivating you with its infinite tools and options. Some dinosaurs can remember computers without a GUI, only text-based terminal where you could gently ask "whoami", and your "metal servant" would kindly respond with your name. I saw my first PC not that long ago, about 15 years ago, at one of my local buddies home. That computer was powered by Microsoft's Windows XP, which was the most popular version of Windows back then. I was fascinated even by the welcoming screen with that famous sound and a "bliss" background of California's Wine Country (my favorite was Stonehenge anyway). And its graphic editor "Paint" would cause even more awe, admiration and joy. Later, when you started to get used to a computer, it started to reveal you more and more secrets and its endless possibilities.

Today we live on the verge of a new technology revolution and we have a unique possibility to witness its birth in the form of quantum computers. And not only witness but touch it. By touching I mean not a literal touching, but running a task on it, experiment and get some graphical feedback. Probably you can even literally touch it if you're close to these universities and giant tech companies that have them in their mysterious basements where they are breaking cryptographic protocols and achieving "quantum supremacy". But I'm gonna tell you about some remote opportunities of touching a quantum computer.

I don't remember exactly when I first heard about quantum computing, but once it settled in my head, it started to slowly grow there fueling my interest in that field. So from time to time I read some articles here and there about this mysterious topic not understanding much at first, but slowly acquiring basic ideas behind it. The main question you always have to ask yourself about any new technology is "why does it exist?", or rephrasing it, "why have people even invented it, for what purpose?". And this always helps to come to an understanding of every advance or progress that humans did. It also always means that there was something imperfect, something that was not enough to solve some problems, something that had to be changed in order to improve a technology, to simplify sophisticated tasks, to unfold a whole new branch of possibilities.

In case of computing there always has been a problem with representing physical processes and simulating behavior of atoms and particles. These simulations are particularly useful in some realms of physics, chemistry, biology and medicine. They are based on quantum properties of matter, and therefore it has always been a challenge to write even a simplest simulation of a simplest molecule on a regular computer, cause it involves too many states of too many particles that are highly intertwined with each other. To put it simply all this things that could probably help us understand our world better, decode our genome or even find a cure from cancer are actually not possible to write even on the fastest supercomputer. I'm not going to dig deeper into the basics of quantum computing or quantum mechanics. For this purpose there's a great resource that explains everything you need to know about it in a very rigorous and strict scientific way.

So this seemingly inconceivable branch of science kept haunting me forcing me to read more technical papers, than just mundane trivial explanations, where an author uses some wierd analogies just so even your grandma could understand it. And then finally I stumbled upon a D-Wave website, a Canadian company that produces quantum computers and drives a lot of R&D in that area. To my utter amazement and complete surprise it turned out that they also provide a possibility to use their quantum computers in the cloud.

Stop for a couple of seconds here and ponder on this for a while. Quantum computer... in the cloud! Isn't it amazing? And furthermore, it's been there for quite some time now. I couldn't find an exact date when cloud quantum computers became a thing, but wikipedia says that back then in 2011 D-Wave announced first commercially available quantum computer. I have no idea how you could access this incredible machine almost 9 years ago, but now so many new tech companies, who provide quantum computing as a service, have emerged, like IBM with its IBM Q Experience, Microsoft with LIQUil, Google with its Quantum Playground and others. And all of the offer an incredible tool set to play around with their quantum computers. But for now I just focus on two of them, D-Wave and IBM. And I will try to describe you my experience with working with their quantum machines and express my feelings about that.

I started to play around with D-Wave system called Leap, cause it was basically first that I found out there as I previously said. And it swallowed me completely. I was very excited by their demos. For instance, factoring with a quantum computer is so straightforward and well written, that it immediately became so clear to me, what the advantage of using a quantum computer for that kind of tasks is, and that our current cryptographic algorithms would be so weak for this incredible machines. Also, this demo maps all known features of binary computing to their twin brothers in the quantum world. So bits become qubits, logic gates become couples (basically, a bunch of qubits bundled together). And the icing on the cake, the most thrilling and exciting part, something that really hooked me on and forced me to write this post is the ability to run this demo on a real quantum computer hidden behind the curtains of the browser and network connection. A real physical D-Wave 2000Q quantum computer, that you can "touch" via code. Just think about it. These computers are still such a rare commodity. Only few companies and institutes have them and even fewer can afford to provide a service over cloud for everyone. And we have now a unique opportunity to try these things out, even though we still can not see them directly.

And of course everything comes with a price. Because of its structure complexity it's very hard to build, maintain and fix them. Therefore they are very expensive this days. This leads to the scarcity of these machines and to the time limits developers have to apply to reduce a rising demand. That's why after I ran my very first demo on a quantum computer, I saw that scary circle showed me how much time I have left. Actually I spent not that much by running just one factoring demo (because this demo was just about factoring number 21), about 0.36% of all the time available to me. But does that even matter if you can play with a real quantum machine?

But this is just a tip of an iceberg. They created their own integrated into browser VSCode-like IDE, where you can run your own arbitrary python algorithms and challenge their computer to "solve your problems". Besides demos there are ready-to-use examples for problems that fit for quantum computers very well, great documentation and a learning platform. Seems like a really good place to start your journey into the vague world of quantum computing.

Later I also found another great quantum cloud service made by another well-known mastodon tech company, that no one calls International Business Machines anymore. This one was as good as D-Wave or even better. It provides the same feature of having these jupyter python notebooks where you can run your code against their quantum beasts. But also they have a nice interactive circuit building tool, where you can create a program by just dragging and dropping predefined elements of quantum circuits onto the board and then run it and see the result. For this ones you don't even need to have any programming skills. What's better with IBM is that "they have a ton load of money" they give your this all for free. But because of that, there's a long list of people willing to test their beautiful programs and you have to stay in line for quite some time (it was about 5-10 min for me). That's why ingenious engineers of IBM created a quantum simulator that you can also try. And you'll get result very fast, almost instantly, just wait when an http response comes back to you with the data from the server.

It reminds me of the days when I was a kid and few people in my little town had computers back then. The majority would still go to so called "computer clubs" to play some computer games or surf the internet. They had to pay an hourly fee to get some time on those PCs with Windows 98 which were powered by incredibly fast Pentium III processors. And even then computers weren't that rare as quantum computers are today. And now, that era has long gone and changed to the era of social networks and mobile devices. It's fun to reminisce and get nostalgic about those times and compare it to the reality we have now. It helps to extrapolate changes into the future and assume that eventually everyone will have a personal quantum computer with its tiny cryostat encompassing its QPU made of millions of qubits. With that amount of power potentially you'll be able to bruteforce any modern encryption. That's why scientists already stay up all nights working on post-quantum cryptography, but that's another story.

On the other hand, quantum computers now are designed to solve some specific tasks like analyzing complex molecules and chemical processes, finding new materials and using them to boost progress. So you would probably say that not everyone needs a quantum computer to share their instagram stories or watch new videos of their favorite blogger. That is actually true. You don't need to have a quantum computer for such trivial tasks. But if you're a scientist, a developer, an engineer or just a curious person who wants to contribute to something important for humanity, you will definitely appreciate a small personal quantum computer instead of using cloud-based mega expensive machines on the other side of the world. Also, quantum computers could be really helpful in the field of AI, cause machine learning matches really well with quantum computing and these two branches of science would definitely help one another in the future.

Resources

https://quantum-computing.ibm.com/
https://cloud.dwavesys.com/leap