setup dropdown

package.json

@@ -33,6 +33,7 @@
     "react-native-confirmation-code-field": "^6.5.1",
     "react-native-datepicker": "^1.7.2",
     "react-native-device-info": "^8.1.2",
+    "react-native-dropdownalert": "^4.3.0",
     "react-native-fast-image": "^8.3.4",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-i18n": "^2.0.15",

src/RootView.js

@@ -10,12 +10,12 @@ import NoInternetComponent from './components/NoInternet';
 
 import DeviceInfo from 'react-native-device-info';
 import VersionChecker from './Screens/VersionChecker';
+import DropDown from './components/DropDown';
 
 enableScreens();
 
 const RootView = (props) => {
-  useEffect(() => {
-  }, []);
+  useEffect(() => {}, []);
 
   const checkVersion = (props) => {
     const verCurrent = DeviceInfo.getVersion();
@@ -28,10 +28,10 @@ const RootView = (props) => {
         <Modal isVisible={props.loadingModal.isVisible}>
           <SkypeIndicator color={'white'} />
         </Modal>
-
         <StackNavigation />
       </View>
       {/*<VersionChecker/>*/}
+      {/* <DropDown /> */}
       <NoInternetComponent />
     </>
   );

src/components/DropDown.js

+import React, {useRef, useEffect, useState} from 'react';
+import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
+import {
+  PURPLE_COLOR,
+  WHITE_COLOR,
+  ITEMS,
+  ReactNativeLogo,
+  InfoIcon,
+} from './constants';
+import List from './List';
+import DropdownAlert from 'react-native-dropdownalert';
+
+const DropDown = () => {
+  const [queueSize, setQueueSize] = useState(0);
+  let dropDownAlertRef = useRef(null);
+
+  useEffect(() => {
+    dropDownAlertRef.alertWithType('error', 'ads', 'message');
+  }, []);
+
+  const _onProgrammaticClose = () => {
+    dropDownAlertRef.closeAction();
+  };
+  const _onProgrammaticClear = () => {
+    dropDownAlertRef.clearQueue();
+  };
+  const _showAlertQueue = () => {
+    const types = ['info', 'warn', 'error', 'success', 'custom'];
+    const message =
+      'Officia eu do labore incididunt consequat sunt sint ullamco cillum.';
+    let count = 1;
+    types.map((type) => {
+      dropDownAlertRef.alertWithType(
+        type,
+        `Alert ${count} of ${types.length}`,
+        message,
+      );
+      count++;
+    });
+  };
+
+  const _onSelect = ({item}) => {
+    switch (item.type) {
+      case 'close':
+        _onProgrammaticClose();
+        break;
+      case 'clear':
+        _onProgrammaticClear();
+        break;
+      case 'show':
+        _showAlertQueue();
+        break;
+      default:
+        const inMilliSeconds = Math.floor(Math.random() * 4000 + 1);
+        const inSeconds = (inMilliSeconds / 1000).toFixed(2);
+        const title = `${item.type} closes in ${inSeconds}s`;
+        let payload;
+        if (item.type === 'custom') {
+          // example using remote image source in payload
+          payload = {source: ReactNativeLogo};
+        } else if (item.type === 'info') {
+          // example using local image source in payload
+          payload = {source: InfoIcon};
+        }
+        dropDownAlertRef.alertWithType(
+          item.type,
+          title,
+          item.message,
+          payload,
+          inMilliSeconds,
+        );
+    }
+    _updateQueueSize();
+  };
+
+  const _onClose = (data) => {
+    console.log(data);
+    _updateQueueSize();
+  };
+  const _onCancel = (data) => {
+    console.log(data);
+    _updateQueueSize();
+  };
+  const _onTap = (data) => {
+    console.log(data);
+    _updateQueueSize();
+  };
+  const _updateQueueSize = () => {
+    setQueueSize(dropDownAlertRef.getQueueSize());
+  };
+
+  return (
+    <View style={styles.container}>
+      <DropdownAlert
+        ref={(ref) => {
+          if (ref) {
+            dropDownAlertRef = ref;
+          }
+        }}
+        containerStyle={styles.content}
+        showCancel={true}
+        onCancel={_onCancel}
+        onTap={_onTap}
+        titleNumOfLines={2}
+        messageNumOfLines={0}
+        onClose={_onClose}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: WHITE_COLOR,
+    justifyContent: 'center',
+  },
+  content: {
+    backgroundColor: PURPLE_COLOR,
+  },
+  size: {
+    textAlign: 'center',
+    fontSize: 26,
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default DropDown;

src/components/Header/Drawer.js

@@ -124,7 +124,7 @@ const menus = [
     active: false,
     children: [
       {
-        title: 'CustomerCare',
+        title: 'contact',
         icon: R.images.iconPhone,
         screen: SERVICECUSTOMER,
         id: '81',

src/components/List.js

+import React from 'react';
+import {StyleSheet, Text, Pressable, FlatList} from 'react-native';
+
+const Button = () => ({
+  item = {title: '', type: '', color: '#202020'},
+  onSelect = () => {},
+}) => {
+  const text = item.title ? item.title : item.type;
+  return (
+    <Pressable
+      style={[styles.button, {borderColor: item.color}]}
+      onPress={() => onSelect({item})}>
+      <Text style={[styles.text, {color: item.color}]}>{text}</Text>
+    </Pressable>
+  );
+};
+
+const List = ({items = [], onSelect = () => {}}) => {
+  return (
+    <FlatList
+      keyExtractor={(item) => item.type}
+      data={items}
+      numColumns={3}
+      renderItem={({item}) => {
+        return <Button item={item} onSelect={onSelect} />;
+      }}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    borderRadius: 8,
+    margin: 4,
+    borderWidth: 1,
+  },
+  text: {
+    margin: 8,
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+});
+
+export default List;

src/components/constants.js

+export const PURPLE_COLOR = '#6441A4';
+export const WHITE_COLOR = 'whitesmoke';
+export const ITEMS = [
+  {
+    color: '#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.",
+  },
+  {
+    color: '#cd853f',
+    type: 'warn',
+    message:
+      'Your cloud drive is about to reach capacity. Please consider upgrading to premium plan.',
+  },
+  {
+    color: '#cc3232',
+    type: 'error',
+    message:
+      "Sorry, we're having some technical difficulties. Our team will get this fixed for you ASAP.",
+  },
+  {
+    color: '#32A54A',
+    type: 'success',
+    message:
+      "Thank you for your order. We will email and charge you when it's on it's way.",
+  },
+  {
+    color: 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.',
+  },
+  {type: 'close', title: 'close'},
+  {type: 'show', title: 'enqueue all alerts'},
+  {type: 'clear', title: 'clear queue'},
+];
+export const ReactNativeLogo =
+  'https://reactnative.dev/docs/assets/favicon.png';
+export const InfoIcon = require('../assets/images/addImg.png');

yarn.lock

@@ -2796,6 +2796,11 @@ core-js-compat@^3.8.1:
     browserslist "^4.16.3"
     semver "7.0.0"
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.2.2, core-js@^2.4.1:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz"
@@ -3586,6 +3591,19 @@ fbjs-scripts@^1.1.0:
     semver "^5.1.0"
     through2 "^2.0.0"
 
+fbjs@^0.8.9:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fbjs@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz"
@@ -6514,6 +6532,14 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+prop-types@15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  integrity sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz"
@@ -6627,6 +6653,13 @@ react-native-device-info@^8.1.2:
   resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.1.2.tgz#142f2f05e27689858d5aa73dae36f0c37c965031"
   integrity sha512-5jaQBL42H3g8+KXkFlIy2lMyKyPPETI8eUYgEg7JylW7rltkMPngn/wDnupgP4NhDYI+fBdMRGdRjEeetFr0IQ==
 
+react-native-dropdownalert@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-dropdownalert/-/react-native-dropdownalert-4.3.0.tgz#56b612d63576387fa1a507b4158d92e7b7638af3"
+  integrity sha512-fXs18A23nrTB95jkTdP7c9TzoSZU0xS9F4lxMzwW1DFI08Nm62S4X00UqWu+Ong+TBDDP18/aF7b50T67Z26EQ==
+  dependencies:
+    prop-types "15.5.10"
+
 react-native-fast-image@^8.3.4:
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.3.4.tgz#79edca177e30311b19d59ff335625bcbe22650d7"