App Codex Version: 1.0.0

Components

MembersScreen

<MembersScreen />

Constructor

# <MembersScreen />

You can use this component to showcase your Members 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

Create custom search for members list screen

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

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import MembersScreen from "@src/containers/Custom/MembersScreen";

const MyCustomScreen = (props) => {

 const searchMembers = () => {
   // Call custom function for searching members
 }

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

     <View style={{flex: 0.2, backgroundColor: "#fff"}}>

      <Text style={{fontSize: 30, marginTop: 90, marginLeft: 30}}> Members </Text>
       <TextInput />
       <Button title="Search" onPress={() => searchMembers} />
     </View>

     <View style={{flex: 0.8}}>
       <MembersScreen {...props} screenTitle="My Members" hideFilters={false} showSearch={false} hideTitle={false} hideNavigationHeader={false}/>
     </View>
   </View>)
}


export default MyCustomScreen;

//In custom_code/index.js...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.navigationApi.replaceScreenComponent("MembersScreen", MyCustomScreen);
}