react-native-muffin

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