@quintype/native-components v2.20.25

@quintype/native-components

Getting started

$ npm install @quintype/native-components --save

Linking

This library has both js only as well as native components. Please check the instructions for the respective components for more details.

Components

• ResponsiveImage  • Header  • PrimaryStoryCard  • SecondaryStoryCard  • CollectionTitle  • CollectionCard  • WebView  • Tabs 

ResponsiveImage

This component takes an image, and resizes it to the correct aspect ratio using imgix or thumbor.

import { ResponsiveImage, getScreenPercentageWidth } from "@quintype/native-components";

<ResponsiveImage
  cdn={CDN}
  style={style.image}
  imageWidth={getScreenPercentageWidth(20)}
  slug={SLUG}
  metadata={META_DATA}
/>;

Props

resizeMode: Image.propTypes.resizeMode,
slug: PropTypes.string.isRequired,
cdn: PropTypes.string.isRequired,
style: Image.propTypes.style,
imageWidth: PropTypes.number

Setup

This component uses FastImage under the hood.

npm install react-native-fast-image

cd ios/ && pod install

If the current react-native version is >60.4,

and building the app should be enough for it to work. For versions <60.4, please run

react-native link react-native-fast-image

Header

Header component for the app. The header and title can be styled using the style and titleStyle props respectively.

import { Header } from "@quintype/native-components";

<Header
  title="BAR & BENCH"
  rightComponent={
    <TouchableOpacity>
      <Icon name="bell" size={26} color="#FFF" />
    </TouchableOpacity>
  }
/>;

Props

rightComponent: PropTypes.element,
style: ViewStyle,
title: PropTypes.string.isRequired,
titleStyle: TextStyle

PrimaryStoryCard

PrimaryStoryCard component for the app. onPress event available to navigate or perform other functionality. Takes story as a prop.

import { PrimaryStoryCard, getScreenPercentageWidth } from "@quintype/native-components";

<PrimaryStoryCard
  onPress={() => /* Do something */}
  cdn={cdn}
  story={story}
  imageWidth={getScreenPercentageWidth(100)}
/>

Props

cdn: PropTypes.string.isRequired,
imageStyle: Image.style,
imageWidth: PropTypes.number,
headlineStyle: TextStyle,
dividerStyle: ViewStyle,
authorTextStyle: TextStyle,
story: PropTypes.any.isRequired

SecondaryStoryCard

SecondaryStoryCard component for the app. onPress event available to navigate or perform other functionality. Takes story as a prop.

import { SecondaryStoryCard, getScreenPercentageWidth } from "@quintype/native-components";

<SecondaryStoryCard
  onPress={() => /* Do something */}
  cdn={cdn}
  story={story}
  imageWidth={getScreenPercentageWidth(40)}
/>

Props

cdn: PropTypes.string.isRequired,
imageStyle: Image.style,
imageWidth: PropTypes.number,
headlineStyle: TextStyle,
dateTextStyle: TextStyle,
story: PropTypes.any.isRequired

CollectionTitle

Component for displaying the title of a collection. Needs a title prop.

import { CollectionTitle } from "@quintype/native-components";

<CollectionTitle
  title={collectionName}
  onPress={() => /* Do something */}
/>

Props

TouchableOpacityProps &
  {
    title: PropTypes.string.isRequired,
    titleStyle: TextStyle,
    indicatorStyle: ViewStyle
  };

CollectionCard

Component which puts together PrimaryStoryCard, SecondaryStoryCard and CollectionTitle to display a collection. It needs prop stories which takes an array of stories in a collection. Has callback onStoryPress which provides the story it was clicked on.

import { CollectionCard } from "@quintype/native-components";

<CollectionCard
  onCollectionPress={() => /* Do something */}
  cdn={cdn}
  collectionName={name}
  stories={stories}
  onStoryPress={story =>  /* console.log(story) */}
/>

Props

cdn: PropTypes.string.isRequired,
collectionName: PropTypes.string.isRequired,
stories: PropTypes.array.isRequired,
onCollectionPress: PropTypes.func,
onStoryPress: PropTypes.func

WebView

Component for displaying static webpages in a WebView. Uses this package. All the props of the package can be used with this component.

import { WebView } from "@quintype/native-components";

<WebView
  source={{ uri: "https://ace-web.qtstage.io/static-pages/about-us" }}
  closeButton={
    <TouchableOpacity>
      <Icon name="close" size={26} color="#FFF" />
    </TouchableOpacity>
  }
/>;

Props

WebViewProps &
  {
    closeButton: PropTypes.element
  };

Setup

npm install react-native-webview

cd ios/ && pod install

If the current react-native version is >60.4,

and building the app should be enough for it to work. For versions <60.4, please run

react-native link react-native-webview

Tabs

Tabs component. Please refer to the docs here.