App Codex Version: 1.0.0

Components

ForumsScreen

<ForumsScreen />

Constructor

# <ForumsScreen />

You can use this component to display your Forums 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 when scrolling
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
//In custom_code/components/MyCustomScreen.js...

import React, {useState, useEffect} from 'react';
import { View, Text, Button } from 'react-native';
import { useSelector } from "react-redux";
import { NavigationActions } from "react-navigation";
import ForumsScreen from "@src/containers/Custom/ForumsScreen";

const MyCustomScreen = (props) => {

 const state = useSelector((state) => state);
 const [buttonDisabled, setButtonDisabled] = useState(true);
 const featuredForumId = 108;

 //Wait 3 seconds to enable button
 useEffect(() => {
   setTimeout( () => {
     setButtonDisabled(false)
   },3000)
 }, [])

 const goToFeaturedForum = (forumId) => {

   const forum = state.forumsCache.byId.get(forumId ? forumId.toString() : "");

   //Navigate to featured forum
   props.navigation.dispatch(
     NavigationActions.navigate({
       routeName: "ForumsSingleScreen",
       params: {
         forum
       }
     })
   )
 }

 return (
   <View style={{ flex: 1 }}>
     <View style={{ flex: 0.8 }}>
       <ForumsScreen {...props} showSearch={false} screenTitle="My Forums" />
     </View>

     <View style={{ flex: 0.2, backgroundColor: props.screenProps.colors.bodyFrontBg }}>
       <Button title="Go to featured forum" onPress={() => goToFeaturedForum(featuredForumId)} disabled={buttonDisabled}/>
     </View>

   </View>)
}

MyCustomScreen.navigationOptions = {
 header: null
}

export default MyCustomScreen;

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