Components

AchievementsScreen

<AchievementsScreen />

Constructor

# <AchievementsScreen />

You can use this component to display the Achievements Screen in your custom screen.

Properties:
Name Type Attributes Description
hideNavigationHeader Boolean <optional>

Use true to hide the screen title container

Example

Use Gamipress data to display the achievements screen

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

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

const GamipressAchievements = props => {
 return <AchievementsScreen {...props} tabId="gamipress_achievements"/>
};

const BadgeosAchievements = props => (
 <AchievementsScreen {...props} tabId="badgeos_achievements" />
);

GamipressAchievements.navigationOptions = () => ({header: null});

BadgeosAchievements.navigationOptions = () => ({header: null});

const MyCustomScreen = (props) => {

 //Show gamipress achievements... Badgeos achievements can also be used by passing the correct parameter
 return (
   <View style={{ flex: 1 }}>

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

       <Text style={{fontSize: 30, marginTop: 90, marginLeft: 30}}> My Achievements </Text>

     </View>

     <View style={{flex: 0.8}}>
       <GamipressAchievements {...props} hideNavigationHeader={true}  />
     </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.replaceScreenComponent("ProfileGamipress_achievements", MyCustomScreen);
}