Components

LearnTopicSingleScreen

<LearnTopicSingleScreen />

Constructor

# <LearnTopicSingleScreen />

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

Properties:
Name Type Attributes Description
topicId Number <optional>

The id of the topic to display

lessonId Number <optional>

The id of the lesson where the topic belongs

courseId Number <optional>

The id of the course where the lesson belongs

hidePrevNext Boolean <optional>

Use true to hide Prev and Next buttons

hideBackToCourse Boolean <optional>

Use true to hide back button

LoadingComponent ReactComponent <optional>

Use this to display your own loading component while the screen is loading

Example

Use LearnTopicSingle in custom navigation route "book"

//In custom_code/components/MyCustomScreen.js

import React from 'react';
import {View} from 'react-native';
import externalCodeDependencies from "@src/externalCode/externalRepo/externalCodeDependencies";
import LearnTopicSingleScreen from "@src/containers/Custom/LearnTopicSingleScreen";

const MyCustomScreen = (props) => {

  const courseId = 162; //Pass course id of the lesson
  const lessonId = 164; //Pass id of lesson to load
  const topicId = 224; //Pass id of topic to load


  return (

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

        <View style={{flex: 0.9, marginBottom: 80}}>
           <LearnTopicSingleScreen courseId={courseId} lessonId={lessonId} hidePrevNext={true} hideBackToCourse={true} topicId={topicId} {...props} />
        </View>

     </View>
  )


}

MyCustomScreen.navigationOptions = { header: null };

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"
 );
}