Constructor
# <DocumentsScreen />
You can use this component to showcase your Documents 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_screen/components/MyCustomScreen.js ...
import React from 'react';
import { View, Text } from 'react-native';
import FastImage from "react-native-fast-image";
import { DEVICE_WIDTH } from "@src/styles/global";
import DocumentsScreen from "@src/containers/Custom/DocumentsScreen";
const MyCustomScreen = (props) => {
return (
<View style={{ flex: 1 }}>
<View style={{ marginTop: 50, alignSelf: "center" }}>
<FastImage style={{ width: DEVICE_WIDTH, height: 110, marginBottom: 10 }} source={{ uri: "https://link-to-image.png" }} />
</View>
<View style={{ flex: 1 }}>
<DocumentsScreen {...props} showSearch={false} hideFilters={true} screenTitle="My Docs" hideNavigationHeader={true} headerHeight={80}/>
</View>
</View>
)
}
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"
);
}