update example project to yarn and fix eslint issues

Author: testshallpass

Example/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
-};
+};

Example/App.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
-import { StyleSheet, SafeAreaView, View } from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, SafeAreaView, View} from 'react-native';
 import DropdownAlert from 'react-native-dropdownalert';
-import { PURPLE_COLOR, WHITE_COLOR, ITEMS, ReactNativeLogo } from './constants';
+import {PURPLE_COLOR, WHITE_COLOR, ITEMS, ReactNativeLogo} from './constants';
 import List from './List';
 const InfoIcon = require('./assets/info.png');
 
 export default class App extends Component {
-  _onSelect({ item, index }) {
+  _onSelect({item, index}) {
     switch (item.type) {
       case 'close':
         this._onProgrammaticClose();
@@ -15,17 +15,17 @@ export default class App extends Component {
         const interval = Math.floor(Math.random() * 4000 + 1);
         const title = `${item.type} \ncloses in ${interval / 1000} seconds`;
         // local image source
-        let payload = { message: 'HelloWorld', source: InfoIcon };
-        if (index % 2 == 0) {
+        let payload = {message: 'HelloWorld', source: InfoIcon};
+        if (index % 2 === 0) {
           // remote image source
-          payload = { message: 'HelloWorld', source: ReactNativeLogo };
+          payload = {message: 'HelloWorld', source: ReactNativeLogo};
         }
         this.dropDownAlertRef.alertWithType(
           item.type,
           title,
           item.message,
           payload,
-          interval
+          interval,
         );
     }
   }
@@ -45,10 +45,13 @@ export default class App extends Component {
     return (
       <View style={styles.container}>
         <SafeAreaView>
-          <List items={ITEMS} onSelect={({ item, index }) => this._onSelect({ item, index })} />
+          <List
+            items={ITEMS}
+            onSelect={({item, index}) => this._onSelect({item, index})}
+          />
         </SafeAreaView>
         <DropdownAlert
-          ref={ref => this.dropDownAlertRef = ref}
+          ref={ref => (this.dropDownAlertRef = ref)}
           containerStyle={{
             backgroundColor: PURPLE_COLOR,
           }}

Example/List.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { StyleSheet, Text, TouchableOpacity, FlatList } from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, Text, TouchableOpacity, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
 
 export default class List extends Component {
@@ -12,15 +12,19 @@ export default class List extends Component {
     onSelect: () => {},
   };
   render() {
-    const { items, onSelect } = this.props;
+    const {items, onSelect} = this.props;
     return (
       <FlatList
         keyExtractor={item => item.type}
         data={items}
-        renderItem={({ item, index }) => {
+        renderItem={({item, index}) => {
           return (
-            <TouchableOpacity style={[styles.button, { borderColor: item.backgroundColor }]} onPress={() => onSelect({ item, index })}>
-              <Text style={[styles.text, { color: item.backgroundColor }]}>{item.type}</Text>
+            <TouchableOpacity
+              style={[styles.button, {borderColor: item.backgroundColor}]}
+              onPress={() => onSelect({item, index})}>
+              <Text style={[styles.text, {color: item.backgroundColor}]}>
+                {item.type}
+              </Text>
             </TouchableOpacity>
           );
         }}

Example/README.md

@@ -2,19 +2,19 @@
 
 ## Installation
 
-* ```npm i -g react-native-cli```
 * ```brew install node```
 * ```brew install watchman```
+* ```brew install yarn```
 * ```gem install cocoapods```
 
 ## Up and running
 
 1. Navigate to Example directory (```cd ~/Example```).
-2. Install dependencies: ```npm i --save```.
-3. Install iOS cocoapods: ```cd ios && pod install```
-4. Start Metro Bundler: ```npm start```.
-5. For iOS,```npm run ios```. For Android, start an emulator then, do ```npm run android```.
+2. Install dependencies: ```yarn```.
+3. Install iOS cocoapods dependencies: ```cd ios && pod install```
+4. Start Metro Bundler: ```yarn start```.
+5. For iOS, ```yarn ios```. For Android, start an emulator then, do  ```yarn android```.
 
 ## Resources
 
-* <http://facebook.github.io/react-native/docs/getting-started.html>
+* <https://reactnative.dev/docs/getting-started.html>

Example/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-};
+};

Example/constants.js

@@ -4,28 +4,34 @@ export const ITEMS = [
   {
     backgroundColor: '#2B73B6',
     type: 'info',
-    message: "System is going down at 12 AM tonight for routine maintenance. We'll notify you when the system is back online.",
+    message:
+      "System is going down at 12 AM tonight for routine maintenance. We'll notify you when the system is back online.",
   },
   {
     backgroundColor: '#cd853f',
     type: 'warn',
-    message: 'Your cloud drive is about to reach capacity. Please consider upgrading to premium plan.',
+    message:
+      'Your cloud drive is about to reach capacity. Please consider upgrading to premium plan.',
   },
   {
     backgroundColor: '#cc3232',
     type: 'error',
-    message: "Sorry, we're having some technical difficulties. Our team will get this fixed for you ASAP.",
+    message:
+      "Sorry, we're having some technical difficulties. Our team will get this fixed for you ASAP.",
   },
   {
     backgroundColor: '#32A54A',
     type: 'success',
-    message: "Thank you for your order. We will email and charge you when it's on it's way.",
+    message:
+      "Thank you for your order. We will email and charge you when it's on it's way.",
   },
   {
     backgroundColor: PURPLE_COLOR,
     type: 'custom',
-    message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    message:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
   },
-  { backgroundColor: '#202020', type: 'close', title: 'close' },
+  {backgroundColor: '#202020', type: 'close', title: 'close'},
 ];
-export const ReactNativeLogo = 'https://facebook.github.io/react-native/docs/assets/favicon.png';
+export const ReactNativeLogo =
+  'https://reactnative.dev/docs/assets/favicon.png';

Example/index.js

@@ -1,3 +1,3 @@
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
 import App from './App';
-AppRegistry.registerComponent('DropDownAlert', () =>  App );
+AppRegistry.registerComponent('DropDownAlert', () => App);

Example/ios/Podfile.lock

@@ -250,7 +250,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  https://github.com/CocoaPods/Specs.git:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -308,31 +308,31 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  FBLazyVector: cb37b5590a27600f0a889222d7c1f019625f4168
-  FBReactNativeSpec: 6fda0eee5b059ee8ea0f845f4060620ff96b5b55
+  FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
+  FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  RCTRequired: 81db8debffc2eb932841fa02dcf5a2e911af74c1
-  RCTTypeSafety: 39a7d8643abe2460aef0adeb9acbe9401b579fff
-  React: 89f2294058332cf7c4feee644e17d5024da1f531
-  React-Core: c55956aa434fae94816b665f99d51d50f48d5993
-  React-CoreModules: c70b9db4f48e31474bb022716fff41983b335ce2
-  React-cxxreact: 1dbe583c02d15d269f13451d203e645bb233fc96
-  React-jsi: f9126dd5818fbd8fbf869be9bbc1c0543973e1a1
-  React-jsiexecutor: 752f034d0f007d1141a1c52ba9ef3fd9668fbfa7
-  React-jsinspector: 044105eea064aec81adc5e4d777a8f6589e7d094
-  React-RCTActionSheet: 49433f6e3659ba5d3ee650e44b9c18743ef9a7fc
-  React-RCTAnimation: 12f86a4e3542032329366b03bca2cc254a7c64a9
-  React-RCTBlob: ba90a4144ad478a022b79a4e8a1f150548d39425
-  React-RCTImage: f652d97e49f4b0f26c7df336e723a0d259179967
-  React-RCTLinking: e738422857085a1c40c57505a25920160d365783
-  React-RCTNetwork: d0d635ad07deed0c05a1b1499d1ab4ce5c41ac97
-  React-RCTSettings: ae6f8b64ee5c5e4fc629f5109042e122fd0fd14b
-  React-RCTText: 3f24042210886ee8c02613758013010be04b291e
-  React-RCTVibration: d55e1365be416980217914fe009e9d55dec02e03
-  ReactCommon: eb96b70a2a5bed775e919151fd77699fed52944c
-  Yoga: 6af72bedeaea291a3a3717772d6d41836f23a1b9
+  RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
+  RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
+  React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
+  React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
+  React-CoreModules: d04f8494c1a328b69ec11db9d1137d667f916dcb
+  React-cxxreact: d0f7bcafa196ae410e5300736b424455e7fb7ba7
+  React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
+  React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
+  React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
+  React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
+  React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
+  React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
+  React-RCTImage: 6b8e8df449eb7c814c99a92d6b52de6fe39dea4e
+  React-RCTLinking: 121bb231c7503cf9094f4d8461b96a130fabf4a5
+  React-RCTNetwork: fb353640aafcee84ca8b78957297bd395f065c9a
+  React-RCTSettings: 8db258ea2a5efee381fcf7a6d5044e2f8b68b640
+  React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
+  React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
+  ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
+  Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: 36b2d0b2ab69ee63e220c20b6d9ed8eb11f687e6
 
-COCOAPODS: 1.5.3
+COCOAPODS: 1.8.4