containers/Custom/AchievementsScreen.ts

// @flow
import {compose} from "recompose";

import withActiveCallBacks from "../../navigators/react-navigation-addons/withActiveCallBacks";
import {withNavigation} from "../../components/hocs/withNavigation";
import PropTypes from "prop-types";
import {EnhancedAchievements} from "../../components/Profile/Achievements";

/**
 * You can use this component to display the Achievements Screen in your custom screen.
 * @component
 * @example <caption> Use Gamipress data to display the achievements screen </caption>
 * //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" />
 * );
 *
 *
 * 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>)
 * }
 *
 *
 * export default MyCustomScreen;
 *
 * //In custom_code/index.js...
 *
 * ...
 *
 * import MyCustomScreen from "./components/MyCustomScreen";
 * export const applyCustomCode = externalCodeSetup => {
 *  externalCodeSetup.navigationApi.replaceScreenComponent("ProfileGamipress_achievements", MyCustomScreen);
 * }
 *
 */

export const AchievementsScreen = compose(
	withNavigation,
	withActiveCallBacks
)(EnhancedAchievements);

AchievementsScreen.propTypes = {
	/**
	 * Use `true` to hide the screen title container
	 * {Boolean}
	 */
	hideNavigationHeader: PropTypes.bool
};

export default AchievementsScreen;