Class

BlogSingleApi

BlogSingleApi()

Blog Single Hooks. Instance name: blogSingleApi

You can utilize this to add details to your blog page and modify its structure.

Constructor

# new BlogSingleApi()

Example
externalCodeSetup.blogSingleApi.METHOD_NAME

Methods

# setAfterBlogSingleBody(AfterBlogSingleBody)

You can use this to add a component after the blog's body component.

Parameters:
Name Type Description
AfterBlogSingleBody React.ComponentType.<AfterBlogSingleBodyProps>
Example

Display other blogs from redux state

...

import { useSelector } from "react-redux";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.blogSingleApi.setAfterBlogSingleBody((props) => {

   const blogIds = useSelector(state => state.blog.all.ids);
   const blogCache = useSelector(state => state.blogCache);

   if (blogIds.size > 0) {

     const goToBlog = (blog) => {
       props.navigation.dispatch(
         props.navigation.navigate({
           routeName: "BlogSingleScreen",
           params: {
             blog
           },
	            key: `BlogSingleScreen-${blog.id.toString()}`
         })
       );
     }

     return <>
       {blogIds.map((id) => {

         if (props.blog.id == id) {
           return null;
         }

         const details = blogCache.byId.get(id.toString());

         return <TouchableOpacity style={{margin: 30}} onPress={() => goToBlog(details)}>
           <View style={{flex: 1, borderRadius: 10, borderWidth: 1, padding: 10, alignItems: "center"}}>
             <Text>
               {details.title.rendered}
             </Text>
           </View>
         </TouchableOpacity>

       })}
     </>

   }

   return null;

 });
}

# setAfterDetailsComponent(AfterDetailsComponent)

You can use this to add a component that displays details of the blogs such as author name and blog title within the header.

Parameters:
Name Type Description
AfterDetailsComponent React.ComponentType.<AfterDetailsComponentProps>
Example
//In custom_code/components/AfterDetails.js

import React from 'react';
import { View, Text } from 'react-native';
import moment from 'moment';
const AfterDetails = (props) => {

   const {blog} = props;

   const lastModified = moment(blog.modified).startOf('day').fromNow();

   return <View style={{padding: 20}}>
       <Text> This blog was last modified {lastModified} </Text>
   </View>
}

export default AfterDetails;

//In custom_code/index.js

...

import AfterDetails from "./components/AfterDetails";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.blogSingleApi.setAfterDetailsComponent((props) => <AfterDetails {...props} />)
}

# setAfterProfileHeader(AfterProfileHeader)

Used to add a component below the header if you want to include an abstract, image or any other information.

Parameters:
Name Type Description
AfterProfileHeader React.ComponentType.<AfterBlogProfileHeaderProps>
Example

Add a banner image after blog profile header component

...

import FastImage from "react-native-fast-image";
export const applyCustomCode = externalCodeSetup => {

   const AfterProfileHeader = ({ blog }) => {
       return (<FastImage style={{width: "auto", height: 100}} source={{uri: "https://link-to-image.png"}} />)
   }

   externalCodeSetup.blogSingleApi.setAfterProfileHeader(AfterProfileHeader)
}

# setBeforeBlogSingleBody(BeforeBlogSingleBody)

You can use this to add a component before the blog's body component.

Parameters:
Name Type Description
BeforeBlogSingleBody React.ComponentType.<BeforeBlogSingleBodyProps>
Example

Add HTML with redirect function

...

import HTML from "react-native-render-html";

export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.blogSingleApi.setBeforeBlogSingleBody((props) => {

   const html = `Go to link: <a href="https://buddyboss.com">BuddyBoss</a>`;

   return <View style={{ flex: 1, borderRadius: 10, borderWidth: 1, padding: 10, alignItems: "center" }}>
     <HTML
       containerStyle={{
         paddingTop: 2,
         paddingBottom: 1,
         flex: 1
       }}
       html={html}
       onLinkPress={props.linkClickHandler}
     />
   </View>

 })
}

# setBeforeDetailsComponent(BeforeDetailsComponent)

You can use this to add a component displaying information such as title and author before the blog details.

Parameters:
Name Type Description
BeforeDetailsComponent React.ComponentType.<BeforeDetailsComponentProps>
Example
//In custom_code/components/BeforeDetails.js

import React from 'react';
import { View, Text } from 'react-native';
import moment from 'moment';
const BeforeDetails = (props) => {

   const {blog} = props;

   const lastModified = moment(blog.modified).startOf('day').fromNow();

   return <View style={{padding: 20}}>
       <Text> This blog was last modified {lastModified} </Text>
   </View>
}

export default BeforeDetails;

//In custom_code/index.js

import BeforeDetails from "./components/BeforeDetails";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.blogSingleApi.setBeforeDetailsComponent((props) => <BeforeDetails {...props} />)
}

# setBlogDetailsComponent(BlogDetailsComponent)

It replaces the blog details component in the header.

Parameters:
Name Type Description
BlogDetailsComponent React.ComponentType.<BlogDetailsComponentProps>
Example
...

import Animated from "react-native-reanimated";

export const applyCustomCode = externalCodeSetup => {
 const BlogDetailsComponent = ({ blog, global, titleOpacity, textStyle }) => {
  return (<Animated.Text
   numberOfLines={4}
   style={[
     global.textHeaderTitle,
     { alignSelf: "flex-start", opacity: titleOpacity },
     textStyle
   ]}
  >
   {blog.title} {(blog.commentCount > 0) && "- Check out all the fascinating comments!"}
  </Animated.Text>);

 }
 externalCodeSetup.blogSingleApi.setBlogDetailsComponent(BlogDetailsComponent)
}

# setBlogHeaderAvatar(BlogHeaderAvatar)

You can replace the blog header avatar instead of using the default settings that includes displays of avatar, author name and publishing date.

Parameters:
Name Type Description
BlogHeaderAvatar React.ComponentType.<BlogHeaderAvatarProps>
Example

User would like to add more info in the BlogHeaderAvatar component

...

import AppAvatar from "@src/components/AppAvatar";
import {FontWeights} from "@src/styles/global";

export const applyCustomCode = externalCodeSetup => {
 const BlogHeaderAvatar = ({  blog, global, textStyle }) => {
  return (
    <View style={[global.row, { flex: 1 }]}>
       <AppAvatar
           size={35}
           source={{ uri: blog.avatar }}
           style={{ marginRight: 10 }}
       />
       <View>
           <Text
               style={[global.text, { fontWeight: FontWeights.semiBold }, textStyle]}>
               {blog.authorName}
           </Text>
           <Text style={[global.text, { fontWeight: FontWeights.semiBold }, textStyle]}>{blog.link}</Text>
           <Text style={[global.textMeta, textStyle]}>{blog.date}</Text>
       </View>
    </View>
   );

 }
 externalCodeSetup.blogSingleApi.setBlogHeaderAvatar(BlogHeaderAvatar);
}

# setCustomHeaderBackground(customHeaderBackground)

You can add a custom cover image or banner for all your blogs to replace the default blog cover image. (If you want to change the image header background for a particular blog, then you would have to specify the blog in your function.)

Parameters:
Name Type Description
customHeaderBackground String

Resource to replace a blog's cover image

Example
externalCodeSetup.blogSingleApi.setCustomHeaderBackground('https://link-to-image.png');

# setTransformBlogHeaderButtons(transformBlogHeaderButtons)

You can transform default blog buttons for commenting, Facebook and Twitter sharing and replace it with your preferred ones.

Parameters:
Name Type Description
transformBlogHeaderButtons TransformBlogButtonsCallback
Example

Add an email share button

...

import Share from "react-native-share";
import IconButton from "@src/components/IconButton";

export const applyCustomCode = externalCodeSetup => {

   externalCodeSetup.blogSingleApi.setTransformBlogHeaderButtons((buttons, blog) => {

       const social = Share.Social.EMAIL;

       const hasCover = !!blog.featuredImage;
       const iconBackgroundColor = hasCover ? "#fff" : "#A6ADB5";
       const iconTintColor = hasCover ? "#000" : "#fff";

       const Email = <IconButton
           pressHandler={() =>
               Share.shareSingle({
                       message: blog.excerpt.rendered,
                       url: blog.link,
                       title: blog.title,
                       subject: blog.title,
                       email: "[email protected]",
                       social: social
                   })
           }
           icon={{uri: "https://link-to-image.png"}}
           touchableStyle={{
               backgroundColor: iconBackgroundColor,
               alignItems: "center",
               borderRadius: 18,
               padding: 0,
               marginRight: 8
           }}
           tintColor={iconTintColor}
           style={{ height: 28, width: 28 }}
           rtlStyleFix={"handled"}
       />

       return [...buttons, Email];

   })
}