Rallyware SDK React Native components

Installation

npm install @rallyware/sdk-react-native-components

Example of configure color theme for all components

import { themeService } from '@rallyware/sdk-react-native-components';

themeService.setParams({
  fontFamilyRegular: 'Inter_400Regular',
  fontFamilyBold: 'Inter_600SemiBold',
  surfaceColor: '#ffffff',
  surfaceSuccess: '#bef8c6',
  textColor: '#14181f',
  textMutedColor: '#637794',
  textSubtleColor: '#3b4759',
  textWarningColor: '#7f5e05',
  textErrorColor: '#9f450a',
  borderColor: '#0000001a',
  secondaryColor: '#4071d5',
  secondary050Color: '#eef3fb',
  secondary100Color: '#d9e3f7',
  neutral050Color: '#f1f2f4',
  neutral100Color: '#dfe4ea',
  success500Color: '#0f881f',
  skeletonColor: 'rgba(0, 0, 0, 0.06)',
});

const App = () => 'Your App code';
export default App;

Example of configure fontSize and lineHeight for all components

import { themeService } from '@rallyware/sdk-react-native-components';

themeService.setParams({
  h1Size: 30,
  h1LineHeight: 40,
  h1SubtleSize: 30,
  h1SubtleLineHeight: 40,
  h2Size: 20,
  h2LineHeight: 28,
  h2SubtleSize: 20,
  h2SubtleLineHeight: 28,
  h3Size: 16,
  h3LineHeight: 20,
  h3SubtleSize: 16,
  h3SubtleLineHeight: 20,
  h4Size: 14,
  h4LineHeight: 20,
  h5Size: 12,
  h5LineHeight: 16,
  h6Size: 10,
  h6LineHeight: 16,
  body1BoldSize: 16,
  body1BoldHeight: 24,
  body1Size: 16,
  body1Height: 24,
  body2BoldSize: 14,
  body2BoldHeight: 20,
  body2Size: 14,
  body2Height: 20,
  captionBoldSize: 12,
  captionBoldHeight: 16,
  captionSize: 12,
  captionHeight: 16,
  miniSize: 10,
  miniHeight: 12,
  userHeaderLine1Size: 16,
  userHeaderLine1Height: 20,
  userHeaderLine2Size: 16,
  userHeaderLine2Height: 20,
});

const App = () => 'Your App code';
export default App;

Configuration of the RallywareAPIService with DefaultAuthStrategy

import { useRallywareAPIService, DefaultAuthStrategy } from '@rallyware/sdk-react-native-components';

const App = () => {
  const login = '[email protected]';
  const password = 'sdk-test';
  const rallywareAPIService = useRallywareAPIService(
      'https://feature-frontend.rallyware.com',
      new DefaultAuthStrategy(login, password),
      'en', // language code. optional. 'en' by default
  );

  return '(...)';
};
export default App;

Configuration of the RallywareAPIService with NuskinOktaAuthStrategy

import { useRallywareAPIService, NuskinOktaAuthStrategy } from '@rallyware/sdk-react-native-components';

async function getOktaToken(): Promise<string> {
  '...'
  const oktaToken = await request('...');
  '...'
  return oktaToken;
}

const App = () => {
  const rallywareAPIService = useRallywareAPIService(
      'https://testlearningcenter.nuskin.com',
      new NuskinOktaAuthStrategy(getOktaToken),
      'en', // language code. optional. 'en' by default
  );

  return '(...)';
};
export default App;

Checking and accepting rules

Please check how to get Rallyware API service instance first here.

isRulesAgreed(): boolean - returns true is current user has agreed the rules, false otherwise. agreeRules(): Promise<void> - async function which sends an API request for the current user to agree the rules.

import { View, Button, ActivityIndicator } from 'react-native';
import { useRallywareAPIService, DefaultAuthStrategy, themeService } from '@rallyware/sdk-react-native-components';
import { login, password, host } from './config.js';

const App = () => {
  const rallywareAPIService = useRallywareAPIService(host, new DefaultAuthStrategy(login, password));
  const [isAgreed, setIsAgreed] = useState(false);

  useEffect(() => {
    if (rallywareAPIService) {
      setIsAgreed(rallywareAPIService.isRulesAgreed());
    }
  }, [rallywareAPIService]);

  const agreeRules = () => {
    if(!rallywareAPIService) return;
    rallywareAPIService.agreeRules().then(() => setIsAgreed(true));
  };

  if (!rallywareAPIService) {
    return (
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
          <ActivityIndicator size="large" color={themeService.params.secondaryColor}/>
        </View>
    );
  }

  if (!isAgreed) {
    return (
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
          <Button title="Agree with rules" onPress={agreeRules} />
        </View>
    );
  }

  return /* your application */;
};

Example of demo usage of the ProgressTrackerWidget (Task Program Progress Widget)

Required props:

import { ProgressTrackerWidget } from '@rallyware/sdk-react-native-components';

<ProgressTrackerWidget
    apiService={rallywareAPIService}
/>

Optional parameters:

<ProgressTrackerWidget
    apiService={rallywareAPIService}
    title="Custom widget title"
    description="Widget description"
    boxBorderRadius={0}
    itemIconBoxBorderRadius={0}
    progressbarBorderRadius={0}
/>

Example of demo usage of the UserInfoWidget (User Header Component)

Required props:

import { UserInfoWidget, userInfoWidgetTestData } from '@rallyware/sdk-react-native-components';

<UserInfoWidget
    apiService={rallywareAPIService}
/>

Optional parameters:

<UserInfoWidget
    apiService={rallywareAPIService}
    showHeader={false}
    showTooltip={false}
    boxBackgroundColor="#f0f0f0"
    avatarBorderRadius={10}
    kpiInfoItemBorderRadius={10}
    tooltipBorderRadius={10}
/>

Example of demo usage of the TermsAndConditions

Required props:

import { TermsAndConditions } from '@rallyware/sdk-react-native-components';

<TermsAndConditions
    apiService={rallywareAPIService}
/>

Optional parameters:

<TermsAndConditions
    apiService={rallywareAPIService}
    height={200}
    headerText="Learning Center Terms & Conditions"
/>

Example of demo usage of the BadgesWidget

Required props:

import { BadgesWidget, badgesWidgetTestData } from '@rallyware/sdk-react-native-components';

<BadgesWidget
    apiService={rallywareAPIService}
/>

Optional parameters:

<BadgesWidget
    apiService={rallywareAPIService}
    itemIconBoxBorderRadius={0} // Provide border radius for badge avatar
    modalBorderRadius={0} // Provide border radius for modal box
    seeAllButtonText="See all text" // Provide text for "See all" button
    badgesCount={3} // Provide how many badge items we should show
    onBadgesPdfPress={link => { // Provide onPress handler on the PDF block
      console.log('onBadgesPdfPress', link);
    }}
    onShowMoreUsersPress={() => { // Provide onPress handler for participants list
      console.log('Show more users');
    }}
    onSeeAllButtonPress={() => { // Provide onPress handler for press on the "See all" button
      console.log('Go to all badge page');
    }}
/>

Example of demo usage of the BadgesList

BadgesList loads and shows all available (locked and unlocked) badges. Component uses "infinite scroll" behavior for pagination.

Note: component is scrollable hence should be used in non-scrollable view.

import { BadgesList } from '@rallyware/sdk-react-native-components';

<BadgesList apiService={rallywareAPIService} />

Required props

apiService - Rallyware API service instance. See docs

Optional props

imageBorderRadius number - image border radius size. Default: 32 isBackButtonVisible boolean - whether to show back button in the header. Default: true backButtonText string - text to be used for back button in the header. Default: 'Back' height string | number - desired height of BadgesList component. Default: '100%' onBackPress function - callback to be called when back button is pressed onItemPress function - callback to be called when list item is pressed. Will get an event and a pressed Badge object in params

Example of demo usage of the BadgeAchieversList

BadgeAchieversList loads and shows a list of users who received a specific badge. Component uses "infinite scroll" behavior for pagination.

Note: component is scrollable hence should be used in non-scrollable view.

import { BadgeAchieversList } from '@rallyware/sdk-react-native-components';

<BadgeAchieversList apiService={rallywareAPIService} badgeId={1} />

Required props

apiService - Rallyware API service instance. See docs badgeId number - id of the badge list of achievers should be shown for

Optional props

imageBorderRadius number - image border radius size. Default: 20 isBackButtonVisible boolean - whether to show back button in the header. Default: true backButtonText string - text to be used for back button in the header. Default: 'Back' height string | number - desired height of BadgeAchieversList component. Default: '100%' onBackPress function - callback to be called when back button is pressed onItemPress function - callback to be called when list item is pressed. Will get an event and a pressed User object in params

Example of demo usage of the ProgramList

Required props:

import { ProgramList } from '@rallyware/sdk-react-native-components';

<ProgramList
    apiService={rallywareAPIService}
/>

Optional parameters:

<ProgramList
    apiService={rallywareAPIService}
    horizontal={true}
    boxBorderRadius={0}
    itemIconBoxBorderRadius={0}
    progressbarBorderRadius={0}
    onItemPress={(item, event) => console.log('ProgramList item is clicked', item)}
/>

Example of demo usage of the TaskCardCarousel

Required props:

import { TaskCardCarousel } from '@rallyware/sdk-react-native-components';

<TaskCardCarousel
    apiService={rallywareAPIService}
    onActionButtonPress={task => {
      console.log('onActionButtonPress::', task);
    }}
/>

Optional parameters:

<TaskCardCarousel
  showLockedTasks={true}
  showOnlyFeatured={true}
  taskProgramId={1}
  cardBoxBorderRadius={0}
  tagBorderRadius={0}
  cardsGap={16}
  status={[UserTaskStatusesEnum.IN_PROGRESS, UserTaskStatusesEnum.COMPLETED]}
  apiService={rallywareAPIService}
  onActionButtonPress={task => {
    console.log('onActionButtonPress::', task);
  }}
  programsCount={2}
/>

Example of demo usage of the TaskProgram

TaskProgram Displays task program information (image, title, description) and related tasks

import { TaskProgram } from '@rallyware/sdk-react-native-components';

<TaskProgram apiService={rallywareAPIService} programId={4} />

Required props

apiService - Rallyware API service instance. See docs programId number - id of the task program

Optional props

imageBorderRadius number - makes program image borders round or rectangle in pixels. Default: 10 cardBoxBorderRadius number - sets task card borders to be rounded or rectangular in pixels. Default: 8 tagBorderRadius number - sets tag radius in pixels. Default: 16 cardsVerticalGap number - sets vertical margin between task cards in pixels. Default: 16 yourTasksTitle string - sets the text displayed for the tasks subtitle. Default: 'Your tasks' showDivider boolean - show or hide divider between task program info block and tasks list. Default: true showLockedTasks boolean - If true all available, in-progress and locked tasks are displayed, if false locked tasks are not displayed. Default: true onActionButtonPress function - callback to be called when task item's action button is pressed. Will get an event and a pressed Task object in params

Example of demo usage of the TaskComponent (Task Program Progress Widget)

Required props:

import { TaskComponent } from '@rallyware/sdk-react-native-components';

<TaskComponent
    apiService={rallywareAPIService}
    userTaskId={1}
    onComplete={result => console.log('The task is completed')}
/>

Optional parameters:

<TaskComponent
    taskStatusBar // show/hide bottom task statusbar
    apiService={rallywareAPIService}
    userTaskId={1}
    onComplete={result => console.log('The task is completed')}
    onError={error => console.log(error)}
/>