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 from "react";
import {View, StyleSheet, Text, Image} from "react-native";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import {ItemTitle} from "@src/components/TextComponents";
import Icon from "@src/components//Icon";
import {GUTTER} from "@src/styles/global";
import IconButton from "@src/components/IconButton";
const BlogItem = props => {
const {item, global, colors, actions, index, t} = props;
return (
<AppTouchableOpacity
onPress={item.onClick}
style={[styles.item, index === 0 ? {paddingTop: 0} : {}]}
>
<View
style={[
global.row,
{justifyContent: "space-between", flex: 1, alignItems: "flex-start"}
]}
>
<View style={[styles.imageWrapper]}>
<Image
style={[
styles.imageStyle,
{borderColor: "rgba(0,0,0,0.08)", borderWidth: 1}
]}
resizeMode="cover"
source={item.featuredImage}
/>
</View>
<View style={[global.bottomBorder, styles.infoContainer]}>
<ItemTitle
global={global}
numberOfLines={2}
style={[global.itemTitle, {color: colors.headingsColor}]}
>
{item.title}
</ItemTitle>
<Text style={[global.regularText, {marginTop: 8}]}>
{item.authorName}
</Text>
<View style={{flex: 1}} />
<View style={[global.row, {alignItems: "center"}]}>
<Text style={global.textMeta}>{item.date}</Text>
{item.allowComments && <View style={global.dotSep} />}
{item.allowComments && (
<IconButton
icon={require("@src/assets/img/activity-actions/post-comment.png")}
tintColor={colors.textIconColor}
style={{height: 17, width: 17, marginLeft: -4}}
renderText={() => (
<Text style={[{marginLeft: 6}, global.activityCount]}>
{item.commentCount}
</Text>
)}
/>
)}
</View>
</View>
</View>
</AppTouchableOpacity>
);
};
const styles = StyleSheet.create({
joinButton: {
marginTop: 2
},
item: {
flex: 1,
marginTop: 16,
paddingHorizontal: GUTTER
},
imageWrapper: {
height: 120,
width: 120,
borderRadius: 14,
marginBottom: 16
},
imageStyle: {
height: 120,
width: 120,
borderRadius: 14,
overflow: "hidden"
},
infoContainer: {
marginLeft: 16,
paddingRight: 16,
paddingBottom: 16,
flex: 1
}
});
export default BlogItem;
//In custom_code/index.js
...
import BlogItem from "./components/BlogItem";
export const applyCustomCode = externalCodeSetup => {
externalCodeSetup.blogApi.setBlogItemComponent(props => <BlogItem {...props} />)
}
# 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, colors } = props;
const dispatch = useDispatch();
//If showing the matched screen, show custom filter before displaying list component
if (navigation?.state?.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) => {});