react-native-muffin v1.0.4

react-native-muffin

Installation

Using npm:

npm install react-native-muffin --save

Using yarn:

yarn add react-native-muffin

Components

Icon

Props:

Usage:

import { Icon } from "react-native-muffin";

class SomeComponent extends Component {
  render() {
    return (
      <Icon
        name={"bell"}
        size={20}
        color={"grey"}
        onPress={() => console.log("Icon Pressed!")}
      />
    );
  }
}

Families:

- Interface: https://www.flaticon.es/packs/interface-icon-collection

Dialog

Props:

Usage:

import { Dialog } from "react-native-muffin";

class SomeComponent extends Component {
  render() {
    return (
      <Dialog
        visible
        title={"Hello"}
        message={"World!"}
        buttons={[() => <Button>{"Ok"}</Button>]}
      />
    );
  }
}

Header

Props:

Usage:

import { Header } from "react-native-muffin";

class SomeComponent extends Component {
  render() {
    return (
      <Header
        title={"Home"}
        rightIcons={[
          {
            name: "bell",
            onPress: () => console.log("Right Pressed!"),
          },
        ]}
        leftIcons={[
          {
            name: "arrow-back",
            onPress: () => console.log("Left Pressed!"),
          },
        ]}
      />
    );
  }
}

Functions

SimpleAlert()

Executes a React Native alert but as a function receiving 7 parameters

Params:

• Title: Title of the Alert (String)
• SubTitle: Subtitle of the Alert (String)
• RightButtonText: Title of right button (String)
• onPressRightButton: Function executed on press right button (Function)
• LeftButtonText: Title of left button (String)
• onPressLeftButton: Function executed on press left button (Function)
• Cancelable: Sets if the alert can be cancelled (Boolean)

ConfigAlert()

Executes a React Native alert but only receiving one parameter, an object that has the 7 parameters from SimpleAlert but as attributes

Param:

• Object:
  • title: Title of the Alert (String)
  • subTitle: Subtitle of the Alert (String)
  • rightButtonText: Title of right button (String)
  • onPressRightButton: Function executed on press right button (Function)
  • leftButtonText: Title of left button (String)
  • onPressLeftButton: Function executed on press left button (Function)
  • cancelable: Sets if the alert can be cancelled (Boolean)

CopyToClipboard()

Copies into the device clipboard the text sent to the function

Param:

• Text: Send as parameter the text you want to copy on your clipboard (String)

ValidateEmptyObject()

Like a regular validation but returns false if object doesn't have any key or attribute

Param:

• Objc: It will return true if Object sent has any key. instead, if object is equal to "{}" returns false (Object)

RoundFixed2()

Returns a rounded number based on input, already fixed by 2 decimals

Param:

• Number: Float or integer numbers are valid

UpdateReducer()

Returns a fixed & updated reducer based on the Current Reducer and the Initial Reducer, but it needs a specific process to make it work

Param:

• Object:
  • InitialReducer: Initial state defined for the reducer (Object)
  • CurrentReducer: Current state of the reducer you want to update (Object)

Setup:

import { UpdateReducer } from "react-native-muffin";
import produce from "immer";

const initialReducer = {
  property1: {
    property3: "hello",
    property4: false,
  },
  property2: [],
};

const reducer = (state = initialReducer, action) => {
  produce(state, (draft) => {
    switch (action.type) {
      case "UPDATE_REDUCER":
        const Updated = UpdateReducer({
          InitialReducer: initialReducer,
          CurrentReducer: { ...state },
        });
        Object.keys(initialReducer).forEach((key) => {
          draft[key] = Updated[key] ? Updated[key] : initialReducer[key];
        });
        break;
      default:
        return state;
    }
  });
};

export default reducer;

After the setup, you can use it anywhere in the code by using the function

dispatch({ type: "UPDATE_REDUCER" });

in any of your "connected to redux" components using "mapDispatchToProps", (Is needed a unique setup for each reducer, and a dispatch as well...)

License

MIT