Skip to content

Instantly share code, notes, and snippets.

@Rolando-Barbella
Last active March 20, 2023 15:45
Show Gist options
  • Save Rolando-Barbella/d9418b29dbfdf7a075c8e44a3f442239 to your computer and use it in GitHub Desktop.
Save Rolando-Barbella/d9418b29dbfdf7a075c8e44a3f442239 to your computer and use it in GitHub Desktop.
React Native examples
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>
)}
</>
);
}
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',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment