App Codex Version: 1.0.0

Components

BlogScreen

<BlogScreen />

Constructor

# <BlogScreen />

You can use this component to show the Blog screen in your custom screen.

Properties:
Name Type Attributes Description
headerHeight Number <optional>

Define header height
hideFilters Boolean <optional>

Use true to hide filters in the screen
hideNavigationHeader Boolean <optional>

Use true to hide the screen title container
hideTitle Boolean <optional>

Use true to hide title of the screen
screenTitle String <optional>

List screen title. Default comes from translation files in BuddyBoss site
searchFocusedAnimationDuration Number <optional>

Adjust the duration of the Search animation. A higher value means a longer duration of the animation.
searchFocusedListTopSpace Number <optional>

Amount of space which the header moves up when Search input is focused. A greater value means that the header will move higher.
showSearch Boolean <optional>

Use false to hide search box
Example

Use react navigation tabs to display Blog and Activities list screens 

//In custom_code/components/MyCustomScreen.js...

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { withNavigation } from 'react-navigation';

import BlogScreen from "@src/containers/Custom/BlogScreen";
import ActivitiesScreen from "@src/containers/Custom/ActivitiesScreen";

const MyCustomScreen = (props) => (
 <View style={{ flex: 1 }}>

   <View style={{ flex: 0.05, justifyContent: "center", alignItems: "center" }}>
     <Text> Hello {props.screenProps.auth.user.user_nicename}! </Text>
   </View>

   <BlogScreen {...props} screenTitle="My Blog" showSearch={false} hideFilters={true} hideNavigationHeader={true} hideTitle={true} />
 </View>
)

const Tabs = createMaterialTopTabNavigator(
 {
   MyBlog: {
     screen: MyCustomScreen,
     navigationOptions: {
       tabBarLabel: ({ tintColor }) => (
         <View>
           <Text style={{ color: tintColor }}>Blog</Text>
         </View>
       )
     }
   },
   MyActivity: {
     screen: ActivitiesScreen,
     navigationOptions: {
       tabBarLabel: ({ tintColor }) => (
         <View>
           <Text style={{ color: tintColor }}>Activities</Text>
         </View>
       )
     }
   }
 },
 {
   initialRouteName: 'MyBlog',
   swipeEnabled: true,
   tabBarOptions: {
     style: {
       height: 45,
       backgroundColor: '#fff',
       marginTop: 50
     },
     indicatorStyle: {
       backgroundColor: 'red',
     },
     activeTintColor: 'black',
     inactiveTintColor: 'gray',
   },
 },
);

const MyCustomScreenNavigator = createStackNavigator({
 Tabs: {
   screen: Tabs,
   navigationOptions: {
     header: null
   }
 }
});

MyCustomScreenNavigator.navigationOptions = {
 header: null
}

export default withNavigation(MyCustomScreenNavigator);

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "All"
 );
 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "Main"
 );

}