Andromeda

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

Npm

npm install @kanvas/andromeda

Yarn

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

<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

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

  <Button />
</Spacer>

Text

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

<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

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

Also we can give the text params for more customization

<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

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

Shape Image

This component renders a image this is the resons why react-native-fast-image package is required before using the component, inside a specific shape (circle or box) and size

<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 react-native-gesture-handler package

<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

<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

<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

<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

<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

<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.

<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

<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

<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 @react-native-async-storage/async-storage

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: @expo/react-native-action-sheet react-native-permissions react-native-image-crop-picker

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} />
}