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 ( <DropdownAlert ref={(ref) => { if (ref) { dropDownAlertRef = ref; } }} containerStyle={styles.content} showCancel={true} onCancel={_onCancel} onTap={_onTap} titleNumOfLines={2} messageNumOfLines={0} onClose={_onClose} /> ); }; const styles = StyleSheet.create({ container: { backgroundColor: WHITE_COLOR, justifyContent: 'center', }, content: { backgroundColor: PURPLE_COLOR, zIndex: 10, }, size: { textAlign: 'center', fontSize: 26, fontWeight: 'bold', marginVertical: 8, }, }); export default DropDown;