“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 12. kısmıdır. Bir önceki makalede (Part 11), React Native’de Hooks ve FlatList ile Search Bar eklemeyi ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Context API ve Hooks ile Simple Toast oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

React Native topluluğu, Toast adı verilen küçük mesajların gösterilmesini sağlayan çok sayıda kullanıma hazır kütüphane sunar. Ancak, bunu kendi başımıza uygulamak büyük bir çaba değil. Ek olarak, davranışlarının ve görünümlerinin tam kontrolünü elde ederiz. Context API ve hookları kullanarak böyle bir çözümü zaman kaybetmeden uygulayabiliriz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Her şeyden önce, create context ve Provide bileşeni oluşturmamız gerekiyor.

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

const initialToast = {
  message: '',
  type: null,
  visible: false,
};

export const ToastContext = createContext({});

export const ToastProvider = ({children}) => {
  const [toast, setToast] = useState(initialToast);
  const timeout = useRef();

  const show = useCallback(args => {
    setToast({...initialToast, visible: true, ...args});
  }, []);

  const hide = useCallback(() => {
    setToast({...toast, visible: false});
  }, [toast]);

  return (
    <ToastContext.Provider
      value={{
        hide,
        show,
        toast,
      }}>
      {children}
    </ToastContext.Provider>
  );
};

Bu context’te 3 adet anahtarımız var. İki tanesi toast mesajın görünürlülüğünü ve gizliğini sağlamak için, bir taneside toast mesajın state’ini almak içindir.

Şimdi Consumer bileşeni oluşturmamız gerekiyor:

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

export const Toast = () => {
  const {toast, hide} = useContext(ToastContext);
  const translateYRef = useRef(new Animated.Value(-100));

  useEffect(() => {
    if (toast.visible) {
      Animated.timing(translateYRef.current, {
        duration: 300,
        easing: Easing.ease,
        toValue: 100,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(translateYRef.current, {
        duration: 450,
        easing: Easing.ease,
        toValue: -100,
        useNativeDriver: true,
      }).start();
    }
  }, [toast]);

  return (
    <Animated.View
      style={[
        styles.toast,
        {transform: [{translateY: translateYRef.current}]},
      ]}>
      <TouchableOpacity onPress={hide} style={styles.content}>
        <Text style={styles.toastMessage}> {toast.message}</Text>
      </TouchableOpacity>
    </Animated.View>
  );
};

export default Toast;

Burada mevcut toast durumunu almak için useContext hooks kullanıyoruz ve animasyonu useEffect hooks kullanarak çalıştırıyoruz. Ek olarak, kullanıcının Toast’ı tıkladığında kapatmasına izin veriyoruz.

Toast bileşenimize bazı stiller ekleyelim:

const styles = StyleSheet.create({
  toast: {
    borderRadius: 4,
    marginHorizontal: 16,
    padding: 4,
    position: 'absolute',
    top: 0,
    zIndex: 2,
    right: 0,
    left: 0,
    backgroundColor: '#ff3f3f',
  },
  content: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    minHeight: 32,
    width: '100%',
  },
  toastMessage: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 12,
    letterSpacing: 0.26,
    marginHorizontal: 10,
  },
});

Ancak, ToastProvider’ın içine useEffect hook’u ekleyerek Toast sağlayıcımıza otomatik gizleme ekleyebiliriz.

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

Şimdi provider ve consumer’u uygulamaya bağlayabiliriz:

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

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

export default App;

Evet! Provider içine Consumer girişini koyabileceğimizi ve context’e yalnızca göster / gizle yöntemini gösterebileceğimizi biliyorum, ancak daha esnek bir çözüme sahip olmak istiyorum (Consumer’u uygulama yapısında istediğim yere koyabilirim)

Artık Tostumuzu istediğimiz ekrandan gösterebiliriz:

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!'})}>
        <Text>Show Toast</Text>
      </TouchableOpacity>
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
});

Ekran Çıktısı:

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak

https://selleo.com