How Do I Show the Profile Widget in the React Native SDK (v3)?

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

Basic Usage

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

const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',       // Optional (omit for guest mode)
  showCloseButton: true,            // Optional
  openDetail: 'rewards',            // Optional
  hideNavigation: false,            // Optional
  closeButtonColor: '#FF6B6B',      // Optional
};

// 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, 'customer-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

string

Unique identifier for the customer whose profile to display (optional for guest mode).

boolean

Show a close button in the widget. Defaults to false.

string

Specific widget section to open: ‘profile’, ‘achievements’, ‘rewards’. Opens the main view by default.

Hide widget navigation elements. Defaults to false.

string

Close button color in hex format (e.g., ‘#FF6B6B’). Only applies if showCloseButton is true.

string

Optional session token to override the global token for this specific request. Required in upcoming SDK v4.

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 notes:

customerId is optional; omit it to show the widget in guest mode

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 works best when combined with openDetail to lead users to a specific section.

Display the widget without navigation controls:

const profileRequest: ShowProfileRequest = {
  customerId: 'customer-123',
  hideNavigation: true,
  openDetail: 'rewards',
};

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

Guest Mode

Show the widget without authenticating a customer:

const guestRequest: ShowProfileRequest = {
  showCloseButton: true,
  closeButtonColor: '#4CAF50',
};

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

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 'react-native-gameball';

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 'react-native-gameball';
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 'react-native-gameball';

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 'react-native-gameball';

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;

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

Prominent Access

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

Badge Indicators

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

Deep Linking

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

Consistent Styling

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

Error Handling

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

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.

Overview

Web & POS Integration

Mobile Integration

How Do I Show the Profile Widget in the React Native SDK (v3)?

Show Profile Widget

Basic Usage

Request Parameters

Validation Rules

Advanced Configuration

Open Specific Section

Custom Close Button

Hide Navigation

Guest Mode

Implementation Examples

Show Profile Button

Tab Navigator Integration

Context-Based Profile

Floating Action Button

Widget Content

Customer Info

Reward Campaigns

Leaderboard

Transaction History

Error Handling

Best Practices

Next Steps

​Show Profile Widget

​Basic Usage

​Request Parameters

​Validation Rules

​Advanced Configuration

​Open Specific Section

​Custom Close Button

​Hide Navigation

​Guest Mode

​Implementation Examples

​Show Profile Button

​Tab Navigator Integration

​Context-Based Profile

​Floating Action Button

​Widget Content

Customer Info

Reward Campaigns

Leaderboard

Transaction History

​Error Handling

​Best Practices

​Next Steps

Show Profile Widget

Basic Usage

Request Parameters

Validation Rules

Advanced Configuration

Open Specific Section

Custom Close Button

Hide Navigation

Guest Mode

Implementation Examples

Show Profile Button

Tab Navigator Integration

Context-Based Profile

Floating Action Button

Widget Content

Error Handling

Best Practices

Next Steps