
To detect the shake event in React Native, we need to get access to the accelerometer sensor. The accelerometer sensor is a device that detects the movement of the device. 
> Note: This method is only for expo react-native applications.<br> If you're installing this in a bare React Native app, you should also follow [these additional installation instructions](https://github.com/expo/expo/tree/main/packages/expo-sensors).


## Platform Compatibility
> Android Device - ✅ 

> Android Emulator - ✅ 

> iOS Device - ✅ 

> iOS Emulator - ❌ 

> Web - ✅ 


* First, we need to install the expo-sensors package.<br>```expo install expo-sensors```
* In the Expo app<br>```import { Accelerometer } from 'expo-sensors';```

## Methods
```
Accelerometer.isAvailableAsync()
```
This method returns a promise that resolves to a boolean value indicating whether the accelerometer is available on the device.

```
Accelerometer.addListener(listener)
```
This method returns a subscription object that can be used to unsubscribe from the accelerometer.

```
Accelerometer.removeAllListeners()
```
This method removes all accelerometer listeners.

```
Accelerometer.setUpdateInterval(interval)
```
This method sets the update interval for the accelerometer.

## Example:
```
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Accelerometer } from 'expo-sensors';

export default function App() {
  const [data, setData] = useState({
    x: 0,
    y: 0,
    z: 0,
  });
  const [subscription, setSubscription] = useState(null);

  const _slow = () => {
    Accelerometer.setUpdateInterval(1000);
  };

  const _fast = () => {
    Accelerometer.setUpdateInterval(16);
  };

  const _subscribe = () => {
    setSubscription(
      Accelerometer.addListener(accelerometerData => {
        setData(accelerometerData);
      })
    );
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();
    return () => _unsubscribe();
  }, []);

  const { x, y, z } = data;
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Accelerometer: (in Gs where 1 G = 9.81 m s^-2)</Text>
      <Text style={styles.text}>
        x: {round(x)} y: {round(y)} z: {round(z)}
      </Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={subscription ? _unsubscribe : _subscribe} style={styles.button}>
          <Text>{subscription ? 'On' : 'Off'}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_slow} style={[styles.button, styles.middleButton]}>
          <Text>Slow</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_fast} style={styles.button}>
          <Text>Fast</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

function round() { ... } 
const styles = StyleSheet.create({ ... }); 
```
Source: [Expo Docs](https://docs.expo.dev/versions/latest/sdk/accelerometer/)

## Share ↗️ | Learn 🧑‍💻 | Support 🧑‍💻❣️

Detect Shake Events in React Native


JavaScript powers the web - it's the most important programming language you need to know as a web developer.

Here is an basic example code of Javascript:

```js
const basics = 'Okay, that should not be too difficult actually';

function printBasics() {
  console.log(basics):
}

printBasics();
```
### Recommended Courses on Udemy:
* [The Modern Javascript Bootcamp Course (2022)](https://www.udemy.com/course/javascript-beginners-complete-tutorial/) 
* [The Modern JavaScript Bootcamp](https://www.udemy.com/course/modern-javascript/)
* [JavaScript - The Complete Guide 2022 (Beginner + Advanced)](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/)

### Free websites were you can learn
* [w3schools](https://www.w3schools.com/js/)
* [Mozilla MDN docs](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
* [freeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)

Mastering JavaScript


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)


All Posts

Detect Shake Events in React Native

Mastering JavaScript

Getting Started with NextJS