@quintype/native-components

Getting started

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

Creating and installing a beta version

Publishing a version with beta tag:

1. Add, commit and push beta changes on a new branch.
2. Run npm i --legacy-peer-deps (Using [email protected], [email protected])
3. Run npm cache clean --force in case the above command fails.
4. Create a tag by running npm version 2.21.0-beta.0 (add `-beta.iteration` (where iteration can just be incremented (+1) for subsequent beta-versions on the same development branch)
5. Publish the tag by running npm publish --tag beta
6. Make sure to commit and push the new beta versioning changes.

Installing a version with beta tag on host app:

npm install @quintype/native-components@beta

Note:

• prePublishOnly script that was in use before is incompatible with recent node/npm versions. Hence standard-version-release.sh is not used.
• Revert "version" changes from package.json before creating PR (for merging to master).
• Access all versions here.

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 logo component can be styled using the style and logoComponentStyle props respectively.

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

<Header
  logoComponent={<HeaderIcon />}
  rightComponent={
    <TouchableOpacity>
      <Icon name="bell" size={26} color="#FFF" />
    </TouchableOpacity>
  }
  onPress={() => {}}
/>;

Props

logoComponent: PropTypes.element,
rightComponent: PropTypes.element,
style: ViewStyle,
logoComponentStyle: TextStyle,
onPress: PropTypes.func

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.

Text

All Text is either of primary font-family or secondary font-family. To render primary texts, a props of "primary" is passed to the <Text /> component or it defaults to the secondary font-family. The font family is provided in the app's theme configurations.

Behind the scenes, it uses React's Context API to pass down these values. The context is defined in the context.js file in the utils folder and defaulted with the theme's font-family. However, the context can be initialised in the App's root component using a "Provider" and setting the values that will be passed down to children components.