vadimkorr

import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, TouchableOpacity, Text } from "react-native";
import { FontAwesome } from "@expo/vector-icons";

const ICON_SQUARE_SIZE = 100;

// 'makeNotification' is a HOC
export const makeNotification = (
  // these values depend on notification type

vadimkorr

import { makeNotification } from "./makeNotification";

// 'SuccessNotification' component is used for rendering success notifications
export const SuccessNotification = makeNotification(
  "check-circle", // icon name
  "#dff0d8", // primary color
  "#3c763d" // accent color
);

vadimkorr

import { makeNotification } from "./makeNotification";

export const InfoNotification = makeNotification(
  "info-circle",
  "#d9edf7",
  "#31708f"
);

vadimkorr

import React from "react";
import PropTypes from "prop-types";
import { View } from "react-native";
import { Button, NotificationsStore, withNotifications } from "../../components";

// description of buttons which add notifications
const controls = [{
  key: "create-success-notification-button",
  iconName: "check",
  colorPrimary: "#cbf0c4",

vadimkorr

import { observable, action, computed } from "mobx";

export class NotificationsStore {
  constructor(notifications) {
    this.notifications = [...notifications];
  }

  // Observers will be notified and react to changes
  // in properties which have @observable decorator.
  @observable

vadimkorr

import React from "react";
import PropTypes from "prop-types";
import { View } from "react-native";
import { observer } from "mobx-react";
import { Notification } from "../Notification";
import { NotificationsStore, withNotifications } from "../store";

// 'observer' function turns component into reactive component
// component will be rerendered upon 'notifications' array change
const NotificationsInner = observer(props => {

vadimkorr

import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, TouchableOpacity, Text, Animated } from "react-native";
import { FontAwesome } from "@expo/vector-icons";

const ICON_SQUARE_SIZE_PX = 100;
const ANIMATION_DURATION_MS = 150;
const NOTIFICATION_HEIGHT_PX = 120;

export const makeNotification = (iconName, colorPrimary, colorAccent) => {

vadimkorr

import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, TouchableOpacity, Text, Animated } from "react-native";
import { FontAwesome } from "@expo/vector-icons";

const ICON_SQUARE_SIZE_PX = 100;
const ANIMATION_DURATION_MS = 150;
const NOTIFICATION_HEIGHT_PX = 120;

export const makeNotification = (iconName, colorPrimary, colorAccent) => {

vadimkorr

import React from "react";
import { Routing } from "./src/Routing";
import { configure } from "mobx";

configure({
  // 'observed' means that the state needs to be changed through actions
  // otherwise it throws an error
  enforceActions: "observed"
});

vadimkorr

// trying to push notification object directly to the array
store.notifications.push(
  createSuccessNotification(
    "Success",
    "This message tells that everything goes fine."
  )
)