@airship/rn-components v0.2.4

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

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>

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>

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 },
  })
}