tobob

export const pageQuery = graphql`
 query BlogPostBySlug($slug: String!) {
   contentfulBlogPost(slug: { eq: $slug }) {
     title
     publishDate(formatString: "MMMM Do, YYYY")
     heroImage {
       fluid(maxWidth: 1180, background: "rgb:000000") {
         ...GatsbyContentfulFluid_tracedSVG
       }
     }

tobob

export const pageQuery = graphql`
 query BlogPostBySlug($slug: String!) {
   contentfulBlogPost(slug: { eq: $slug }) {
     title
     publishDate(formatString: "MMMM Do, YYYY")
     heroImage {
       fluid(maxWidth: 1180, background: "rgb:000000") {
         ...GatsbyContentfulFluid_tracedSVG
       }
     }

tobob

import React, {useContext} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {ToastContext} from './ToastContext';

const HomeScreen = () => {
  const {show} = useContext(ToastContext);

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => show({message: 'Ama simple Toast!'})}>

tobob

import React from 'react';
import AppNavigation from './AppNavigation';
import {ToastProvider} from './ToastContext';
import Toast from './Toast';

const App = () =>  (
  <ToastProvider>
    <Toast />
    <AppNavigation />
  </ToastProvider>

tobob

import React from 'react';
import AppNavigation from './AppNavigation';
import {ToastProvider} from './ToastContext';
import Toast from './Toast';

export default class App extends React.Component {
  render() {
    return (
      <ToastProvider>
        <Toast />

tobob

  useEffect(() => {
    if (toast.visible) {
      timeout.current = setTimeout(hide, 1500);
      return () => {
        if (timeout.current) {
          clearTimeout(timeout.current);
        }
      };
    }
  }, [hide, toast]);

tobob

  useEffect(() => {
    if (toast.visible) {
      timeout.current = setTimeout(hide, 1500);
      return () => {
        if (timeout.current) {
          clearTimeout(timeout.current);
        }
      };
    }
  }, [hide, toast]);

tobob

const styles = StyleSheet.create({
  toast: {
    borderRadius: 4,
    marginHorizontal: 16,
    padding: 4,
    position: 'absolute',
    top: 0,
    zIndex: 2,
    right: 0,
    left: 0,

tobob

import React, {useContext, useEffect, useRef} from 'react';
import {ToastContext} from './ToastContext';
import {
  Text,
  Animated,
  Easing,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

tobob

import React, {
  createContext,
  useState,
  useEffect,
  useRef,
  useCallback,
} from 'react';

const initialToast = {
  message: '',