Skip to main content

​
Show Profile Widget

Display the Gameball customer profile widget that contains customer details, available reward campaigns, leaderboard, and more.

​
Basic Usage

import { GameballApp, ShowProfileRequest } from 'gameball-react-native';

const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',
};

// Using async/await
try {
  await GameballApp.getInstance().showProfile(profileRequest);
} catch (error) {
  console.error('Error showing profile:', error);
}

// With session token override
try {
  await GameballApp.getInstance().showProfile(profileRequest, undefined, 'custom-token');
} catch (error) {
  console.error('Error:', error);
}

// Using callbacks
GameballApp.getInstance().showProfile(profileRequest, {
  onSuccess: () => console.log('Profile shown'),
  onError: (error) => console.error('Error:', error.message)
});

​
Request Parameters

​
customerId
string
required
Unique identifier for the customer whose profile to display.
​
showCloseButton
boolean
Show a close button in the widget. Defaults to false.
​
openDetail
string
Specific widget section to open: ‘profile’, ‘achievements’, ‘rewards’. Opens the main view by default.
​
hideNavigation
boolean
Hide widget navigation elements. Defaults to false.
​
widgetUrlPrefix
string
Custom widget URL prefix for advanced configurations.
​
closeButtonColor
string
Close button color in hex format (e.g., ‘#FF6B6B’). Only applies if showCloseButton is true.
​
sessionToken
string
Optional session token to override the global token for this specific request.
In React Native SDK, passing a sessionToken parameter updates the global session token. Pass undefined to clear the global token, or omit it to use the current global token.

​
Validation Rules

ShowProfileRequest requires:
  • customerId cannot be empty or whitespace

​
Advanced Configuration

​
Open Specific Section

Open a specific section of the profile widget directly: 
const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',
  openDetail: 'rewards',  // Open the rewards section
};

await GameballApp.getInstance().showProfile(profileRequest);

​
Custom Close Button

Add a custom-styled close button: 
const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',
  showCloseButton: true,
  closeButtonColor: '#FF6B6B',
};

await GameballApp.getInstance().showProfile(profileRequest);

​
Hide Navigation

Display the widget without navigation controls: 
const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',
  hideNavigation: true,
};

await GameballApp.getInstance().showProfile(profileRequest);

​
Custom Widget URL

Use a custom widget URL prefix for advanced configurations: 
const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',
  widgetUrlPrefix: 'https://custom.example.com/widget',
};

await GameballApp.getInstance().showProfile(profileRequest);

​
Implementation Examples

​
Show Profile Button

Display the profile widget when user taps a button: 
import React from 'react';
import { View, Button, Alert } from 'react-native';
import { GameballApp, ShowProfileRequest } from 'gameball-react-native';

interface ProfileScreenProps {
  customerId: string;
}

const ProfileScreen: React.FC<ProfileScreenProps> = ({ customerId }) => {
  const handleShowProfile = async () => {
    const profileRequest: ShowProfileRequest = {
      customerId,
      showCloseButton: true,
      closeButtonColor: '#4CAF50',
    };

    try {
      await GameballApp.getInstance().showProfile(profileRequest);
    } catch (error) {
      Alert.alert('Error', 'Failed to show profile');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="View Rewards & Achievements"
        onPress={handleShowProfile}
      />
    </View>
  );
};

export default ProfileScreen;

​
Tab Navigator Integration

Integrate with React Navigation tab navigator: 
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { GameballApp, ShowProfileRequest } from 'gameball-react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

const RewardsTabScreen = () => {
  React.useEffect(() => {
    showGameballProfile();
  }, []);

  const showGameballProfile = async () => {
    const profileRequest: ShowProfileRequest = {
      customerId: 'customer-123',
    };

    try {
      await GameballApp.getInstance().showProfile(profileRequest);
    } catch (error) {
      console.error('Error showing profile:', error);
    }
  };

  return null; // Profile widget will overlay
};

const MainNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="Home" 
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen 
        name="Shop" 
        component={ShopScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="cart" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen 
        name="Rewards" 
        component={RewardsTabScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="gift" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

​
Context-Based Profile

Show different sections based on user context: 
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { GameballApp, ShowProfileRequest } from 'gameball-react-native';

const RewardsActions: React.FC = () => {
  const showSection = async (section: string) => {
    const profileRequest: ShowProfileRequest = {
      customerId: 'customer-123',
      openDetail: section,
      showCloseButton: true,
    };

    try {
      await GameballApp.getInstance().showProfile(profileRequest);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={() => showSection('profile')}>
        <Text>View My Profile</Text>
      </TouchableOpacity>
      
      <TouchableOpacity onPress={() => showSection('rewards')}>
        <Text>Available Rewards</Text>
      </TouchableOpacity>
      
      <TouchableOpacity onPress={() => showSection('achievements')}>
        <Text>My Achievements</Text>
      </TouchableOpacity>
    </View>
  );
};

​
Floating Action Button

Add a rewards button as a floating action button: 
import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { GameballApp, ShowProfileRequest } from 'gameball-react-native';

const HomeScreen: React.FC = () => {
  const handleShowRewards = async () => {
    const profileRequest: ShowProfileRequest = {
      customerId: 'customer-123',
      openDetail: 'rewards',
    };

    try {
      await GameballApp.getInstance().showProfile(profileRequest);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <View style={styles.container}>
      {/* Your main content */}
      
      <TouchableOpacity 
        style={styles.fab}
        onPress={handleShowRewards}
      >
        <Icon name="gift" size={24} color="white" />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  fab: {
    position: 'absolute',
    right: 20,
    bottom: 20,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
});

export default HomeScreen;

​
Widget Content

The profile widget displays:

Customer Info

Display name, points balance, tier level, and customer status

Reward Campaigns

Available rewards, challenges, and how to earn them

Leaderboard

Customer ranking, top performers, and competitive standings

Transaction History

Points earned and redeemed history with detailed breakdown
The widget content, design, and branding can be fully customized from your Gameball dashboard.

​
Error Handling

const showProfileWithErrorHandling = async (customerId: string) => {
  const profileRequest: ShowProfileRequest = {
    customerId,
    showCloseButton: true,
  };

  try {
    await GameballApp.getInstance().showProfile(profileRequest);
  } catch (error) {
    if (error.message.includes('HTTP 401')) {
      // Handle authentication error
      console.error('Authentication failed');
    } else if (error.message.includes('HTTP 500')) {
      // Handle server error
      console.error('Server error occurred');
    } else {
      // Handle general error
      console.error('Failed to show profile:', error.message);
    }
  }
};

​
Best Practices

1

Prominent Access

Place the profile widget button in an easily accessible location (e.g., main navigation, profile screen, bottom tab bar).
2

Badge Indicators

Show badge notifications when customers earn new rewards or achievements to increase engagement.
3

Deep Linking

Use the openDetail parameter to deep link to specific sections based on user context (e.g., open rewards after purchase).
4

Consistent Styling

Match the close button color with your app’s theme using closeButtonColor for a cohesive user experience.
5

Error Handling

Always implement proper error handling to provide feedback when the widget fails to load.
6

Loading States

Consider showing a loading indicator while the widget is being displayed.
Consider showing the profile widget after a customer earns points to increase engagement and encourage repeat purchases. Users are more likely to interact with the widget when they’ve just been rewarded.
Ensure you’ve initialized the customer with initializeCustomer() before calling showProfile() to guarantee the widget displays accurate customer data. Also, make sure react-native-webview is properly installed as the widget depends on it.

​
Next Steps