Constructor
# <GroupsScreen />
You can use this component to display your Groups 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
Create new screen with groups list and button that redirects to featured group
//In custom_code/components/MyCustomScreen.js...
import React from 'react';
import { View, Button } from 'react-native';
import { useSelector } from "react-redux";
import { NavigationActions } from "react-navigation";
import GroupsScreen from "@src/containers/Custom/GroupsScreen";
const MyCustomScreen = (props) => {
const groupId = 8;
const state = useSelector((state) => state);
const goToFeaturedGroup = () => {
const group = state.groupsCache.byId.get(groupId ? groupId.toString() : "");
//Navigate to featured group
props.navigation.dispatch(
NavigationActions.navigate({
routeName: "GroupsSingleScreen",
params: {
group: group
},
key: `GroupsSingleScreen-${group.id.toString()}`
})
)
}
return (
<View style={{ flex: 1 }}>
<View style={{flex: 0.8}}>
<GroupsScreen {...props} showSearch={false} screenTitle="My Groups" hideFilters={true} hideTitle={false} hideNavigationHeader={true} />
</View>
<View style={{ flex: 0.2, backgroundColor: props.screenProps.colors.bodyFrontBg }}>
<Button title="Go to featured group" onPress={() => goToFeaturedGroup()} />
</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"
);
}