App Codex Version: 1.0.0

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);
}

# setBlogSingleBody(BlogSingleBody)

You can use this hook to customize the body/content of the blog.

Parameters:
Name Type Description
BlogSingleBody React.ComponentType.<BlogSingleBodyProps>
Example

Generate the content using the react-native-render-html library 

...

import HTML from 'react-native-render-html';
export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.blogSingleApi.setBlogSingleBody(({blog}) => <HTML html={blog.content} />);
}

# setBlogWebView(BlogWebView)

You can use this to hook to replace the webview component that shows a "Read more" button when rendering a post as a web fallback. For example, you can use this hook to render the full content without the use of a "Read more" button.

Parameters:
Name Type Description
BlogWebView React.ComponentType.<BlogWebViewProps>
Example
import WebViewWithMore from "@src/components/WebViewWithMore";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.blogSingleApi.setBlogWebView(
        ({
            blog,
            online,
            t,
            webViewHeight,
            source,
            global,
            colors,
            onShouldStartLoadWithRequest,
            ModalHeaderComponent
        }) => {
            return (
                <View style={{paddingTop: 10}}>
                    <WebViewWithMore
                        online={online}
                        t={t}
                        height={webViewHeight}
                        source={source}
                        global={global}
                        colors={colors}
                        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
                        ModalHeaderComponent={ModalHeaderComponent}
                    />
                </View>
            );
        }
    );
}

# setBookmarkComponent(BookmarkComponentnullable)

You can use this hook to modify the bookmark component.

Parameters:
Name Type Attributes Description
BookmarkComponent React.ComponentType.<BookmarkComponentProps> <nullable>
Example
import React from "react";
import {View, TouchableOpacity, Animated} from "react-native";
import IconButton from "@src/components/IconButton";

export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.blogSingleApi.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}
                           withUnderlay={withUnderlay}
                           underlayTheme={underlayTheme}
                           icon={{
                               fontIconName: fontIconName,
                               fontIconVariant: fontIconVariant
                           }}
                           tintColor={tintColor}
                           size={20}
                       />
                   </Animated.View>
               </TouchableOpacity>
           </View>
       );
   });
}

# setCommentAvatar(CommentAvatar)

You can use this hook to customize the avatar of the user who added the comment.

Parameters:
Name Type Description
CommentAvatar React.ComponentType.<CommentAvatarProps>
Example
...

import AppAvatar from "@src/components/AppAvatar";
export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.blogSingleApi.setCommentAvatar(({ avatarUrl }) =>
    <AppAvatar
      size={48}
      source={{ uri: avatarUrl }}
      style={{ marginRight: 10 }}
    />)
}

# setCommentButtons(CommentButtons)

You can use this hook to customize the buttons that are displayed below the comment.

Parameters:
Name Type Description
CommentButtons React.ComponentType.<CommentButtonsProps>
Example
...

import BlogCommentButtons from "@src/components/Common/Buttons/BlogCommentButtons";
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentButtons(({
    comment,
    onComment,
    t,
    global,
    colors,
    navigateToReport
  }) => <BlogCommentButtons
      {...{
        item: comment,
        t,
        replyPress: onComment,
        global,
        colors,
        navigateToReport
      }}
    />
  )
}

# setCommentContent(CommentContent)

You can use this hook to customize the content of the comment.

Parameters:
Name Type Description
CommentContent React.ComponentType.<CommentContentProps>
Example
...

import HTML from 'react-native-render-html';
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentContent(({
    commentVM,
    global,
    blogCommentTagStyles,
    onLinkPress
  }) =>
    <HTML
      html={commentVM.content}
      baseFontStyle={global.text}
      tagsStyles={blogCommentTagStyles}
      onLinkPress={onLinkPress()}
    />
  )
}

# setCommentHeader(CommentHeader)

You can use this hook to customize the component which displays the name of the user who added the comment and the comment's date.

Parameters:
Name Type Description
CommentHeader React.ComponentType.<CommentHeaderProps>
Example
...

import { ItemTitle } from "@src/components/TextComponents";
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentHeader(({
    nameDateContainerStyle,
    commentVM,
    global
  }) => <View style={nameDateContainerStyle}>
      <ItemTitle global={global}>{commentVM.author_name}</ItemTitle>
      <View style={{ width: 8 }} />
      <Text style={global.textItemSubtitle}>{commentVM.date}</Text>
    </View>
  )
}

# setCommentReplyAvatar(CommentReplyAvatar)

You can use this hook to customize the avatar of the user who added a reply to a comment.

Parameters:
Name Type Description
CommentReplyAvatar React.ComponentType.<CommentAvatarProps>
Example
...

import AppAvatar from "@src/components/AppAvatar";
export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.blogSingleApi.setCommentReplyAvatar(({ avatarUrl }) =>
    <AppAvatar
      size={36}
      source={{ uri: avatarUrl }}
      style={{ marginRight: 10 }}
    />)
}

# setCommentReplyButtons(CommentReplyButtons)

You can use this hook to customize the buttons that are displayed below a reply comment.

Parameters:
Name Type Description
CommentReplyButtons React.ComponentType.<CommentReplyButtonsProps>
Example
...

import BlogCommentButtons from "@src/components/Common/Buttons/BlogCommentButtons";
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentReplyButtons(({
    item,
    t,
    replyPress,
    colors,
    global,
    navigateToReport
  }) => <BlogCommentButtons
      {...{
        item,
        t,
        replyPress,
        global,
        colors,
        navigateToReport
      }}
    />
  )
}

# setCommentReplyContent(CommentReplyContent)

You can use this hook to customize the reply content to a comment.

Parameters:
Name Type Description
CommentReplyContent React.ComponentType.<CommentContentProps>
Example
...

import HTML from 'react-native-render-html';
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentReplyContent(({
    commentVM,
    global,
    blogCommentTagStyles,
    attemptDeepLink
  }) =>
    <HTML
      html={commentVM.content}
      baseFontStyle={global.text}
      tagsStyles={blogCommentTagStyles}
      onLinkPress={attemptDeepLink(false)}
    />
  )
}

# setCommentReplyHeader(CommentReplyHeader)

You can use this hook to customize the component which displays a reply to the comment. This can modify the name of the user who added the comment and the comment's date.

Parameters:
Name Type Description
CommentReplyHeader React.ComponentType.<CommentHeaderProps>
Example
...

import { ItemTitle } from "@src/components/TextComponents";
export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentReplyHeader(({
    nameDateContainerStyle,
    commentVM,
    global
  }) => <View style={nameDateContainerStyle}>
      <ItemTitle global={global}>{commentVM.author_name}</ItemTitle>
      <View style={{ width: 8 }} />
      <Text style={global.textItemSubtitle}>{commentVM.date}</Text>
    </View>
  )
}

# setCommentsModalHeader(CommentsModalHeader)

You can use this hook to customize the modal's header.

Parameters:
Name Type Description
CommentsModalHeader React.ComponentType.<CommentsModalHeaderProps>
Example
...

import IconButton from "@src/components/IconButton";
export const applyCustomCode = (externalCodeSetup) => {

  externalCodeSetup.blogSingleApi.setCommentsModalHeader(({
    global,
    modalHeaderContainerStyle,
    closeCommentsModal,
    colors,
    t
  }) => {

    return <View style={[global.row, modalHeaderContainerStyle]}>
      <IconButton
        icon={{fontIconName: "angle-left", weight: 400}}
        pressHandler={closeCommentsModal}
        tintColor={colors.linkColor}
        style={{height: 20, width: 20, alignSelf: "center"}}
        touchableStyle={{alignItems: "center", justifyContent: "center"}}
        renderText={() => (
          <Text style={[global.seeLink]}>{t("common:back")}</Text>
        )}
      />

      <Text style={[global.filterTitle, { flex: 1, textAlign: "center" }]}>
        {t("blog:comments")}
      </Text>

      <View style={{ width: 44 }} />
    </View>

  })
}

# 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];

   })
}