1.0.4 • Published 5 years ago

react-native-muffin v1.0.4

Weekly downloads
73
License
MIT
Repository
github
Last release
5 years ago

react-native-muffin

Installation

Using npm:

npm install react-native-muffin --save

Using yarn:

yarn add react-native-muffin

Components

Icon

Props:

NameTypeRequiresDescription
nameString-Name of the icon is going to be rendered, default is 'person'
sizeNumber-Size of the icon, default value is 25
colorString-Color of the icon, default is 'blue'
onPressFunction-Function to execute when pressing the icon
styleViewStyle-Optional Style for the outer TouchableOpacity
iconStyleImageStyle-Optional style to apply on Image component, (has higher priority than color and size)

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:

NameTypeRequiresDescription
visibleBoolean-The visible prop determines whether your dialog is visible.
titleString-The title prop provides a Text Component in the dialog where displays the prop
titleStyleTextStyle-Sets the style of the title Text Component
messageString-The message prop provides a Text Component in the dialog where displays the prop, it's like a subtitle for the dialog
messageStyleTextStyle-Sets the style of the message Text Component
buttonsArray<React.Component>-The buttons prop is an array where you can render various React Components
buttonsStyleViewStyle-Sets the style of the main external View Component where buttons are rendered
dialogStyleViewStyle-Sets the style of the main internal View Component
overlayStyleViewStyle-Sets the style of the main external View Component
contentStyleViewStyle-Sets the style of the external Children Component
animationTypeString-The animationType prop controls how the dialog animates.
onDismissFunction-The onDismiss prop allows passing a function that will be called once the dialog has been dismissed.
onShowFunction-The onShow prop allows passing a function that will be called once the dialog has been shown.
onRequestCloseFunction-The onRequestClose callback is called when the user taps the hardware back button on Android.
onTouchOutsideFunction-The onTouchOutside callback is called when the user taps outside the dialog's area
onOrientationChangeFunction-The supportedOrientations prop allows the dialog to be rotated to any of the specified orientations.
supportedOrientationsString-Determines when the keyboard should stay visible after a tap
keyboardShouldPersistTapsString-Determines when the keyboard should stay visible after a tap
keyboardDismissModeString-Determines whether the keyboard gets dismissed in response to a drag.

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:

NameTypeRequiresDescription
titleString-Title that header is going to show
rightIconsArray(IconObjects)-Name of the icon to show on the right side
leftIconsArray(IconObjects)-Name of the icon to show on the left side
searchBarBoolean-Indicates to the Header component when it has to render in SearchBar mode
placeholderString-Placeholder of the TextInput rendered in SearchBar mode
autoFocusBoolean-It represents the autofocus prop of the TextInput rendered in SearchBar mode
autoCorrectBoolean-If false, disables auto-correct. The default value is true
autoCapitalizeString-Can tell TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad
titleAlignString-describes how to align children along the cross axis of their container. Align items is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis
onChangeTextFunctionsearchBarFunction executed when TextInput rendered in SearchBar mode changes its content, as normal, it returns the text from input: (text) => {}
onSubmitSearchFunctionsearchBarFunction executed when Enter Key is pressed on TextInput rendered in SearchBar mode
cleanTextOnSubmitBooleansearchBarIndicates if TextInput rendered in SearchBar mode has to be cleared after submitting
dataArray(Object)searchBarIf your header is on top of a list of items, you can send to the header the data you are listing to get a filtered version of that list with the method <>
searchPropNamesArray(String)-To filter the array sent in the data prop, you need to put at least 1 reference of the attribute you want to focus on, Ex: {title: 'Hello'}, the respective form is search_PropName_1="title", this function will compare the TextInput value with the object value
onChangeSearchBarFunctiondata, search_PropName_1Function executed when TextInput rendered in SearchBar mode changes its content, but this time, it returns the filtered data of the array sent in its input
themeThemeType-Assigns themed colors to Header following the ThemeType Schema

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

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago