$ npm install @quintype/native-components --save
This library has both js only as well as native components. Please check the instructions for the respective components for more details.
• ResponsiveImage • Header • PrimaryStoryCard • SecondaryStoryCard • CollectionTitle • CollectionCard • WebView • Tabs
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}
/>;
resizeMode: Image.propTypes.resizeMode,
slug: PropTypes.string.isRequired,
cdn: PropTypes.string.isRequired,
style: Image.propTypes.style,
imageWidth: PropTypes.number
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 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={() => {}}
/>;
logoComponent: PropTypes.element,
rightComponent: PropTypes.element,
style: ViewStyle,
logoComponentStyle: TextStyle,
onPress: PropTypes.func
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)}
/>
cdn: PropTypes.string.isRequired,
imageStyle: Image.style,
imageWidth: PropTypes.number,
headlineStyle: TextStyle,
dividerStyle: ViewStyle,
authorTextStyle: TextStyle,
story: PropTypes.any.isRequired
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)}
/>
cdn: PropTypes.string.isRequired,
imageStyle: Image.style,
imageWidth: PropTypes.number,
headlineStyle: TextStyle,
dateTextStyle: TextStyle,
story: PropTypes.any.isRequired
Component for displaying the title of a collection. Needs a title
prop.
import { CollectionTitle } from "@quintype/native-components";
<CollectionTitle
title={collectionName}
onPress={() => /* Do something */}
/>
TouchableOpacityProps &
{
title: PropTypes.string.isRequired,
titleStyle: TextStyle,
indicatorStyle: ViewStyle
};
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) */}
/>
cdn: PropTypes.string.isRequired,
collectionName: PropTypes.string.isRequired,
stories: PropTypes.array.isRequired,
onCollectionPress: PropTypes.func,
onStoryPress: PropTypes.func
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>
}
/>;
WebViewProps &
{
closeButton: PropTypes.element
};
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 component. Please refer to the docs here.
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.