Monkeys-native-toolbox NPM

monkeys-native-toolbox

IMPORTANT This toolbox is in under heavy development right now. You should wait until published on npm. The responsibility is yours.

Toolbox for react native. It allows you to build react-native apps faster than before.

Installation

npm install monkeys-native-toolbox --save

API Reference

API reference divided by two parts.

Components

Components

`<Button />`

A button component that accepts left & right icon. All Button props are accepted.

Example

<Button
  leftIcon={{ uri: "your icon uri" }}
  rightIcon={{ uri: "your icon uri" }}
>
  Hello World
</Button>

Props

leftIcon (optional): Left icon of the button. It works like Image source props.
leftIconStyle (optional): Style of the left icon. It works like Image style.
rightIcon (optional): Right icon of the button. It works like Image source props.
rightIconStyle (optional): Style of the right icon. It works like Image style.
containerStyle (optional): Style of the button container. It works like TouchableOpacity style.
textStyle (optional): Style of the button text. It works like Text style.

`<MTextInput />`

A TextInput component that accepts left & right icon with onPress event. All TextInput props are accepted.

Example

<MTextInput
  leftIcon={{ uri: "your icon uri" }}
  leftIconOnPress={() => alert("Left icon pressed!")}
  rightIcon={{ uri: "your icon uri" }}
  rightIconOnPress={() => alert("Right icon pressed!")}
  placeholder={"Hello"}
/>

Props

leftIcon (optional): Left icon of the input. It works like Image source props.
leftIconStyle (optional): Style of the left icon. It works like Image style.
leftIconOnPress (optional): A function that runs when left icon pressed.
rightIcon (optional): Right icon of the input. It works like Image source props.
rightIconStyle (optional): Style of the right icon. It works like Image style.
rightIconOnPress (optional): A function that runs when right icon pressed.
containerStyle (optional): Style of the input container. It works like View style.
inputStyle (optional): Style of the input. It works like TextInput style.

`<EmailInput />`

A TextInput component for email. Keyboard type is email-address. All TextInput and MTextInput props are accepted.

`<PasswordInput />`

A TextInput component for password. Secure text entry enabled by default. All TextInput and MTextInput props are accepted.

`<Avatar />`

An avatar component to shows user's profile picture.

Example

<Avatar source={{ uri: "your image uri" }} size={80} />

Props

source (required): User's profile picture source. It works like Image source props.
size (optional): Size of avatar component. This value used to resize avatar component's width and height.
onPress (optional): A function that runs when avatar pressed.
containerStyle (optional): Style of the avatar container. It works like TouchableOpacity style.
imageStyle (optional): Style of the avatar's image. It works like Image style.
buttonProps (optional): TouchableOpacity props.
imageProps (optional): Image props.