Methods
# hideSearch()
You can use this to remove the search component from the blog and forums screen. For example, the search bar that is by default at the top of the blog screen would be hidden.
Example
externalCodeSetup.blogApi.hideSearch();# setBlogItemComponent(BlogItemComponentnullable)
Replaces the blog item component in the blog list.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
BlogItemComponent |
React.ComponentType.<BlogItemProps> |
<nullable> |
Example
//In custom_code/components/BlogItem.js...
import React, {useState} from "react";
import {View, StyleSheet, Text} from "react-native";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import {ItemTitle} from "@src/components/TextComponents";
import {GUTTER} from "@src/styles/global";
import IconButton from "@src/components/IconButton";
import BookmarkButton from "@src/components/Blog/BookmarkButton";
import AppImage from "@src/components/AppImage";
import {AccessAuthWrapper} from "@src/components/AccessControl/AccessWrapper";
import Icon from "@src/components/Icon";
import * as Animatable from "react-native-animatable";
const BlogItem = props => {
const {
item,
global,
colors,
allowBookmark,
bookmarkActions,
index,
isSavedItems,
navigation
} = props;
const itemHeight = global.blogItemImageStyle.height + styles.item.marginTop;
const [startItemRemoveAnimation, setStartItemRemoveAnimation] = useState(
false
);
const animation = {
from: {
opacity: 1,
height: itemHeight,
transform: [{scaleY: 1}]
},
to: {
opacity: 0,
height: 0,
transform: [{scaleY: 0.6}]
}
};
return (
<Animatable.View
duration={500}
onAnimationEnd={() => {
bookmarkActions && bookmarkActions(item);
}}
style={[styles.container]}
{...startItemRemoveAnimation && {animation}}
>
<AccessAuthWrapper item={item}>
<AppTouchableOpacity
onPress={item.onClick}
style={[styles.item, index === 0 ? {paddingTop: 0} : {}]}
>
<View style={[global.row, styles.viewContainer]}>
<View style={[styles.imageAccessAuthWrapper]}>
{item.featuredImage.fontIconName ? (
<Icon
icon={item.featuredImage}
styles={global.blogItemImageStyle}
/>
) : (
<AppImage
style={[global.blogItemImageStyle]}
resizeMode="cover"
source={item.featuredImage}
/>
)}
</View>
<View style={[global.bottomBorder, styles.infoContainer]}>
<ItemTitle
global={global}
numberOfLines={2}
style={[global.blogItemTitle, {color: colors.headingsColor}]}
>
{item.title}
</ItemTitle>
<Text style={[global.blogItemAuthorText]}>{item.authorName}</Text>
<View style={{flex: 1}} />
<View
style={[global.row, {alignItems: "center", paddingTop: 10}]}
>
<Text style={global.textMeta}>{item.date}</Text>
{item.allowComments && <View style={global.dotSep} />}
{item.allowComments && (
<IconButton
icon={{fontIconName: "comment-square-dots", weight: 400}}
tintColor={colors.textIconColor}
size={20}
renderText={() => (
<Text style={[styles.iconText, global.activityCount]}>
{item.commentCount}
</Text>
)}
/>
)}
{allowBookmark && (
<BookmarkButton
global={global}
colors={colors}
item={item}
navigation={navigation}
is_bookmarked={item.bb_bookmark.is_bookmarked}
disableBouncingAnimation={isSavedItems}
onPress={() => {
if (isSavedItems) setStartItemRemoveAnimation(true);
else bookmarkActions && bookmarkActions(item);
}}
/>
)}
</View>
</View>
</View>
</AppTouchableOpacity>
</AccessAuthWrapper>
</Animatable.View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
},
item: {
flex: 1,
marginTop: 16,
paddingHorizontal: GUTTER
},
infoContainer: {
marginLeft: 16,
paddingRight: 16,
paddingBottom: 10,
flex: 1
},
viewContainer: {
justifyContent: "space-between",
flex: 1,
alignItems: "flex-start"
},
iconText: {marginLeft: 6, alignSelf: "center"}
});
export default BlogItem;
//In custom_code/index.js
...
import BlogItem from "./components/BlogItem";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.blogApi.setBlogItemComponent(props => <BlogItem {...props} />)
}# setBookmarkComponent(BookmarkComponentnullable)
You can use this hook to modify the bookmark component.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
BookmarkComponent |
React.ComponentType.<BookmarkComponentProps> |
<nullable> |
Example
Change background color of bookmarks
import React from "react";
import {View, TouchableOpacity, Animated} from "react-native";
import IconButton from "@src/components/IconButton";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.blogApi.setBookmarkComponent(props => {
const {
global,
styles,
onPress,
hitSlop,
animatedStyle,
fixAlignRight,
bookmarked,
fontIconName,
fontIconVariant,
tintColor,
withUnderlay,
underlayTheme
} = props;
return (
<View style={[global.column, styles.bookmarkContainer]}>
<TouchableOpacity
onPress={onPress}
activeOpacity={0.5}
hitSlop={hitSlop}
>
<Animated.View style={animatedStyle}>
<IconButton
fixAlignRight={fixAlignRight}
//Commented out both props to make IconButton use touchableStyle props...
// withUnderlay={withUnderlay}
// underlayTheme={underlayTheme}
icon={{
fontIconName: fontIconName,
fontIconVariant: fontIconVariant
}}
tintColor={tintColor}
size={20}
touchableStyle={{
backgroundColor: "darkgray",
width: 32,
height: 32,
borderRadius: 16,
alignItems: "center",
justifyContent: "center"
}}
/>
</Animated.View>
</TouchableOpacity>
</View>
);
});
}# setFetchParamsFilter(fetchParamsFilter)
It overrides the parameters that are used to fetch blog posts in the Blog screen so that you can make it as customizable as possible when calling its API.
Parameters:
| Name | Type | Description |
|---|---|---|
fetchParamsFilter |
TransformBlogParams |
Example
Create a custom filter in blog screen
//In components/BlogFiltersCustom.js...
import React, { useState } from "react";
import { TextInput, View, Button } from 'react-native'
import { useDispatch } from "react-redux";
import { blogRequested } from "@src/actions/blog/blog";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
import DatePicker from 'react-native-datepicker'
const hook = getExternalCodeSetup().blogApi;
hook.hideSearch();
const screenName = "blog";
const filter = "all";
const subfilters = ""
const refresh = true; //Set to true to refresh list
const searchTerm = ""
const userId = 1; //Define author id
const BlogFiltersCustom = (props) => {
const { navigation, route, colors } = props;
const dispatch = useDispatch();
//If showing the matched screen, show custom filter before displaying list component
if (route?.params?.item?.object === screenName) {
const [date, setDate] = useState(new Date())
const handleSubmit = () => {
//Set custom parameters before fetching
hook.setFetchParamsFilter((props) => {
//You can add more parameters such as "subject", "keyword" etc...
return {
...props,
date
}
})
//Dispatch redux action to call api using customized filters
dispatch(blogRequested(filter, subfilters, refresh, searchTerm, userId));
}
return <View style={{ backgroundColor: colors.whiteColor, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
<DatePicker
style={{ width: 200 }}
date={date}
mode="date"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
marginLeft: 36
}
}}
onDateChange={(date) => { setDate(date) }}
/>
<Button
onPress={() => handleSubmit()}
title="Filter"
/>
</View>
}
return null;
}
export default withGlobalStyles(BlogFiltersCustom);
//In custom_code/index.js...
...
import BlogFiltersCustom from "./components/BlogFiltersCustom";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(BlogFiltersCustom);
}# setSubFiltersFilter(subFiltersFilter)
Sets the available sub filter function for blogs. For example, you can define the items in the year sub filter.
Parameters:
| Name | Type | Description |
|---|---|---|
subFiltersFilter |
TransformBlogSubFiltersFilterCallback |
Examples
User would like to specify a year subfilter
externalCodeSetup.blogApi.setSubFiltersFilter((filters) => {
return {
categories: [
{
value: "",
translatedLabel: "subFilter:all_blog_categories"
}
],
year: [
{
value: "",
translatedLabel: "subFilter:all_years"
},
{
label: "2021",
value: "2021"
},
{
label: "2000",
value: "2000"
}
]
}
});User would like to remove the sub filters
externalCodeSetup.blogApi.setSubFiltersFilter((filters) => {});