react-native-muffin

Installation

Using npm:

npm install react-native-muffin --save

Using yarn:

yarn add react-native-muffin

Components

Icon

Props:

Name	Type	Requires	Description
name	String	-	Name of the icon is going to be rendered, default is 'person'
size	Number	-	Size of the icon, default value is 25
color	String	-	Color of the icon, default is 'blue'
onPress	Function	-	Function to execute when pressing the icon
style	ViewStyle	-	Optional Style for the outer TouchableOpacity
iconStyle	ImageStyle	-	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:

Name	Type	Requires	Description
visible	Boolean	-	The visible prop determines whether your dialog is visible.
title	String	-	The title prop provides a Text Component in the dialog where displays the prop
titleStyle	TextStyle	-	Sets the style of the title Text Component
message	String	-	The message prop provides a Text Component in the dialog where displays the prop, it's like a subtitle for the dialog
messageStyle	TextStyle	-	Sets the style of the message Text Component
buttons	Array<React.Component>	-	The buttons prop is an array where you can render various React Components
buttonsStyle	ViewStyle	-	Sets the style of the main external View Component where buttons are rendered
dialogStyle	ViewStyle	-	Sets the style of the main internal View Component
overlayStyle	ViewStyle	-	Sets the style of the main external View Component
contentStyle	ViewStyle	-	Sets the style of the external Children Component
animationType	String	-	The animationType prop controls how the dialog animates.
onDismiss	Function	-	The onDismiss prop allows passing a function that will be called once the dialog has been dismissed.
onShow	Function	-	The onShow prop allows passing a function that will be called once the dialog has been shown.
onRequestClose	Function	-	The onRequestClose callback is called when the user taps the hardware back button on Android.
onTouchOutside	Function	-	The onTouchOutside callback is called when the user taps outside the dialog's area
onOrientationChange	Function	-	The supportedOrientations prop allows the dialog to be rotated to any of the specified orientations.
supportedOrientations	String	-	Determines when the keyboard should stay visible after a tap
keyboardShouldPersistTaps	String	-	Determines when the keyboard should stay visible after a tap
keyboardDismissMode	String	-	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:

Name	Type	Requires	Description
title	String	-	Title that header is going to show
rightIcons	Array(IconObjects)	-	Name of the icon to show on the right side
leftIcons	Array(IconObjects)	-	Name of the icon to show on the left side
searchBar	Boolean	-	Indicates to the Header component when it has to render in SearchBar mode
placeholder	String	-	Placeholder of the TextInput rendered in SearchBar mode
autoFocus	Boolean	-	It represents the autofocus prop of the TextInput rendered in SearchBar mode
autoCorrect	Boolean	-	If false, disables auto-correct. The default value is true
autoCapitalize	String	-	Can tell TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad
titleAlign	String	-	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
onChangeText	Function	searchBar	Function executed when TextInput rendered in SearchBar mode changes its content, as normal, it returns the text from input: (text) => {}
onSubmitSearch	Function	searchBar	Function executed when Enter Key is pressed on TextInput rendered in SearchBar mode
cleanTextOnSubmit	Boolean	searchBar	Indicates if TextInput rendered in SearchBar mode has to be cleared after submitting
data	Array(Object)	searchBar	If 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 <>
searchPropNames	Array(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
onChangeSearchBar	Function	data, search_PropName_1	Function 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
theme	ThemeType	-	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