hypertoxin v0.2.2

Hypertoxin

A themeable and declarative React Native component library for developing native mobile apps.

Published Open-source App Virida built with Hypertoxin component library.

Checkout Virida on the app store!

• Documentations
  • Button Components
  • Field Components
  • Text Components
  • Image Components
  • Layout Components
  • Screen Components
  • Using Room Property
  • Using Action Property
  • Using Exclusions Property
  • Animation API
  • Theme Customization
• Todo
• Change Log
• License

Documeantations are still WIP.

Installation

$ npm install hypertoxin --save

Demo & Showcase

Hypertoxin comes with a full demo that you can build and run on your device or simulator. All of the code examples in this README are from the demo. To build the demo for iOS,

$ cd hypertoxin/demo
npm install

This will install the required modules such as React Native, Hypertoxin, Hyperflow, and others. Then open hypertoxin/demo/ios with Xcode, select your ios simulator/device, and build. The default build scheme is release. When use successfully, you will see the following on your device or simulator.

Usage

The imported hypertoxin object is consists of Ht, ThemeContext, and Theme. Ht is an object containing all available components. Theme is the default global theme object which is used as a reference for making custom themes. ThemeContext the a react context provider which is required for setting custom themes.

import React, { Component } from 'react';
import ReactNative from 'react-native'
import { Ht, ThemeContext, Theme as DefaultTheme } from 'hyperflow';

// All current available components with more to come. See todo list.
const {
    FlatButton,
    RaisedButton,
    AreaButton,

    AvatarImage,
    IconImage,
    CoverImage,

    TextField,
    SearchField,

    HorizontalDivider,
    VeriticalDivider,

    HeadlineText,
    TitleText,
    SubtitleText,
    InfoText,
    CaptionText,

    BodyScreen,
    HeaderScreen,

    RowLayout,
    ColumnLayout
} = Ht;

export default class App extends Component {
  render() {
      return (
          <ThemeContext.Provider value = {{
              DefaultTheme // Modify this DefaultTheme object to make your own custom theme
          }}>
              // Top level app component goes here...
          </ThemeContext.Provider>
      );
  }
}

Documentations

Button Components

Hypertoxin has three button components, FlatButton, RaisedButton, and AreaButton

Flat Button Properties

A standard button component that can be styled as an icon, a clear, or simply a flat opaque button.

Raised Button Properties

Raised button is similar to flat button with the exceptions that it has permanent drop shadow and opaque color.

Area Button Properties

Unlike flat or raised button, area button was intended mainly as a list item component. Therefore it works nicely as a selectable item in a typical list view.

Note: themed property indicates using values defined by the global theme provider.

By default, flat, raised, and area button components pass shade, size, color (flat & raised only), and disabled properties down to their child components and at the same time set margin = { 0 } and indentation = { 0 } properties onto its children. This behavior can be override by child components with the exclusions property. . See Using Exclusions Property section for details.

Flat & raised button animated internal view composition reference names. See Animation API for details:

• animated-container-view
• animated-content-left-room-view
• animated-content-middle-room-view
• animated-content-right-room-view
• animated-activity-indicator-room-view
• animated-badge-room-view

Area button animated internal view composition reference names. See Animation API for details:

• animated-container-view
• animated-content-left-room-view
• animated-content-right-room-view

Flat, raised & area button methods & callbacks:

• animate - See Animation API for details
• onPress - Button press callback
  • arguments:
    • event (object) - React Native event
  • return: None

Flat Button Examples

<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'default' />
<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'primary' />
<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'secondary' />
<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'accent' />

Clear buttons can be created when styling flat buttons with overlay = 'transparent' property. The component will auto-adjust the label text color accordingly.

<FlatButton overlay = 'transparent' label = 'BUTTON' color = 'default' />
<FlatButton overlay = 'transparent' label = 'BUTTON' color = 'primary' />
<FlatButton overlay = 'transparent' label = 'BUTTON' color = 'secondary' />
<FlatButton overlay = 'transparent' label = 'BUTTON' color = 'accent' />

To add icon image to button, add a child icon image component (more details for IconImage component below) with a content room property. All button components have 4 child rooms, content-left, content-middle, content-right, and badge.

Internally, a room is just a convenient way for creating child Views, thus allowing the JSX code to be less clutter and much more declarative.

<FlatButton overlay = 'opaque' size = 'small' label = 'SMALL' color = 'primary' >
    <IconImage room = 'content-left' source = 'home' />
</FlatButton>
<FlatButton overlay = 'opaque' size = 'normal' label = 'NORMAL' color = 'secondary' >
    <IconImage  room = 'content-left' source = 'home' />
</FlatButton>
<FlatButton overlay = 'opaque' size = 'large' label = 'LARGE' color = 'accent' >
    <IconImage room = 'content-left' source = 'home' />
</FlatButton>
<FlatButton overlay = 'opaque' size = 'small' label = 'SMALL' color = 'primary' >
    <IconImage room = 'content-right' source = 'profile' />
</FlatButton>
<FlatButton overlay = 'opaque' size = 'normal' label = 'NORMAL' color = 'secondary' >
    <IconImage room = 'content-right' source = 'profile' />
</FlatButton>
<FlatButton overlay = 'opaque' size = 'large' label = 'LARGE' color = 'accent' >
    <IconImage room = 'content-right' source = 'profile' />
</FlatButton>

<FlatButton overlay = 'transparent' size = 'small' label = 'SMALL' color = 'primary' >
    <IconImage room = 'content-left' source = 'home' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'normal' label = 'NORMAL' color = 'secondary' >
    <IconImage  room = 'content-left' source = 'home' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'large' label = 'LARGE' color = 'accent' >
    <IconImage room = 'content-left' source = 'home' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'small' label = 'SMALL' color = 'primary' >
    <IconImage room = 'content-right' source = 'profile' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'normal' label = 'NORMAL' color = 'secondary' >
    <IconImage room = 'content-right' source = 'profile' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'large' label = 'LARGE' color = 'accent' >
    <IconImage room = 'content-right' source = 'profile' />
</FlatButton>

<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'primary' corner = 'sharp' />
<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'secondary' corner = 'round' />
<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'accent' corner = 'circular' />

To create a button with a badge, add a child text component with a room = 'badge'.

<FlatButton overlay = 'opaque' label = 'BUTTON' color = 'primary' >
    <InfoText room = 'badge' color = 'white' > 0 </InfoText>
    <IconImage room = 'content-left' source = 'home' />
</FlatButton>

<FlatButton overlay = 'transparent-outline' size = 'small' label = 'BUTTON' color = 'primary' corner = 'sharp' >
    <IconImage room = 'content-left' source = 'star' />
</FlatButton>
<FlatButton overlay = 'transparent-outline' size = 'normal' label = 'BUTTON' color = 'secondary' corner = 'round' >
    <IconImage room = 'content-right' source = 'star' />
</FlatButton>
<FlatButton overlay = 'transparent-outline' size = 'large' label = 'BUTTON' color = 'accent' corner = 'circular' />

<FlatButton overlay = 'transparent' size = 'small' color = 'primary' corner = 'circular' >
    <IconImage room = 'content-middle' source = 'favorite' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'normal' color = 'secondary' corner = 'circular' >
    <IconImage room = 'content-middle' source = 'favorite' />
</FlatButton>
<FlatButton overlay = 'transparent' size = 'large' color = 'accent' corner = 'circular' >
    <IconImage room = 'content-middle' source = 'favorite' />
</FlatButton>
<FlatButton overlay = 'transparent' color = { Theme.color.palette.purple } corner = 'circular' >
    <IconImage room = 'content-middle' source = 'smiley-face' />
</FlatButton>
<FlatButton overlay = 'transparent' color = { Theme.color.palette.green } corner = 'circular' >
    <IconImage room = 'content-middle' source = 'star' />
</FlatButton>

Raised Button Examples

<RaisedButton label = 'BUTTON' color = 'default' />
<RaisedButton label = 'BUTTON' color = 'primary' />
<RaisedButton label = 'BUTTON' color = 'secondary' />
<RaisedButton label = 'BUTTON' color = 'accent' />

<RaisedButton size = 'small' label = 'SMALL' color = 'primary' >
    <IconImage room = 'content-left' source = 'home' />
</RaisedButton>
<RaisedButton size = 'normal' label = 'NORMAL' color = 'secondary' >
    <IconImage room = 'content-left' source = 'home' />
</RaisedButton>
<RaisedButton size = 'large' label = 'LARGE' color = 'accent' >
    <IconImage room = 'content-left' source = 'home' />
</RaisedButton>
<RaisedButton size = 'small' label = 'SMALL' color = 'primary' >
    <IconImage room = 'content-right' source = 'profile' />
</RaisedButton>
<RaisedButton size = 'normal' label = 'NORMAL' color = 'secondary' >
    <IconImage room = 'content-right' source = 'profile' />
</RaisedButton>
<RaisedButton size = 'large' label = 'LARGE' color = 'accent' >
    <IconImage room = 'content-right' source = 'profile' />
</RaisedButton>

<RaisedButton label = 'BUTTON' color = 'primary' corner = 'sharp' />
<RaisedButton label = 'BUTTON' color = 'secondary' corner = 'round' />
<RaisedButton label = 'BUTTON' color = 'accent' corner = 'circular' />

<RaisedButton color = 'primary' corner = 'circular' size = 'large' >
    <IconImage room = 'content-middle' source = 'add' />
</RaisedButton>
<RaisedButton color = 'secondary' corner = 'circular' size = 'large' >
    <IconImage room = 'content-middle' source = 'edit' />
</RaisedButton>
<RaisedButton color = 'accent' corner = 'circular' size = 'large' >
    <IconImage room = 'content-middle' source = 'star' />
</RaisedButton>

Area Button Examples

<FlatList
    data = { animals }
    renderItem = {(listData) => {
        const animal = listData.item;
        return (
            <AreaButton shade = { shade }>
                <ColumnLayout room = 'content-left' roomAlignment = 'center' >
                    <AvatarImage room = 'content-left' source = { animal.avatarImage } dropShadowed = { false } />
                    <TitleText room = 'content-right' size = 'small' indentation = { 20 }>{ animal.name }</TitleText>
                </ColumnLayout>
                <FlatButton room = 'content-right' overlay = 'transparent' corner = 'circular' color = 'red' >
                    <IconImage room = 'content-middle' source = `favorite` />
                </FlatButton>
            </AreaButton>
        );
    }}
/>

Field Components

Hypertoxin has two field components, TextField and SearchField

Search Field Properties

Use search field to create functional search bar. Notable feature is suggestion pull-up view.

Text Field Properties

Use text fields to create beautiful input forms. Notable features are input reformatting & validation and selectable pull-up view.

Note: themed property indicates using values defined by the global theme provider.

By default, text field component passes shade, size, and disabled properties down to it child components and at the same time set margin = { 0 } and indentation = { 0 } properties onto its children. By default, search field component passes shade property down to it child components and at the same time set margin = { 0 } and indentation = { 0 } properties onto its children. This behavior can be override by child components with the exclusions property. See Using Exclusions Property section for details.

Search field animated internal view composition reference names. See Animation API for details:

• animated-container-view
• animated-box-view
• animated-content-left-room-view
• animated-content-right-room-view
• animated-suggestion-view

Search field available actions:

• search
• clear
• blur
• focus
• expand
• collapse
• show
• show-suggestion
• hide
• hide-suggestion

Search field methods & callbacks:

• animate - See Animation API for details
• isCollapsed
  • arguments: None
  • return: bool
• isVisible
  • arguments: None
  • return: bool
• isSuggestionVisible
  • arguments: None
  • return: bool
• isFocused
  • arguments: None
  • return: bool
• collapse
  • arguments:
    • animation (object) - Collapse animation object. See Animation API for details.
  • return: None
• expand
  • arguments:
    • animation (object) - Expand animation object. See Animation API for details
  • return: None
• show
  • arguments:
    • animation (object) - Show animation object. See Animation API for details
  • return: None
• showSuggestion
  • arguments:
    • animation (object) - Show animation object. See Animation API for details
  • return: None
• hide
  • arguments:
    • animation (object) - Hide animation object. See Animation API for details
  • return: None
• hideSuggestion
  • arguments:
    • animation (object) - Hide animation object. See Animation API for details
  • return: None
• focus
  • arguments: None
  • return: None
• blur
  • arguments: None
  • return: None
• clear
  • arguments: None
  • return: None
• clearSuggestion
  • arguments: None
  • return: None
• onSearch
  • arguments:
    • value (string) - Submitted search text value
  • return: None
• onGetAutocompletionValues (async)
  • arguments:
    • value (string) - Submitted search text value
  • return:
    • results (array) - An array of autocompletion text values
• onEditing
  • arguments:
    • value (string) - Current search text value
  • return: None
• onFocus
  • arguments: None
  • return: None
• onBlur
  • arguments: None
  • return: None
• onCollapse
  • arguments: None
  • return: None
• onExpand
  • arguments: None
  • return: None
• onHide
  • arguments: None
  • return: None
• onShow
  • arguments: None
  • return: None
• onHideSuggestion
  • arguments: None
  • return: None
• onShowSuggestion
  • arguments: None
  • return: None
• onClear
  • arguments: None
  • return: None
• onClearSuggestion
  • arguments: None
  • return: None
• renderSuggestionItem - Render the suggestion item component
  • arguments:
    • item (object) - Suggestion item
    • onPressSelectAndSubmit - Callback to indicate which item was selected and then submitted
      • arguments:
        • item - Selected item
      • return: None
    • onPressSelect - Callback to indicate which item was selected
      • arguments:
        • item - Selected item
      • return: None
  • return - Component

Text field animated internal view composition reference names. See Animation API for details:

• animated-container-view
• animated-box-view
• animated-label-text
• animated-underline-focused-view
• animated-content-left-room-view
• animated-content-right-room-view
• animated-selection-view

Text field available actions:

• clear
• blur
• focus
• show-selection
• hide-selection

Text field methods & callbacks:

• animate - See Animation API for details
• isValidated - Check if text input's value is validated
  • arguments: None
  • return: bool
• isSelectionVisible - Check if selectable pull-up view is visible
  • arguments: None
  • return: bool
• isFocused - Check if text input's value is focused
  • arguments: None
  • return: bool
• showSelection - Show selectable pull-up view if selectableValues is provided
  • arguments: None
  • return: None
• hideSelection - Hide selectable pull-up view if selectableValues is provided
  • arguments: None
  • return: None
• focus - Focus text input
  • arguments: None
  • return: None
• blur - Blur text input
  • arguments: None
  • return: None
• clear - Clear text input
  • arguments: None
  • return: None
• onValidate - Calls after text field's text input onChangeText or onEndEditing. See default onValidate
  • arguments:
    • value (string) - Current text value
    • inputType
  • return: object - Expects return object with a validate boolean property and a status string property
• onReformat - Calls after text field's text input onChangeText. See default onReformat
  • arguments:
    • value (string) - Current text value
  • return: string - Return reformatted value
• onEditing - Calls when text field's text input onChangeText
  • arguments:
    • value (string) - Current text value
  • return: None
• onDoneEdit - Calls when a value in text field's selectable pull-up view is selected or after text field's text input onSubmitEditing
  • arguments:
    • value (string) - Current text value
  • return: None
• onSelect - Calls when a value in text field's selectable pull-up view is selected
  • arguments:
    • value (string) - Selected value
  • return: None
• onFocus
  • arguments: None
  • return: None
• onBlur
  • arguments: None
  • return: None
• onHideSelection
  • arguments: None
  • return: None
• onShowSelection
  • arguments: None
  • return: None
• onClear
  • arguments: None
  • return: None
• renderSelectableItem - Render an item from a list of selectable items and renders them into the list in pull-up selection view.See below for examples

Search Field Examples

<SearchField
    hint = 'Search...'
    pinnedSuggestionValues = {[ `Hypertoxin`, `React Native` ]}
    onGetAutocompletionValues = {async (text) => {
        if (text) {
            const response = await fetch(`http://suggestqueries.google.com/complete/search?client=firefox&q=${text}`, {
                method: `get`
            });
            const data = await response.json();
            return data[1].slice(0, 6);
        }
        return [];
    }}
    renderSuggestionItem = {(item, onPressSelectAndSubmit, onPressSelect) => {
        // item = {
        //     value: ...             String value of the suggestion item
        //     suggestionType: ..     String value to indicate the suggestion types: pin, autocompletion, or history
        // }
        // onPressSelect              Callback to indicate which item was selected
        // onPressSelectAndSubmit     Callback to indicate which item was selected and then submitted
        return (
            <AreaButton shade = { shade } overlay = 'transparent' size = 'small' onPress = {() => onPressSelectAndSubmit(item)}>
                <ColumnLayout room = 'content-left' roomAlignment = 'center'
                >
                    <IconImage
                        room = 'content-left'
                        source = {(() => {
                            switch (item.suggestionType) { // eslint-disable-line
                            case `pin`:
                                return `star`;
                            case `history`:
                                return `history`;
                            case `autocompletion`:
                                return `search`;
                            default:
                                return null;
                            }
                        })()}
                        margin = {{ left: 10 }}
                    />
                    <InfoText room = 'content-right' indentation = { 10 }>{ item.value }</InfoText>
                </ColumnLayout>
                {
                    item.suggestionType !== `pin` ?
                    <FlatButton room = 'content-right' overlay = 'transparent' corner = 'circular' onPress = {() => onPressSelect(item)} margin = {{ right: 10 }}>
                        <IconImage room = 'content-middle' source = 'recall' size = 'small' />
                    </FlatButton> : null
                }
            </AreaButton>
        );
    }}
    style = {{
        suggestion: {
            left: -10
        }
    }}
>
    <FlatButton room = 'content-left' action = 'expand' overlay = 'transparent' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'search' />
    </FlatButton>
    <FlatButton room = 'content-left' action = 'collapse' overlay = 'transparent' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'go-back' />
    </FlatButton>
    <FlatButton room = 'content-right' action = 'clear' overlay = 'transparent' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'cancel' />
    </FlatButton>
</SearchField>

Text Field Examples

<TextField label = 'EMAIL' hint = 'user@gmail.com' inputType = 'email-address' >
    <IconImage room = 'content-left' source = 'email' />
    <FlatButton room = 'content-right' overlay = 'transparent' action = 'clear' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'cancel' />
    </FlatButton>
</TextField>
<TextField secured = { true } label = 'PASSWORD' >
    <IconImage room = 'content-left' source = 'lock' />
    <FlatButton room = 'content-right' overlay = 'transparent' action = 'clear' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'cancel' />
    </FlatButton>
</TextField>

<TextField label = 'ADD NOTE' charLimit = { 128 } lineLimit = { 5 }>
    <FlatButton overlay = 'transparent' room = 'content-right' action = 'clear' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'cancel' />
    </FlatButton>
</TextField>

<TextField
    label = 'PHONE NUMBER'
    inputType = 'phone-pad'
    charLimit = { 14 }
    onValidate = {(value, inputType) => {
        let regex;
        let validated = true;
        let status = ``;

        if (value !== `` && inputType === `phone-pad`) {
            regex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;

            validated = regex.test(value);
            status = validated ? `` : `Phone number is invalid`;
        }
        return {
            validated,
            status
        };
    }}
    onReformat = {(value) => {
        return value.split(``).filter((char) => char !== `-` && char !== `(` && char !== `)` && char !== ` `).map((char, index) => {
            if (index === 0) {
                return `(${char}`;
            }
            if (index === 2) {
                return `${char}) `;
            }
            if (index === 5) {
                return `${char}-`;
            }
            return char;
        }).join(``);
    }}
>
    <FlatButton room = 'content-right' overlay = 'transparent' action = 'clear' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'cancel' />
    </FlatButton>
</TextField>

<TextField
    label = 'LABEL'
    selectableValues = {[ `VALUE A`, `VALUE B`, `VALUE C` ]}
    renderSelectableItem = {(item, onPressSelect) => {
        // item = {
        //     value: ...       String value of the selectable item
        //     selected: ..     Boolean to indicates that the item is selected or not
        // }
        // onPressSelect        Callback to indicate which item was selected
        return (
            <AreaButton
                shade = { shade }
                overlay = 'transparent'
                size = 'small'
                onPress = {() => onPressSelect(item)}
                contentRightRoomAlignment = 'start'
                margin = {{
                    horizontal: 10
                }}
            >
                <InfoText room = 'content-left' indentation = { 10 }>{ item.value }</InfoText>
                {
                    item.selected ? <IconImage room = 'content-right' source = 'check' /> : null
                }
            </AreaButton>
        );
    }}

    <FlatButton room = 'content-right' overlay = 'transparent' action = 'clear' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'cancel' />
    </FlatButton>
    <FlatButton room = 'content-right' overlay = 'transparent' action = 'show-selection' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'collapse' />
    </FlatButton>
    <FlatButton room = 'content-right' overlay = 'transparent' action = 'hide-selection' corner = 'circular' >
        <IconImage room = 'content-middle' source = 'expand' />
    </FlatButton>
</TextField>

Text Components

Hypertoxin has five text components, CaptionText, InfoText, SubtitleText, TitleText, HeadlineText

Text (Caption, Info, Subtitle, Title, & Headline) Properties

Note: themed property indicates using values defined by the global theme provider.

Text (caption, info, subtitle, title, & headline) animated internal view composition reference names. See Animation API for details:

• animated-text

Text (caption, info, subtitle, title, & headline) methods & callbacks:

• animate - See Animation API for details

Text (Caption, Info, Subtitle, Title, & Headline) Examples

<HeadlineText size = 'large' color = 'default' > Headline Large </HeadlineText>
<HeadlineText size = 'normal' color = 'primary' > Headline Normal </HeadlineText>
<HeadlineText size = 'small' color = 'secondary' > Headline Small </HeadlineText>

<TitleText size = 'large' color = 'default' > Headline Large </TitleText>
<TitleText size = 'normal' color = 'primary' > Headline Normal </TitleText>
<TitleText size = 'small' color = 'secondary' > Headline Small </TitleText>

<SubtitleText size = 'large' color = 'default' > Headline Large </SubtitleText>
<SubtitleText size = 'normal' color = 'primary' > Headline Normal </SubtitleText>
<SubtitleText size = 'small' color = 'secondary' > Headline Small </SubtitleText>

<InfoText size = 'large' color = 'default' > Headline Large </InfoText>
<InfoText size = 'normal' color = 'primary' > Headline Normal </InfoText>
<InfoText size = 'small' color = 'secondary' > Headline Small </InfoText>

<CaptionText size = 'large' color = 'default' > Headline Large </CaptionText>
<CaptionText size = 'normal' color = 'primary' > Headline Normal </CaptionText>
<CaptionText size = 'small' color = 'secondary' > Headline Small </CaptionText>

Screen Components

Hypertoxin has two screen components, BodyScreen, HeaderScreen

Header Screen Properties

Use header screen to create navigation top bar.

Body Screen Properties

Note: themed property indicates using values defined by the global theme provider.

By default, header screen component passes shade, size, and color properties down to it child components and at the same time set margin = { 0 } and indentation = { 0 } properties onto its children. By default, body screen component passes shade property down to it child components. This behavior can be override by child components with the exclusions property. See Using Exclusions Property section for details.

Header screen animated internal view composition reference names. See Animation API for details:

• animated-container-view
• animated-navigation-view
• animated-content-left-room-view
• animated-content-middle-room-view
• animated-content-right-room-view
• `anima