# C+ reactions page, JS devs helping out - Tues 15th September, 2020

I helped A in the morning with her React component tests. We greatly simplified what she was trying to do, first typing her props, creating her test props, then writing her test. We had to also mock the `isReactNative` React patternlab method.

jest.mock('myModule/helpers', () => {
    const module = jest.requireActual('myModule/helpers')
    return {
        ...module,
        isReactNative: jest.fn(() => true),
    }
})

The JS devs and I also had the meeting to discuss the new Jira board around other JS devs contributing more infrastructure changes. The discussion seemed positive and tickets have not been assigned, with the plan to check in next week.

I also worked on building out the "all reactions" page for C+. It's a page with a horizontal top tab bar (showing all the current reactions and their counts) and a list of which users reacted.

The top tab bar was implemented with a [Material Top Tab Navigator](https://reactnavigation.org/docs/material-top-tab-navigator/). It was somewhat of a faff - firstly because we are using an Apollo `MockProvider` to mock queries and mutations. This seemed to be causing some strage re-render issues. It was also difficult to get the tabs to be correctly sized. Eventually managed with the following code:

<ReactionTabs.Navigator
    tabBarOptions={{
        showIcon: true,
        scrollEnabled: true,
        tabStyle: {
            flexDirection: 'row',
            alignItems: 'center',
            // as not all tabs are same widdth
            flexShrink: 0,
            width: 'auto',
        },
    }}
    screenOptions={({ route }) => ({
        tabBarLabel: () => (
            <P mb="0" mr="sm" style={{ includeFontPadding: false, textAlignVertical: 'center' }}>
                {route.name === '0'
                    ? `${data?.srwReactions.reactions.length} reactions`
                    : reactionsCount[Number(route.name)]}
            </P>
        ),
        tabBarIcon: () => {
            if (Number(route.name) > 0)
                return (
                    <Image
                        source={{
                            uri: toolbarData?.srwToolbar.reactions[Number(route.name) - 1].iconURL,
                        }}
                        style={{ height: 20, width: 20 }}
                    />
                )
            return null
        },
    })}
>
    {currentReactionTypes.map((reaction) => (
        <ReactionTabs.Screen name={String(reaction)} key={reaction}>
        // still need to finish this
            {() => <Text>{`id ${reaction}`}</Text>}
        </ReactionTabs.Screen>
    ))}
</ReactionTabs.Navigator>

###### tags: `programmingjournal` `2020` `C+` `reaction` `rgdevs` `testing` `isReactNative` `reactnavigation` `materialtoptabnavigator`