<GroupsScreen />


# <GroupsScreen />

You can use this component to display your Groups screen in your custom screen.

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


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
         routeName: "GroupsSingleScreen",
         params: {
           group: group
         key: `GroupsSingleScreen-${}`

 return (
   <View style={{ flex: 1 }}>

     <View style={{flex: 0.8}}>
       <GroupsScreen {...props} showSearch={false} screenTitle="My Groups" hideFilters={true} hideTitle={false} hideNavigationHeader={true} />

     <View style={{ flex: 0.2, backgroundColor: props.screenProps.colors.bodyFrontBg }}>
        <Button title="Go to featured group" onPress={() => goToFeaturedGroup()} />


MyCustomScreen.navigationOptions = {
 header: null

export default MyCustomScreen;

//In custom_code/index.js...
import MyCustomScreen from "./components/MyCustomScreen";
export const applyCustomCode = externalCodeSetup => {