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
<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 likeImage
source props. -
leftIconStyle
(optional): Style of the left icon. It works likeImage
style. -
rightIcon
(optional): Right icon of the button. It works likeImage
source props. -
rightIconStyle
(optional): Style of the right icon. It works likeImage
style. -
containerStyle
(optional): Style of the button container. It works likeTouchableOpacity
style. -
textStyle
(optional): Style of the button text. It works likeText
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 likeImage
source props. -
leftIconStyle
(optional): Style of the left icon. It works likeImage
style. -
leftIconOnPress
(optional): A function that runs when left icon pressed. -
rightIcon
(optional): Right icon of the input. It works likeImage
source props. -
rightIconStyle
(optional): Style of the right icon. It works likeImage
style. -
rightIconOnPress
(optional): A function that runs when right icon pressed. -
containerStyle
(optional): Style of the input container. It works likeView
style. -
inputStyle
(optional): Style of the input. It works likeTextInput
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 likeImage
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 likeTouchableOpacity
style. -
imageStyle
(optional): Style of the avatar's image. It works likeImage
style. -
buttonProps
(optional):TouchableOpacity
props. -
imageProps
(optional):Image
props.
Roadmap
Components
- [x] Button
- [x] Text Input
- [x] Email Input
- [x] Password Input
- [x] Avatar
- [x] Loading
- [x] Header
- [x] Button Group
- [x] Switch
- [ ] Slider
- [ ] Nav Button
- [ ] Alert
Helpers
- [x] Statics
- [x] Normalize
- [x] Api
- [x] Location
- [ ] File Upload