React Native – Animated notification

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!');
  };