React Native examples

Root.ts

import React, {useEffect, useState} from 'react';
import {StatusBar} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Heap from '@heap/react-native-heap';
import {useAsyncStorage} from '@react-native-async-storage/async-storage';
import {Provider as PaperProvider} from 'react-native-paper';
import {OrientationLocker, PORTRAIT} from 'react-native-orientation-locker/src/OrientationLocker';
import {useReactiveVar} from '@apollo/client';
import {LightNavigationTheme, DarkNavigationTheme, LightPaperTheme, DarkPaperTheme} from '@styles/theme';
import {ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, USER_TOKEN_KEY} from '@services/auth';
import {getEnvConfig} from '@state/env';
import {authTokenVar} from '@state/login';
import {Login} from './Login';
import {HomeDrawer} from './Home';
import {TotalPerformanceProductChartModal} from './Modal/TotalPerformanceProductChartModal';
import {TotalPerformanceAssetModal} from './Modal/TotalPerformanceAssetModal';

const RootStack = createStackNavigator();
const {heapAppId} = getEnvConfig();
// To get heap working on Android
Heap.setAppId(heapAppId);

type NavigationStateChange = React.ComponentProps<typeof NavigationContainer>['onStateChange'];
type ThemeMode = 'light' | 'dark';
const NAVIGATION_THEME: Record<string, ThemeMode> = {
  Login: 'dark',
};

export function Root() {
  const reactiveAuthToken = useReactiveVar(authTokenVar);
  const HeapNavigationContainer = Heap.withReactNavigationAutotrack(NavigationContainer);

  const {getItem: getAccessTokenFromAsyncStorage} = useAsyncStorage(ACCESS_TOKEN_KEY);
  const {getItem: getRefreshTokenFromAsyncStorage} = useAsyncStorage(REFRESH_TOKEN_KEY);
  const {getItem: getUserTokenFromAsyncStorage} = useAsyncStorage(USER_TOKEN_KEY);

  const [mode, setMode] = useState<ThemeMode>('light');
  const [initialloading, setInitialLoading] = useState(true);

  const onStateChange: NavigationStateChange = state => {
    const route = state?.routes[state?.routes.length - 1] || {name: ''};
    const themeMode = (NAVIGATION_THEME[route.name] || 'light') as ThemeMode;
    if (themeMode !== mode) {
      setMode(themeMode);
    }
  };

  useEffect(() => {
    const getToken = async () => {
      const accessAsyncStorageToken = await getAccessTokenFromAsyncStorage();
      const refreshAsyncStorageToken = await getRefreshTokenFromAsyncStorage();
      const userAsyncStorageToken = await getUserTokenFromAsyncStorage();

      if (accessAsyncStorageToken && refreshAsyncStorageToken && userAsyncStorageToken && !reactiveAuthToken) {
        authTokenVar({
          accessToken: accessAsyncStorageToken,
          refreshToken: refreshAsyncStorageToken,
          userToken: userAsyncStorageToken,
        });
      }
      setInitialLoading(false);
    };

    getToken();
  }, [
    reactiveAuthToken,
    getAccessTokenFromAsyncStorage,
    getRefreshTokenFromAsyncStorage,
    getUserTokenFromAsyncStorage,
  ]);

  if (initialloading) {
    return null;
  }

  return (
    <>
      <OrientationLocker orientation={PORTRAIT} />
      {reactiveAuthToken ? (
        <PaperProvider theme={LightPaperTheme}>
          <HeapNavigationContainer onStateChange={onStateChange} theme={LightNavigationTheme}>
            <RootStack.Navigator headerMode="none" mode="modal">
              <RootStack.Screen name="HomeDrawer" component={HomeDrawer} />
              <RootStack.Screen
                name="TotalPerformanceProductChartModal"
                component={TotalPerformanceProductChartModal}
              />
              <RootStack.Screen name="TotalPerformanceAssetModal" component={TotalPerformanceAssetModal} />
            </RootStack.Navigator>
          </HeapNavigationContainer>
        </PaperProvider>
      ) : (
        <PaperProvider theme={DarkPaperTheme}>
          <StatusBar barStyle="light-content" />
          <HeapNavigationContainer theme={DarkNavigationTheme}>
            <RootStack.Navigator headerMode="none" mode="modal">
              <RootStack.Screen name="Login" component={Login} />
            </RootStack.Navigator>
          </HeapNavigationContainer>
        </PaperProvider>
      )}
    </>
  );
}

WineIndex.ts

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
import {ContentContainer} from '@homeComponents/ContentContainer';
import {WineIndexnNavProps} from '@screens/navigationTypes';
import {textStyles} from '@styles/typography';
import {PALETTE} from '@styles/colors';
import {formatPrice} from '@utils/format';
import {generatePerformanceColor} from '@utils/utilities';
import {ProductChart} from '@components/ProductChart';

export function WineIndex({route}: WineIndexnNavProps) {
  const {indexName, lastMonthValue, annualPercentageChange, historicalData} = route.params;
  const ltmTextColor = generatePerformanceColor(+annualPercentageChange);

  return (
    <ContentContainer showShadow={false} title='Wine Index'>
      <Text style={textStyles.h2}>{indexName}</Text>
      <Text style={textStyles.bodyLarge}>Current Value</Text>
      <View style={styles.value}>
        <Text style={textStyles.h3}>{formatPrice(+lastMonthValue, {basic: true})}</Text>
        <Text
          testID="annualPercentageChange"
          style={[textStyles.bodyLarge, {color: ltmTextColor}]}
        >
          {`(${annualPercentageChange}% ltm`}
        </Text>
      </View>
      <ProductChart
        animation={{}}
        performanceColor={generatePerformanceColor(+annualPercentageChange)}
        data={historicalData}
        name={indexName}
        buttonStyle={{
          style: {color: PALETTE.brightBlue},
          icon: 'fullscreen',
        }}
      />
    </ContentContainer>
  );
}

const styles = StyleSheet.create({
  value: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
});