Update old dependencies

.eslintignore

@@ -0,0 +1 @@
+example/

.eslintrc

@@ -1,6 +1,10 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false
+  },
   "rules": {
     "arrow-parens": 0,
     "comma-dangle": 0,

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,72 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master" ]
+  schedule:
+    - cron: '18 23 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'java', 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.gitignore

@@ -2,3 +2,4 @@
 npm-debug.log*
 node_modules
 lib
+.vscode/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always"
+}

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

example/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "module:metro-react-native-babel-preset"]
+}

example/package.json

@@ -12,7 +12,7 @@
     "react-native-swipeable": "../"
   },
   "devDependencies": {
-    "babel-preset-react-native": "1.9.1",
+    "metro-react-native-babel-preset": "0.72.0",
     "react-test-renderer": "15.4.1"
   }
 }

example/swipeable-example.js

@@ -1,134 +1,179 @@
-import React, {Component} from 'react';
-import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import Swipeable from 'react-native-swipeable';
-
-export default class SwipeableExample extends Component {
+import React, { Component } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Swipeable from "react-native-swipeable";
 
+class SwipeableExample extends Component {
   state = {
-    currentlyOpenSwipeable: null
+    currentlyOpenSwipeable: null,
   };
 
   handleScroll = () => {
-    const {currentlyOpenSwipeable} = this.state;
+    const { currentlyOpenSwipeable } = this.state;
 
     if (currentlyOpenSwipeable) {
       currentlyOpenSwipeable.recenter();
     }
   };
 
   render() {
-    const {currentlyOpenSwipeable} = this.state;
+    const { currentlyOpenSwipeable } = this.state;
     const itemProps = {
       onOpen: (event, gestureState, swipeable) => {
         if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
           currentlyOpenSwipeable.recenter();
         }
 
-        this.setState({currentlyOpenSwipeable: swipeable});
+        this.setState({ currentlyOpenSwipeable: swipeable });
       },
-      onClose: () => this.setState({currentlyOpenSwipeable: null})
+      onClose: () => this.setState({ currentlyOpenSwipeable: null }),
     };
 
     return (
       <ScrollView onScroll={this.handleScroll} style={styles.container}>
-        <Example1 {...itemProps}/>
-        <Example2 {...itemProps}/>
-        <Example3 {...itemProps}/>
+        <Example1 {...itemProps} />
+        <Example2 {...itemProps} />
+        <Example3 {...itemProps} />
       </ScrollView>
     );
   }
 }
 
-function Example1({onOpen, onClose}) {
+function Example1({ onOpen, onClose }) {
   return (
     <Swipeable
-      leftContent={(
-        <View style={[styles.leftSwipeItem, {backgroundColor: 'lightskyblue'}]}>
+      leftContent={
+        <View
+          style={[styles.leftSwipeItem, { backgroundColor: "lightskyblue" }]}
+        >
           <Text>Pull action</Text>
         </View>
-      )}
+      }
       rightButtons={[
-        <TouchableOpacity style={[styles.rightSwipeItem, {backgroundColor: 'lightseagreen'}]}>
+        <TouchableOpacity
+          style={[styles.rightSwipeItem, { backgroundColor: "lightseagreen" }]}
+        >
           <Text>1</Text>
         </TouchableOpacity>,
-        <TouchableOpacity style={[styles.rightSwipeItem, {backgroundColor: 'orchid'}]}>
+        <TouchableOpacity
+          style={[styles.rightSwipeItem, { backgroundColor: "orchid" }]}
+        >
           <Text>2</Text>
-        </TouchableOpacity>
+        </TouchableOpacity>,
       ]}
       onRightButtonsOpenRelease={onOpen}
       onRightButtonsCloseRelease={onClose}
     >
-      <View style={[styles.listItem, {backgroundColor: 'salmon'}]}>
+      <View style={[styles.listItem, { backgroundColor: "salmon" }]}>
         <Text>Example 1</Text>
       </View>
     </Swipeable>
   );
 }
 
-function Example2({onOpen, onClose}) {
+function Example2({ onOpen, onClose }) {
   return (
     <Swipeable
       leftButtonWidth={45}
       leftButtons={[
-        <TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'papayawhip'}]}>
+        <TouchableOpacity
+          style={[styles.leftSwipeItem, { backgroundColor: "papayawhip" }]}
+        >
           <Text>1</Text>
         </TouchableOpacity>,
-        <TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'olivedrab'}]}>
+        <TouchableOpacity
+          style={[styles.leftSwipeItem, { backgroundColor: "olivedrab" }]}
+        >
           <Text>2</Text>
         </TouchableOpacity>,
-        <TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'mistyrose'}]}>
+        <TouchableOpacity
+          style={[styles.leftSwipeItem, { backgroundColor: "mistyrose" }]}
+        >
           <Text>3</Text>
         </TouchableOpacity>,
-        <TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'mediumaquamarine'}]}>
+        <TouchableOpacity
+          style={[
+            styles.leftSwipeItem,
+            { backgroundColor: "mediumaquamarine" },
+          ]}
+        >
           <Text>4</Text>
         </TouchableOpacity>,
-        <TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'lightslategray'}]}>
+        <TouchableOpacity
+          style={[styles.leftSwipeItem, { backgroundColor: "lightslategray" }]}
+        >
           <Text>5</Text>
         </TouchableOpacity>,
-        <TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'ivory'}]}>
+        <TouchableOpacity
+          style={[styles.leftSwipeItem, { backgroundColor: "ivory" }]}
+        >
           <Text>6</Text>
-        </TouchableOpacity>
+        </TouchableOpacity>,
       ]}
-      rightContent={(
-        <View style={[styles.rightSwipeItem, {backgroundColor: 'linen'}]}>
+      rightContent={
+        <View style={[styles.rightSwipeItem, { backgroundColor: "linen" }]}>
           <Text>Pull action</Text>
         </View>
-      )}
+      }
       onLeftButtonsOpenRelease={onOpen}
       onLeftButtonsCloseRelease={onClose}
     >
-      <View style={[styles.listItem, {backgroundColor: 'paleturquoise'}]}>
+      <View style={[styles.listItem, { backgroundColor: "paleturquoise" }]}>
         <Text>Example 2</Text>
       </View>
     </Swipeable>
   );
 }
 
 class Example3 extends Component {
-
   state = {
     leftActionActivated: false,
-    toggle: false
+    toggle: false,
   };
 
   render() {
-    const {leftActionActivated, toggle} = this.state;
+    const { leftActionActivated, toggle } = this.state;
 
     return (
       <Swipeable
         leftActionActivationDistance={200}
-        leftContent={(
-          <View style={[styles.leftSwipeItem, {backgroundColor: leftActionActivated ? 'lightgoldenrodyellow' : 'steelblue'}]}>
-            {leftActionActivated ?
-              <Text>release!</Text> :
-              <Text>keep pulling!</Text>}
+        leftContent={
+          <View
+            style={[
+              styles.leftSwipeItem,
+              {
+                backgroundColor: leftActionActivated
+                  ? "lightgoldenrodyellow"
+                  : "steelblue",
+              },
+            ]}
+          >
+            {leftActionActivated ? (
+              <Text>release!</Text>
+            ) : (
+              <Text>keep pulling!</Text>
+            )}
           </View>
-        )}
-        onLeftActionActivate={() => this.setState({leftActionActivated: true})}
-        onLeftActionDeactivate={() => this.setState({leftActionActivated: false})}
-        onLeftActionComplete={() => this.setState({toggle: !toggle})}
+        }
+        onLeftActionActivate={() =>
+          this.setState({ leftActionActivated: true })
+        }
+        onLeftActionDeactivate={() =>
+          this.setState({ leftActionActivated: false })
+        }
+        onLeftActionComplete={() => this.setState({ toggle: !toggle })}
       >
-        <View style={[styles.listItem, {backgroundColor: toggle ? 'thistle' : 'darkseagreen'}]}>
+        <View
+          style={[
+            styles.listItem,
+            { backgroundColor: toggle ? "thistle" : "darkseagreen" },
+          ]}
+        >
           <Text>Example 3</Text>
         </View>
       </Swipeable>
@@ -139,23 +184,24 @@ class Example3 extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 20
+    paddingTop: 20,
   },
   listItem: {
     height: 75,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center",
   },
   leftSwipeItem: {
     flex: 1,
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-    paddingRight: 20
+    alignItems: "flex-end",
+    justifyContent: "center",
+    paddingRight: 20,
   },
   rightSwipeItem: {
     flex: 1,
-    justifyContent: 'center',
-    paddingLeft: 20
+    justifyContent: "center",
+    paddingLeft: 20,
   },
-
 });
+
+export default SwipeableExample;