Use Context Loading & Notif

this tamplate loading & notif for app

loader Example

example notification

in file app.js

import React, { useEffect } from 'react'
import { NativeBaseProvider } from 'native-base'
import { NavigationContainer } from '@react-navigation/native'
import Preloader from './src/Components/Basic/Preloader'
import Notification from './src/Components/Basic/Notification'
import { AppProvider } from './src/Context/AppContext'


export default function App() {

  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <AppProvider>
          <Preloader />
          <Notification />
          <Text>Hallo World</Text> // you can set the navigators file
        </AppProvider>
      </NativeBaseProvider>
    </NavigationContainer>
  )
}

Create file in folder Components > folder basic > Preloader.js

import { Dimensions } from 'react-native'
import React from 'react'
import { HStack, Spinner } from 'native-base'
import { useAppContext } from '../../Context/AppContext'

export default function () {
  const screenHeight = Dimensions.get('window').height

  const { loading } = useAppContext()

  return (
    loading && (
      <HStack
        space={2}
        justifyContent="center"
        position="absolute"
        zIndex="1"
        height={screenHeight}
        width="100%"
        bg="rgba(0, 0, 0, 0.5)"
      >
        <Spinner accessibilityLabel="Loading..." color="white" />
      </HStack>
    )
  )
}

Create file in folder Components > folder basic > Notification.js

import React from 'react'
import { Slide, Alert, Text, HStack, Stack } from 'native-base'
import { useAppContext } from '../../Context/AppContext'

export default function Notification() {
  const { notif, notifMessage, notifColor, notifTitle } = useAppContext()

  return notif ? (
    <Slide in={notif} placement="top">
      <Alert justifyContent="center" status={notifColor}>
        <HStack space={2} flexShrink={1} py="3" mt={'3'}>
          <Alert.Icon mt="1" />
          <Stack>
            <Text fontSize="md" fontWeight={'bold'} color="coolGray.800">
              {notifTitle}
            </Text>
            <Text fontSize="sm" color="coolGray.800">
              {notifMessage}
            </Text>
          </Stack>
        </HStack>
      </Alert>
    </Slide>
  ) : (
    <></>
  )
}

Create Folder Context in src > create file AppContext.js

import React, { useState, createContext, useContext, useEffect } from 'react'

const AppContext = createContext()

export const useAppContext = () => {
  const context = useContext(AppContext)

  const [loading, setLoading] = context.loading
  const [notif, setNotif] = context.notif
  const [notifMessage, setNotifMessage] = context.notifMessage
  const [notifTitle, setNotifTitle] = context.notifTitle
  const [notifColor, setNotifColor] = context.notifColor

  const loadingShow = () => {
    setLoading(true)
  }

  const loadingClose = () => {
    setLoading(false)
  }

  const notifShow = ({ title, message, color, duration }) => {
    setNotif(true)
    setNotifTitle(title)
    setNotifMessage(message)
    setNotifColor(color)

    setTimeout(
      () => {
        notifClose()
      },
      typeof duration == 'undefined' ? 5000 : duration
    )
  }

  const notifClose = () => {
    setNotif(false)
  }

  return {
    loading,
    loadingShow,
    loadingClose,
    notif,
    notifShow,
    notifClose,
    notifMessage,
    notifTitle,
    notifColor,
  }
}

export const AppProvider = ({ children }) => {
  const [loading, setLoading] = useState(false)
  const [notif, setNotif] = useState(false)
  const [notifMessage, setNotifMessage] = useState('')
  const [notifColor, setNotifColor] = useState('success')
  const [notifTitle, setNotifTitle] = useState()

  return (
    <AppContext.Provider
      value={{
        loading: [loading, setLoading],
        notif: [notif, setNotif],
        notifTitle: [notifTitle, setNotifTitle],
        notifMessage: [notifMessage, setNotifMessage],
        notifColor: [notifColor, setNotifColor],
      }}
    >
      {children}
    </AppContext.Provider>
  )
}

How to use Loader & notif

Notif Show

import { useAppContext } from '../Context/AppContext'
      
const { notifShow } = useAppContext()
        
        notifShow({
          title: 'BELANJA.ID', //this you can customize
          message: 'Berhasil menambahkan ke keranjang product.', //this you can customize
          color: 'success' //this you can customize (success : 'green', warning: 'yellow', error: 'red')
        })

loading show

import { useAppContext } from '../Context/AppContext'

const { loadingShow, loadingClose } = useAppContext()

loadingShow() // for show 
//
loadingClose() // for close

//set in your function