Use react-native-dropdownalert
Component
import React from 'react'; import { StyleSheet, Text } from 'react-native'; import styled from 'styled-components/native'; import { default as Container } from 'react-native-dropdownalert'; import { Icon } from 'react-native-elements'; const StyledMessage = styled(Text).attrs(() => ({}))` color: ${(props) => props.theme.color.gray800}; font-size: ${(props) => props.theme.fontSize.mediumBig}px; `; const IconMarker = styled(Icon).attrs(() => ({ name: 'check', type: 'font-awesome-5', size: 15, color: 'black', }))` margin-top: 13px; `; //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// interface Props { message: string; type?: string; } const DropdownAlert: React.FC<Props> = ({ message, type }) => { let dropDownAlertRef: any = React.useRef(null); React.useEffect(() => { dropDownAlertRef.alertWithType(null, message, '', null, 1000); }, [message]); return ( <> <Container ref={(ref) => { if (ref) { dropDownAlertRef = ref; } }} containerStyle={IS_ANDROID ? styles.contentAndroid : styles.contentIOS} renderTitle={() => <StyledMessage>{message}</StyledMessage>} titleNumOfLines={1} messageNumOfLines={0} isInteraction={false} zIndex={9999} renderImage={() => { return <IconMarker />; }} /> </> ); }; export default DropdownAlert; const styles = StyleSheet.create({ contentAndroid: { height: 50, backgroundColor: '#b1e41f', paddingLeft: 20, alignItems: 'center', }, contentIOS: { backgroundColor: '#b1e41f', paddingLeft: 20, alignItems: 'center', }, });
Usage
Add control state into App state
import { createContext } from 'react'; const AppContext = createContext<any | null>(null); export default AppContext;
import React, { useState } from 'react'; import AppContext from './AppContext'; const AppProvider: React.FC = ({ children }) => { const [dropDownAlert, updateDropDownAlert] = useState(''); return ( <AppContext.Provider value={{ // drop down msg dropDownAlert, updateDropDownAlert: (data: string) => { updateDropDownAlert(data); setTimeout(() => { updateDropDownAlert(''); }, 1000); }, }} > {children} </AppContext.Provider> ); }; export default AppProvider;
Declare dropdown alert component next to Routing
import React, { useEffect, useContext } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { LoginStack, MainStack } from 'src/modules/Routing/components/stacks'; import styled from 'styled-components'; import AppContext from 'src/state/AppContext'; import { DropdownAlert, Loading } from 'src/components'; ... ///////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////// const Routing: React.FC = () => { const appState: TAppState = React.useContext(AppContext); ... return ( <NavigationContainer> ... <> {appState.dropDownAlert ? ( <DropdownAlert message={appState.dropDownAlert} /> ) : null} <MainStack /> </> ... </NavigationContainer> ); }; export default Routing;
Update App state to display alert
const appState = React.useContext(AppContext); const onDoSomething = () => { ... appState.updateDropDownAlert('Alert message here!'); };
Leave a Reply