@airship/rn-components

# @airship/rn-components <img align="center" src="./assets/logo.png" width="100%" height="auto" /> 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](https://github.com/teamairship/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](#airshiprn-components) - [Features](#features) - [Getting Started](#getting-started) - [Directory 📚](#directory-) - [API Reference](#api-reference) - [AnimatedFade](#banimatedfadeb) - [AnimatedMove](#banimatedmoveb) - [AnimatedPressable](#banimatedpressableb) - [SegmentedControl](#bsegmentedcontrolb) ## 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> ``` <img src="./assets/AnimatedFade.gif" width="473" height="941" /> | 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> ``` <img src="./assets/AnimatedMove.gif" width="473" height="941" /> | 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](https://reactnative.dev/docs/animated#spring) | | friction | number | no | `4` | Controls "bounciness"/overshoot. [Reference](https://reactnative.dev/docs/animated#spring) | | 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> ``` <img src="./assets/pressable.gif" width="473" height="941" /> | 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](https://reactnative.dev/docs/animated#spring) | | friction | number | no | `4` | Controls "bounciness"/overshoot. [Reference](https://reactnative.dev/docs/animated#spring) | | 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 }, }) } ``` <img src="./assets/segmented.gif" width="473" height="941" /> | 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. |