npm package: @kanvas/andromeda
Description: Andromeda is a package which brings utilities for your React Native application, bringing components that can allow fast development inside your application.
Author: Bryan Astacio
Latest version: 0.0.10

## Andromeda
Andromeda is a package which brings utilities for your React Native application, bringing components that can allow fast development inside your application.

**Npm**
```bash
npm install @kanvas/andromeda
```

**Yarn**
```bash
yarn add @kanvas/andromeda
```

## Motivation
Building application on React Native sometimes it tends to be tedious and repeative, this is why by giving a set of components to build layout faster and easy that using styling and views.

## Components

Here is a brief documentation of how to use the given components of the package.

### **Flex**

This component allow the users to build rapid layout by using flexbox

```jsx
<Flex align="center" justify="center" flex={1}>
  <Button />

  <HeadingText>Hello</HeadingText>

  <Button>
</Flex>
```

### **Spacer**

Allow to separate component base on given unit of distance base on the horizontal and vertical padding

```jsx

<Spacer 
  horizontal
  size={10}>
  <Button />

  <Button />
</Spacer>
```

### **Text**

Allow users to set text with custom properties like size, font style, alignment, etc...

```jsx
<Text
  size={34}
  color="#000000"
  weight="normal"
  fontFamily="Console"
  align="center"
  lineHeight={40}
  fontStyle="regular"
>
  Hello worlld
</Text>
```

### **Currency**

By a given number it returns a formated text using some basic expecifications

```jsx
<Currency
  value={2000}
  precision={2}
  separator={'.'}
  delimiter={','}
  unit={'$'}
/>
``` 

Also we can give the text params for more customization

```jsx
<Currency
  value={2000}
  precision={2}
  separator={'.'}
  delimiter={','}
  unit={'$'}
  size={34}
  color="#000000"
  weight="normal"
  fontFamily="BalooTamma2"
  align="center"
  lineHeight={40}
  fontStyle="regular"
/>
``` 

### **Header**

Generic header component which is use to add subcomponents on the center, left and right sections of the top screen

```jsx
<Header
  Left={<Icon.Plus />}
  Center={<Text>Welcome</Text>}
  Right={<Icon.Profile />}
/>
``` 

### **Shape Image**

This component renders a image this is the resons why <a href="https://github.com/DylanVann/react-native-fast-image">react-native-fast-image</a> package is required before using the component, inside a specific shape (circle or box) and size 

```jsx
<ShapeImage 
  source={require('avatar.png')}
  size={20}
  shape={ShapeImageType.Circle}
/>

<ShapeImage 
  source={require('car.png')}
  size={40}
  shape={ShapeImageType.Box}
/>
``` 

### **Button**

Components are base on the need to implement basic buttons functionalities as fast as posible this is why it internally implements thing such as text properties from the Text and button properties suce as Left and Right component content, to use this is required to install the <a href="https://github.com/software-mansion/react-native-gesture-handler">react-native-gesture-handler</a> package

```jsx
<Button 
  text="My Button"
  onPress={() => console.log("here")}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
    backgroundColor: "#000"
  }}
  textProps={{
    size: 14,
    color: "#FFF,
  }}
/>
``` 

Also we can give a component on the Left and Right prop

```jsx
<Button
  text="My Button"
  onPress={() => console.log("here")}
  Left={<Icon.Car />}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
    backgroundColor: "#000"
  }}
  textProps={{
    size: 14,
    color: "#FFF,
    paddingHorizontal: 5
  }}
/>

<Button
  text="My Button"
  onPress={() => console.log("here")}
  Right={<Icon.Car />}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
    backgroundColor: "#000"
  }}
  textProps={{
    size: 14,
    color: "#FFF,
    paddingHorizontal: 5
  }}
/>

<Button
  text="My Button"
  onPress={() => console.log("here")}
  Right={<Icon.Car />}
  Left={<Icon.Car />}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
    backgroundColor: "#000"
  }}
  textProps={{
    size: 14,
    color: "#FFF,
    paddingHorizontal: 5
  }}
/>
``` 

Is important to know that inside the Button component there are more options or subcomponents that similar logic, between these we have the following

#### **Text**

Render a borderless component without background color

```jsx
<Button.Text
  text="My Button"
  onPress={() => console.log("here")}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
  }}
  textProps={{
    size: 14,
    color: "#000,
  }}
/>
``` 
#### **Icon**

Render a icon button on a bordeless component without background color

```jsx
<Button.Icon
  Icon={<Icon.Car>}
  onPress={() => console.log("here")}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
  }}
/>
``` 

#### **Circle**

Render a circle component that has an icon in the center


```jsx
<Button.Circle
  Icon={<Icon.Car>}
  onPress={() => console.log("here")}
  style={{
    paddingVertical: 8,
    paddingHorizontal: 20,
    background: 'lime'
  }}
/>
``` 

### **Form**

Basic collection of subcomponents to help the building of forms quicker and easier

#### **Base Input**

Base input component which gives all the needed props to succesfully use on text inputs such as emails, passwords and more


```jsx
<Form.BaseInput 
  label='Email' // <- label to be display if not added with not display and label
  labelSpace={3} // <- space between the label and the input
  value={myValue}
  onChangeText={onChange}
  onBlur={onBlur}
  Right={<Icon.Check />} // <- Get a react component and render on the right
  Left={<Icon.User />} // <- Get a react component and render on the left
  containerStyle={{
    backgroundColor: '#f3f3f3',
    borderColor: '#f3f3f3',
  }}
  style={{
    color: '#3D3D3D',
  }}
  textProps={{ // <- properties of the text label
    color: '#3D3D3D',
    size: 16,
    align: 'right'
  }}
/> 
```

#### **Text Input**

This component renders a basic input text on their screen base on TextInput component from React Native.


```jsx
<Form.TextInput 
  value={myValue}
  onChangeText={onChange}
  onBlur={onBlur}
  Right={<Icon.Check />} // <- Get a react component and render on the right
  Left={<Icon.User />} // <- Get a react component and render on the left
  containerStyle={{
    backgroundColor: '#f3f3f3',
    borderColor: '#f3f3f3',
  }}
  style={{
    color: '#3D3D3D',
  }}
/> 
```

#### **Password Input**

This component render a text input with the complete logic with on the Icon to render a button with such icon


```jsx
<Form.PasswordInput 
  value={myValue}
  onChangeText={onChange}
  onBlur={onBlur}
  Right={iconEye ? <Icon.OpenEye /> : <Icon.CloseEye />}
  onIconPress={(active) => closeIconEye(active)}
  containerStyle={{
    backgroundColor: '#f3f3f3',
    borderColor: '#f3f3f3',
  }}
  style={{
    color: '#3D3D3D',
  }}
/> 
```

#### **Switch Input**

This component render a switch component 


```jsx
<Form.Switch label={'Test'} />
```

## Hooks

Here is a brief documentation of how to use the given hooks of the package.

### **Use Storage State Hook**

Base on a key and value given it returns a managable state just like useState, important note is to have previously installed the package <a href="https://github.com/react-native-async-storage/async-storage">@react-native-async-storage/async-storage</a>

```jsx
export default function AnotherTest({ onLogin }) {
  const [user] = useStorageState('STORED_USER', {})

  return (
    <TouchableOpacity onPress={onLogin}>
      <Text>User {{user.name}} {{user.lastname}} logged</Text>
    </TouchableOpacity>
  )
}

export default function Test() {
  const [user, setUser] = useStorageState('STORED_USER', {})

  const onLogin = () => {
    setUser({
      name: 'Test',
      lastname: 'User'
    });
  };

  if (!user) {
    return <Text>No user inside the platform</Text>
  }

  return <AnotherTest onLogin={onLogin} />
}
```

### **Use Device Image Hook**

This hook allow you to get a image from the device's *Camera* or *Gallery* and use it on your components, this hook has the following package dependencies that should be installed before using it:
<a href="https://github.com/expo/react-native-action-sheet">@expo/react-native-action-sheet</a>
<a href="https://github.com/zoontek/react-native-permissions">react-native-permissions</a>
<a href="https://github.com/ivpusic/react-native-image-crop-picker">react-native-image-crop-picker</a>

```jsx
export default function Test() {
  const { getImageFromDevice } = useDeviceImage({
    cropping: true,
    width: 50,
    height: 50,
    mediaType: 'photo',
  })

  const openActionSheet = () => {
    const image = await getImageFromDevice();
    console.log(image);
  }

  return <Button onPress={openActionSheet} />
}
```