App Codex Version: 1.0.0

Components

TopicsScreen

<TopicsScreen />

Constructor

# <TopicsScreen />

You can use this component to display your Topics 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 from 'react';
import {View, Platform} from 'react-native';
import TopicsScreen from "@src/containers/Custom/TopicsScreen";
import {ifIphoneX} from "react-native-iphone-x-helper";
import {BARHEIGHT} from "@src/styles/global";

const LIST_HEADER_HEIGHT = 116;
const SEARCH_BAR_TOP_PADDING = Platform.select({
  ios: ifIphoneX(10, BARHEIGHT + 10),
  android: 10
});

let defaultTopSpace = LIST_HEADER_HEIGHT - SEARCH_BAR_TOP_PADDING; //computation for default top space
defaultTopSpace -= 60;

const MyCustomScreen = (props) => (
  <View style={{ flex: 1 }}>
    <TopicsScreen {...props}
      headerHeight={200}
      searchFocusedListTopSpace={defaultTopSpace}
      searchFocusedAnimationDuration={1000}
    />
  </View>
)


export default MyCustomScreen;

//In custom_code/index.js...
import MyCustomScreen from "./components/MyCustomScreen";
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.navigationApi.replaceScreenComponent("topics", MyCustomScreen);
}