Making changes to existing app screens

In this tutorial, you will learn how to make changes to the existing app screens to customize your app. Make sure you have already set up your Git repo for app development.

The following changes can be made in the BuddyBoss App:

• Replace components in a screen
• Display new contents on the screen
• Filter list of components
• Disable certain feature in the app

Replace Components in app screens

There are a number of hooks available to replace certain components in different app screens. For example, you may want to replace the member item component in the Members List Screen. For that, you have the setMemberItemComponent from membersListHooksApi and you can do the following:

// index.js
import React from "react";
import {NativeModules, Text} from "react-native";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.membersListHooksApi.setMemberItemComponent(
   props => {
     console.log(props);
     return <Text>{props.item.fullname}</Text>
  }); 
};

Display new contents in existing screens

In case you want to show new contents below the header component of the Profile Screen, you can use the setAfterProfileHeader method from profileScreenHooksApi. (Please note that the same method is available for ForumsSingleScreen, SocialGroupSingleScreen, BlogSingleScreen).

// index.js
import React from "react";
import {NativeModules, Text} from "react-native";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.profileScreenHooksApi.setAfterProfileHeader(
   props => {
     console.log(props);
     return <Text>showing user id after header, {props.user.id}</Text>
   }); 
};

Filter a list of components in app screens

When you need to filter a list of components within a screen, for example, if you want to add a share button alongside the Like, Comment and Delete buttons in the Activity and Comment items on the Activities Screen. You can do this by using the setActivityButtonsFilter from activitiesScreenApi.

For example, you want to add the share button to the 3rd index of the buttons list, go to ‘custom_code/index.js’ and inside the applyCustomCode function do the following:

// index.js
import React from "react";
import {NativeModules, Share, TouchableOpacity, Text} from "react-native";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.activitiesScreenApi.setActivityButtonsFilter((
    b, 
    item, 
    actionsList, 
    settings
   ) => {
      b.splice(2, 0, {
       permissionField: true,
       jsx: (
         <TouchableOpacity 
          onPress={() => Share.share({
            message: item.content
          })}
         >
          <Text>Share</Text>
         <TouchableOpacity>
       )
      });

      return b;
  }); 
};

Disabling Features

There are hooks available to enable and disable certain features in the app such as: not showing the Profile Item in the More Screen, disabling Offline Downloading, etc. There are also hooks available for hiding contents in the app such as hiding course author, hiding tags and/or media in discussion items, etc. 

Shown in the example below is how to disable Offline Downloading in the app from custom_code:

// index.js
import React from "react";
import {NativeModules} from "react-native";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.sqliteApi.disableSqlite(); 
};