@airship/rn-components

This is a component library created and used by Airship for quickly building out consistent and high quality React Native apps! It is made up of basic inputs and animated wrapper components. This library is included in all Airfoil templates by default.

Features

• ✨ Easy to use, configurable components
• 📱 Animations that use the UI thread for a consistent 60fps on iOS and Android
• ⏳ Saves you from building basic components from scratch every project

Getting Started

To add to your project, run the command

yarn add @airship/rn-components

Directory 📚

• @airship/rn-components
  • Features
  • Getting Started
  • Directory 📚
  • API Reference
    • AnimatedFade
    • AnimatedMove
    • AnimatedPressable
    • SegmentedControl

API Reference

AnimatedFade

An animated View that can wrap a React Native component fade a component in or fade it out.

Example:

import { AnimatedFade } from '@airship/rn-components';

<AnimatedFade delay={1000}>
  {children}
</AnimatedFade>

| Prop | Type | Required | Default | Description | | --- | :--: | :--: | :--: | --- | | triggerFade | boolean | no | true | By default, animation is triggered on mount. triggerFade allows for controlled triggering. | | loop | boolean | no | false | Enables looping for the animation | | opacityStart | number | no | 0 | Defaults to 0. Values can range from 0.0 - 1.0 | | opacityEnd | number | no | 1 | Defaults to 1. Values can range from 0.0 - 1.0 | | duration | number | no | 800 | Specify in ms how long the fade animation lasts. | | delay | number | no | 0 | Specify in ms how long to wait until the fade animation occurs. | | style | ViewStyle | no | undefined | Pass React Native View styles to AnimatedFade. | | onEnd | () => void | no | undefined | When the animation finishes and this function exists, the onEnd function will be called. |

AnimatedMove

An animated View that can wrap a React Native component and move its position.

Example:

import { AnimatedMove } from '@airship/rn-components';

<AnimatedMove startY={-50} delay={1000}>
  {children}
</AnimatedMove>

| Prop | Type | Required | Default | Description | | --- | :--: | :--: | :--: | --- | | moveOnMount | boolean | no | true | AnimatedMove is set to start animating on render. Setting this to false in conjunction with triggerMove will allow you to control when the animation occurs. | | triggerMove | boolean | no | false | Setting to true will cause the move animation to start. | | tension | number | no | 18 | Controls the speed. Reference | | friction | number | no | 4 | Controls "bounciness"/overshoot. Reference | | toX | number | no | 0 | Move your component to a new X position. | | toY | number | no | 0 | Move your component to a new Y position. | | startX | number | no | 0 | Move your component to its X origin position (ex. setting to -10 will have the component move from the left to its position you have in your styles). | | startY | number | no | 0 | Move your component to its Y origin position (ex. setting to -10 will have the component move from the top to its position you have in your styles). | | delay | number | no | 0 | Specify in ms how long to wait until the animation occurs. | | style | ViewStyle | no | undefined | Pass React Native View styles to AnimatedMove. | | onEnd | () => void | no | undefined | When the animation finishes and this function exists, the onEnd function will be called. |

AnimatedPressable

An animated View that changes its scale on press, and returns to its original position on the press out. It can render out a component with props available to it such as color interpolation based on the pressed state.

Example:

import { AnimatedPressable } from '@airship/rn-components';

<View>
  <AnimatedPressable
    colorStart={'rgb(255, 255, 255)'}
    colorEnd={'rgb(255, 42, 19)'}
    renderComponent={(colorInterpolation) => (
      <ThumbsUpSVG
        height={54}
        width={63}
        stroke={colors.orange}
        fillColor={colorInterpolation}
      />
    )}
  />
  <AnimatedPressable
    toScaleValue={0.8}
    friction={12}
    tension={120}
    onPress={() => Alert.alert('Pressed!')}
    renderComponent={() => (
      <View
        style={{
          marginTop: 32,
          width: 100,
          height: 100,
          backgroundColor: colors.trueBlack,
          borderRadius: 12,
        }}
      />
    )}
  />
  <AnimatedPressable
    toScaleValue={1.5}
    renderComponent={() => (
      <View
        style={{
          marginTop: 32,
          width: 100,
          height: 100,
          backgroundColor: colors.orange,
          borderRadius: 12,
        }}
      />
    )}
  />
</View>

| Prop | Type | Required | Default | Description | | --- | :--: | :--: | :--: | --- | | toScaleValue | number | no | 0.5 | This number controls how much the Animated.View will scale. It can be lower or higher than 1. | | tension | number | no | 18 | Controls the speed. Reference | | friction | number | no | 4 | Controls "bounciness"/overshoot. Reference | | colorStart | string | no | null | Initial color value, must be given as a rgb string. Color interpolation does not work with hexes. NOTE: Works off of pressed. Think of it as a "like" button. If pressed has a true value, that means the current color is colorEnd. | | colorEnd | string | no | null | End color value, must be given as a rgb string. Color interpolation does not work with hexes. NOTE: Works off of pressed. Think of it as a "like" button. If pressed has a true value, that means the current color is colorEnd. | | isPressed | boolean | no | false | The current state of AnimatedPressable. Can be passed a value such as starting with pressed set to true, which means the colorEnd is the starting color. | | onPress | () => void | no | undefined | When the animation finishes (press out) and this function exists, the onPress function will be called. | | callFunctionOnPressIn | boolean | no | false | Setting to true will cause the onPress function to call on the press in of the tap instead of the press out default. | | renderComponent | (colorInterpolation: Animated.AnimatedInterpolation) => React.ReactElement | no | undefined | This render function allows for a child component to be passed with access to the colorInterpolation values IF a colorStart and colorEnd have been set. Otherwise the value will not exist and will render the component without value to colorInterpolation. | | style | ViewStyle | no | undefined | Pass React Native View styles to AnimatedPressable. |

SegmentedControl

An animated tab controller for selections in an app with customizable color schemes.

Example:

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { SegmentedControl } from '@airship/rn-components';

export const App = () => {
  const [currIdx, setCurrIdx] = useState(0);
  const [currIdx2, setCurrIdx2] = useState(0);
  const [currIdx3, setCurrIdx3] = useState(0);

  return (
    <View>
      <SegmentedControl
        tabs={['First', 'Second']}
        onChange={(idx) => setCurrIdx(idx)}
        currentIndex={currIdx}
        activeSegmentBackgroundColor={colors.background}
        containerStyle={styles.segmentContainer}
        textStyle={styles.textStyle}
      />
      <SegmentedControl
        tabs={['First', 'Second', 'Third']}
        onChange={(idx) => setCurrIdx2(idx)}
        currentIndex={currIdx2}
        activeSegmentBackgroundColor={colors.background}
        containerStyle={styles.segmentContainer}
        textStyle={styles.textStyle}
      />
      <SegmentedControl
        tabs={['First', 'Second']}
        onChange={(idx) => setCurrIdx3(idx)}
        currentIndex={currIdx3}
        activeSegmentBackgroundColor={colors.orange}
        containerStyle={styles.segmentContainerCustom}
        textStyle={styles.textStyle}
        activeTextColor={'#FFF'}
        activeContainerStyles={styles.activeContainer}
      />
    </View>
  )

  const styles = StyleSheet.create({
    segmentContainer: {
      backgroundColor: colors.background3,
    },
    segmentContainerCustom: {
      backgroundColor: colors.background3,
      borderRadius: 50,
    },
    textStyle: {
      color: colors.text,
    },
    activeContainer: { borderRadius: 50 },
  })
}

| Prop | Type | Required | Default | Description | | --- | :--: | :--: | :--: | --- | | tabs | string[] | yes | [] | An array of strings, with each one being a label for each tab. | | onChange | (index: number) => void | yes | null | Exposes the current index when changing tabs for state management. | | currentIndex | number | yes | null | This is the currently selected tab. | | activeSegmentBackgroundColor | string | yes | '' | Color for the currently selected tab. | | containerStyle | ViewStyle | no | null | Add additional/override styling to the segment container. | | textStyle | TextStyle | no | null | Add additional/override styling to the text components. | | activeTextColor | string | no | #20242B | Color of the text in the active selected tab. | | activeContainerStyles | ViewStyle | no | null | Add additional/override styling to the active selected tab container. |