Custom Alert in React Native using Context API

We needed an alert module for our React Native app. There is the React Native Alert API which is super easy to use, but it is very flat and not customizable at all. We wanted our alerts to look a bit fancier with some coloring. As our design library we use UI Kitten (it’s beautiful & highly recommended), and its Modal component seemed like the ideal starting point.

Now, we could just put a modal in the app container and keep an app-wide (or reducer) state to tell us whether to keep the modal open and what the message inside will be. But we want to keep the state handling a bit cleaner so we don’t have to pass it down all the way to the bottom component and we want to keep the alert state abstracted away from the app’s container. Thus we decided to go with the Context API.

Before moving onto state handling and creating the context, let’s start by implementing a basic alert component using UI Kitten’s Modal component so we know what our alert will look like when we actually implement the context.

# src/Utils/UI/Alert/Alert.js

import React from 'react';
import { Modal, Card, Text, Button } from '@ui-kitten/components';
import styles from './Alert.styles';
export default () => {
const [isOpen, setIsOpen] = React.useState(true);
return (
  <Modal
    visible={isOpen}