Rallyware SDK React Native components

Installation

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

Example of configure color theme for all components

`js
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

`js
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

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

const App = () => {
const login = 'sdk-test@rallyware.com';
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

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

async function getOktaToken(): Promise {
'...'
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

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

`jsx
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 (



);
}

if (!isAgreed) {
return (



);
}

return / your application /;
};
`




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

$3


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

apiService={rallywareAPIService}
/>
`

$3


`javascript
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)

$3


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

apiService={rallywareAPIService}
/>
`

$3


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

Example of demo usage of the TermsAndConditions

$3


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

apiService={rallywareAPIService}
/>
`

$3


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

Example of demo usage of the BadgesWidget

$3


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

apiService={rallywareAPIService}
/>
`

$3


`javascript
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.

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


`

$3


apiService - Rallyware API service instance. See docs

$3

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.

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


`

$3


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

$3

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

$3


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

apiService={rallywareAPIService}
/>
`

$3


`javascript
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

$3


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

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

$3


`javascript
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
`jsx
import { TaskProgram } from '@rallyware/sdk-react-native-components';


`


$3


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

$3

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)

$3


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

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

$3


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