# @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 **node@16.19.0**, **npm@8.19.3**) 
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](https://www.npmjs.com/package/@quintype/native-components?activeTab=versions).


## 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](https://github.com/quintype/native-components#responsiveimage) 
• [Header](https://github.com/quintype/native-components#header) 
• [PrimaryStoryCard](https://github.com/quintype/native-components#primarystorycard) 
• [SecondaryStoryCard](https://github.com/quintype/native-components#secondarystorycard) 
• [CollectionTitle](https://github.com/quintype/native-components#collectiontitle) 
• [CollectionCard](https://github.com/quintype/native-components#collectioncard) 
• [WebView](https://github.com/quintype/native-components#webview) 
• [Tabs](https://github.com/quintype/native-components#tabs) 

### ResponsiveImage

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

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

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

##### Props

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

##### Setup

This component uses [FastImage](https://github.com/DylanVann/react-native-fast-image) under the hood.

```bash
npm install react-native-fast-image
```

```bash
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

```bash
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.

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

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

##### Props

```javascript
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.

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

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

##### Props

```javascript
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.

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

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

##### Props

```javascript
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.

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

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

##### Props

```javascript
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.

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

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

##### Props

```javascript
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](https://github.com/react-native-community/react-native-webview) package. All the props of the package can be used with this component.

```javascript
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

```javascript
WebViewProps &
  {
    closeButton: PropTypes.element
  };
```

##### Setup

```bash
npm install react-native-webview
```

```bash
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

```bash
react-native link react-native-webview
```

### Tabs

Tabs component. Please refer to the docs [here](https://github.com/ptomasroos/react-native-scrollable-tab-view).

### 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.