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 |
hideNavigationHeader
|
Boolean |
<optional> |
Use |
hideTitle
|
Boolean |
<optional> |
Use |
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 |
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"
);
}