`
import * as React from 'react';
import { View, Text, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
import { Card, Button, H2, CollapsibleModal } from '@amplifiui/mobile';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import tw from './services/tw';

export default function App() {
const [isModalVisible, setModalVisible] = React.useState(true);

return (

tw={tw}
style={twmt-20 mx-4}
onPress={() => setModalVisible(true)}>
Click to Open Modal

mt-4 mx-4 font-bold}>
To close the modal, please drag it to the bottom.

tw={tw}
maxHeight={290}
show={isModalVisible}
setShow={() => setModalVisible(!isModalVisible)}>
mt-4 mx-4 font-bold text-center}>
This is the modal content

mt-4 mx-4 font-bold text-center}>
To close the modal, please drag it to the bottom.

mt-4 mx-4 font-bold text-center}>
OR

tw={tw}
style={twmt-4 mx-4}
onPress={() => setModalVisible(false)}>
Click to Close Modal



);
}
`

#### Props
| Variable | Value Type | Default | Mandatory | Notes |
| ---------------- | ---------------------------- | ------- | ------------------ | -------------------------------------------------------------------------- |
| tw | Tailwind Function | \_ | :heavy_check_mark: | \_ |
| children | JSX.Element \| JSX.Element[] | \_ | :x: | The children props are limited to strings. |
| maxHeight | maxHeight | \_ | :heavy_check_mark: | This is mandatory and determines the height of the modal. |
| show | boolean | \_ | :heavy_check_mark: | If true shows the modal. |
| setShow | () => void | \_ | :heavy_check_mark: | This is the callback to update the modal state (opened/closed) |

Forms

$3

#### Description:
This component is a subset of the InputText created specifically to receive numbers.

#### Samples
Try using Expo:
https://snack.expo.dev/@paulorieck/amplifi-ui---forms--input-number?platform=ios

`
import * as React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import { Card, Button, CollapsibleModal, InputNumber, H3 } from '@amplifiui/mobile';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import tw from './services/tw';

import MoneyIcon from './icons/money';

export default function App() {
return (
mt-8 bg-gray-200 flex-1}>
m-4}>
mt-4 shadow}>
mb-4 font-bold}>
Default Input Number

null} value={0} />

mt-4 font-bold shadow}>
mb-4 font-bold}>
Input Number - Label, Placeholder and Helper

tw={tw}
onChangeText={() => null}
value={0}
label="This is a label"
placeholder="This is a placeholder"
helper="This is a helper text"
/>

mt-4 shadow}>
mb-4 font-bold}>
Input Number with Custom Icon

tw={tw}
onChangeText={() => null}
value={0}
icon={MoneyIcon}
iconStyle={twmx-4}
/>



);
}
`

#### Props
| Variable | Value Type | Default | Mandatory | Notes |
| ---------------- | ---------------------------- | ------- | ------------------ | ------------------------------------------------------------------------------ |
| tw | Tailwind Function | \_ | :heavy_check_mark: | \_ |
| label | string | \_ | :x: | Text that goes over the input field. |
| placeholder | string | \_ | :x: | Text that goes inside the input field if value is empty. |
| helper | string | \_ | :x: | Text that goes under the input field. |
| style | Tailwind Style | \_ | :x: | This style is applied to the container View |
| labelStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the label. |
| inputStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the input. |
| helperStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the helper text. |
| icon | Valid SVG string | \_ | :x: | This is an optional icon that can be displayed by the end of the input. |
| iconStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the icon. |
| onChangeText | (value: string) => void | \_ | :heavy_check_mark: | Callback when the text changes. |
| value | string | \_ | :heavy_check_mark: | Value for the input field. |
| inputType | 'primary' \| 'secondary' | \_ | :x: | If selected, the project primary or secondary colors will be applied. |
| helperType | 'primary' \| 'secondary' | \_ | :x: | Shows the helper text with primary or secondary colors. |
| error | string | \_ | :x: | Replaces the helper text (same position). Used to return errors from the API |
| errorStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the error text. |
| keyboardType | RN KeyboardTypeOptions | \_ | :x: | Defines the type of keyboards that will be presented to the user. |
| onBlur | NativeSyntheticEvent | \_ | :x: | Detects when the user leaves the input field. Used in combination with Formik. |

$3

#### Description:
This component is a subset of the InputText created specifically to process passwords.

#### Samples
Try using Expo:
https://snack.expo.dev/@paulorieck/amplifi-ui---forms--input-password?platform=ios

`
import * as React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import { Card, Button, InputPassword } from '@amplifiui/mobile';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import tw from './services/tw';

import Visible from './icons/eye-on';
import Invisible from './icons/eye-off';

export default function App() {
const [password1, setPassword1] = React.useState('');
const [password2, setPassword2] = React.useState('');

return (
mt-8 bg-gray-200 flex-1}>
m-4}>
mt-4 shadow}>
mb-4 font-bold}>
Default Password Input

tw={tw}
onChangeText={(e) => console.log(e)}
value={password1}
visibleIcon={Visible}
invisibleIcon={Invisible}
/>

mt-4 font-bold shadow}>
mb-4 font-bold}>
Password Input - Label, Placeholder and Helper

tw={tw}
onChangeText={setPassword2}
value={password2}
label="This is a label"
placeholder="This is a placeholder"
helper="This is a helper text"
visibleIcon={Visible}
invisibleIcon={Invisible}
/>



);
}
`

#### Props
| Variable | Value Type | Default | Mandatory | Notes |
| ---------------- | ---------------------------- | ------- | ------------------ | ------------------------------------------------------------------------------ |
| tw | Tailwind Function | \_ | :heavy_check_mark: | \_ |
| label | string | \_ | :x: | Text that goes over the input field. |
| placeholder | string | \_ | :x: | Text that goes inside the input field if value is empty. |
| helper | string | \_ | :x: | Text that goes under the input field. |
| style | Tailwind Style | \_ | :x: | This style is applied to the container View |
| labelStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the label. |
| inputStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the input. |
| textInputStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the input text. |
| helperStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the helper text. |
| invisibleIcon | Valid SVG string | \_ | :heavy_check_mark: | This icon is displayed when the password is invisible. |
| visibleIcon | Valid SVG string | \_ | :heavy_check_mark: | This icon is displayed when the password is visible. |
| iconStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the icons. |
| onChangeText | (value: string) => void | \_ | :heavy_check_mark: | Callback when the text changes. |
| value | string | \_ | :heavy_check_mark: | Value for the input field. |
| inputType | 'primary' \| 'secondary' | \_ | :x: | If selected, the project primary or secondary colors will be applied. |
| helperType | 'primary' \| 'secondary' | \_ | :x: | Shows the helper text with primary or secondary colors. |
| error | string | \_ | :x: | Replaces the helper text (same position). Used to return errors from the API |
| errorStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the error text. |
| onBlur | NativeSyntheticEvent | \_ | :x: | Detects when the user leaves the input field. Used in combination with Formik. |

$3

#### Description:
This component was designed specifically to receive strings.

#### Samples
Try using Expo:
https://snack.expo.dev/@paulorieck/amplifi-ui---forms--input-text?platform=ios

`
import * as React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import { Card, Button, CollapsibleModal, InputText, H3 } from '@amplifiui/mobile';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import tw from './services/tw';

import MoneyIcon from './icons/money';

export default function App() {
const [text1, setText1] = React.useState('');
const [text2, setText2] = React.useState('');
const [text3, setText3] = React.useState('');

return (
bg-gray-200 flex-1}>
m-4}>
mt-4 shadow}>
mb-4 font-bold}>
Default Input Text

tw={tw}
onChangeText={setText1}
value={text1}
/>

mt-4 font-bold shadow}>
mb-4 font-bold}>
Input Text - Label, Placeholder and Helper

tw={tw}
onChangeText={setText2}
value={text2}
label="This is a label"
placeholder="This is a placeholder"
helper="This is a helper text"
/>

mt-4 shadow}>
mb-4 font-bold}>
Input Text with Custom Icon

tw={tw}
onChangeText={setText3}
value={text3}
icon={MoneyIcon}
iconStyle={twmx-4}
/>



);
}
`

#### Props
| Variable | Value Type | Default | Mandatory | Notes |
| ---------------- | ---------------------------- | ------- | ------------------ | ------------------------------------------------------------------------------ |
| tw | Tailwind Function | \_ | :heavy_check_mark: | \_ |
| label | string | \_ | :x: | Text that goes over the input field. |
| placeholder | string | \_ | :x: | Text that goes inside the input field if value is empty. |
| helper | string | \_ | :x: | Text that goes under the input field. |
| style | Tailwind Style | \_ | :x: | This style is applied to the container View |
| labelStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the label. |
| inputStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the input. |
| helperStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the helper text. |
| icon | Valid SVG string | \_ | :x: | This is an optional icon that can be displayed by the end of the input. |
| iconStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the icon. |
| onChangeText | (value: string) => void | \_ | :heavy_check_mark: | Callback when the text changes. |
| value | string | \_ | :heavy_check_mark: | Value for the input field. |
| inputType | 'primary' \| 'secondary' | \_ | :x: | If selected, the project primary or secondary colors will be applied. |
| helperType | 'primary' \| 'secondary' | \_ | :x: | Shows the helper text with primary or secondary colors. |
| error | string | \_ | :x: | Replaces the helper text (same position). Used to return errors from the API |
| errorStyle | Tailwind Style | \_ | :x: | This style is applied specifically to the error text. |
| keyboardType | RN KeyboardTypeOptions | \_ | :x: | Defines the type of keyboards that will be presented to the user. |
| onBlur | NativeSyntheticEvent | \_ | :x: | Detects when the user leaves the input field. Used in combination with Formik. |

$3

#### Description:
This component renders a checkbox element to be used on forms.

#### Samples
Try using Expo:
https://snack.expo.dev/@paulorieck/amplifi-ui---mobile---forms---checkbox?platform=ios

`
import * as React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import { Card, Button, InputPassword, Checkbox } from '@amplifiui/mobile';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import tw from './services/tw';

import CustomCheck from './icons/custom-check';

export default function App() {
const [check1Selected, setCheck1Selected] = React.useState(true);
const [check2Selected, setCheck2Selected] = React.useState(true);

return (
bg-gray-200 flex-1}>
m-4}>
mt-4 shadow}>
tw={tw}
label="This is a vanilla checkbox. Click Me!"
value={check1Selected}
onPress={() => setCheck1Selected(!check1Selected)}
/>
tw={tw}
style={twmt-4}
label="This is a custom checkbox. Click Me!"
labelStyle={twtext-red-800 font-bold}
checkboxStyle={twh-[18px] w-[18px] rounded-[3px] border-[#505D68] border bg-white}
checkedCheckboxStyle={twbg-white}
iconWidth={12}
iconHeight={12}
value={check2Selected}
onPress={() => setCheck2Selected(!check2Selected)}
icon={CustomCheck}
/>



);
}
`

#### Props
| Variable | Value Type | Default | Mandatory | Notes |
| ---------------- | ---------------------------- | ------- | ------------------ | ------------------------------------------------------------------------------ |
| tw | Tailwind Function | \_ | :heavy_check_mark: | \_ |
| style | Tailwind Style | \_ | :x: | This style is applied to the container View |
| label | string | \_ | :x: | Text that is shown beside the checkbox (right side). |
| labelStyle | Tailwind Style | \_ | :x: | Defines the style for the label. |
| checkboxStyle | Tailwind Style | \_ | :x: | Defines the style for the checkbox. |
| checkedCheckboxStyle | Tailwind Style | \_ | :x: | Defines the style for the checked checkbox. |
| value | boolean | \_ | :heavy_check_mark: | Defines if the checkbox is checked or not. |
| onPress | () => void | \_ | :heavy_check_mark: | Callback when the Checkbox is clicked. |
| icon | SVG String | \_ | :x: | To set a custom icon, is displayed when checked. |
| iconWidth | number | \_ | :x: | To define a custom width to the icon. |
| iconHeight | number | \_ | :x: | To define a custom height to the icon. |

$3

#### Description:
This component renders a toggle switch element to be used on forms.

#### Samples
Try using Expo:
https://snack.expo.dev/@jguilhermesl/amplifi-ui---mobile---togglebutton?platform=ios

`
import * as React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import { ToggleButton } from '@amplifiui/mobile';

import tw from './services/tw';

export default function App() {
const [state, setState] = React.useState(false);

return (

p-2 mt-4 h-full flex flex-col bg-gray-300 py-4}>
label="Default toggle button"
style={twmt-4}
tw={tw}
value={state}
onToggle={() => setState(!state)}
/>
widthView={80}
label="Toggle button with different size"
labelStyle={twmt-4}
style={twmt-4 w-20 h-10}
innerStyle={tww-10 h-10}
tw={tw}
value={state}
onToggle={() => setState(!state)}
/>
widthView={80}
onColor="#442321"
offColor="#212121"
label="Toggle button with different background colors"
labelStyle={twmt-4}
style={twmt-4 w-20 h-10}
innerStyle={tww-10 h-10}
tw={tw}
value={state}
onToggle={() => setState(!state)}
/>
widthView={80}
label="Toggle button with different inner style"
labelStyle={twmt-4}
style={twmt-4 w-20 h-10}
innerStyle={tww-12 h-12 bg-red-300}
tw={tw}
value={state}
onToggle={() => setState(!state)}
/>


);
}

`


#### Props
| Variable | Value Type | Default | Mandatory | Notes |
| ---------------- | ---------------------------- | ------- | ------------------ | ------------------------------------------------------------------------------ |
| tw | Tailwind Function | \_ | :heavy_check_mark: | \_ |
| onColor | string | #0369A1 | :x: | Background color when toggle is on. |
| offColor | string | #ecf0f1 | :x: | Background color when toggle is off. |
| label | string | \_ | :x: | Text that is shown beside the toggle button. |
| style | Tailwind Style | tw\w-8.5 h-4.5 ml-1 rounded-25 justify-center | :x: | This style is applied to the container View |
| value | boolean | \_ | :heavy_check_mark: | Toggle button value, this property defines if the button is active or not. |
| labelStyle | string | \_ | :x: | This style is applied to the label. |
| innerStyle | string | tw\w-4 h-4 bg-white rounded-25 shadow-black shadow | :x: | This style is applied to the inner View. |
| onToggle | string | \_ | :heavy_check_mark: | Function that must be called when the toggle is clicked. |
| widthView | string | \_ | This prop is mandatory when the width of the View container is changed.| Width in px of the container view |

Typography

#### Description:
A group of components to render text on the screen.

#### Samples
Try using Expo:
https://snack.expo.dev/@paulorieck/amplifi-ui---text-typography?platform=ios

`
import * as React from 'react';
import { View, SafeAreaView } from 'react-native';
import { Card, H1, H2, H3, Label, Info, Paragraph } from '@amplifiui/mobile';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import tw from './services/tw';

export default function App() {
return (
bg-gray-200 flex-1}>
m-4}>
mt-4 shadow}>


This is an H1