Expo Snackbar

Snackbar.tsx

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { memo } from "react";
import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated";
import { Feather } from "@expo/vector-icons";
import { ms, vs } from "react-native-size-matters";

import type { TouchableOpacityProps } from "react-native";

interface SnackbarProps extends Pick<TouchableOpacityProps, "onPress"> {
  /** Snackbar's title */
  title: string;
}

// Window width
const { width } = Dimensions.get("window");

const Snackbar = ({ title, onPress }: SnackbarProps) => (
  <Animated.View
    entering={FadeInDown}
    exiting={FadeOutDown}
    style={{
      width: width,
      position: "absolute",
      bottom: vs(10),
    }}
  >
    <View style={styles.snackbar}>
      <View style={styles.titleContainer}>
        <Feather
          name="alert-triangle"
          size={16}
          color="#FFA02E"
        />
        <Text style={styles.titleTxt}>{title}</Text>
      </View>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.buttonTxt}>تلاش مجدد</Text>
      </TouchableOpacity>
    </View>
  </Animated.View>
);

export default memo(Snackbar);

const styles = StyleSheet.create({
  snackbar: {
    width: "85%",
    alignSelf: "center",
    flexDirection: "row-reverse",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#383838",
    borderRadius: ms(10),
    padding: ms(12),
  },
  titleContainer: {
    flexDirection: "row-reverse",
    justifyContent: "center",
    alignItems: "center",
  },
  titleTxt: {
    fontFamily: "IranSans-Regural",
    fontSize: 12,
    color: "#ffffff",
    marginRight: ms(10),
  },
  buttonTxt: {
    fontFamily: "IranSans-Regural",
    fontSize: 12,
    color: "#71D4F5",
  },
});