Page MenuHomePhabricator
Differential D13070

[native] Update reaniamted flow types
ClosedPublic
Actions

Authored by inka on Aug 13 2024, 9:13 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Apr 21, 3:00 AM
Unknown Object (File)
Sun, Apr 6, 8:58 AM
Unknown Object (File)
Fri, Apr 4, 11:41 AM
Unknown Object (File)
Fri, Apr 4, 5:17 AM
Unknown Object (File)
Thu, Apr 3, 11:30 PM
Unknown Object (File)
Thu, Apr 3, 11:54 AM
Unknown Object (File)
Wed, Mar 26, 10:33 AM
Unknown Object (File)
Mar 7 2025, 1:14 AM
View All 71 Files
Subscribers
ashoat

Details

Reviewers
tomek
will
ashoat
Commits
rCOMM06168b83ec32: [native] Update reaniamted flow types
Summary

issue: ENG-9039
I need this in the following diff, because without splitting those types in AnimatedView I get a flow error
Updated other places because I figured it's better if they are consistent

Test Plan

Run yarn flow:all and checked that there are no errors

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

PathSize
native/
flow-typed/
npm/
27 lines
types/
10 lines

Diff 43365

View Options

native/flow-typed/npm/react-native-reanimated_v2.x.x.js

// @flow // @flow
import { useRoute } from '@react-navigation/core';
import * as React from 'react'; import * as React from 'react';
import { Animated, Text, View } from 'react-native';
import { TabBarItem } from 'react-native-tab-view';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import { createChatTabBarButton } from './chat-tab-bar-button.react.js';
import { backgroundChatThreadListOptions } from '../chat/chat-options.js'; import { backgroundChatThreadListOptions } from '../chat/chat-options.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
import { LightTheme, DarkTheme } from '../themes/navigation.js';
import { import {
type NUXTipsOverlayProps, type NUXTipsOverlayProps,
createNUXTipsOverlay, createNUXTipsOverlay,
} from '../tooltip/nux-tips-overlay.react.js'; } from '../tooltip/nux-tips-overlay.react.js';
const mutedTabTipTextBase = const mutedTabTipTextBase =
'When you mute a chat, it automatically gets moved to this tab.'; 'When you mute a chat, it automatically gets moved to this tab.';
const mutedTabTipTextIfFID = const mutedTabTipTextIfFID =
' When Comm automatically adds you to a community associated with a ' + ' When Comm automatically adds you to a community associated with a ' +
'Farcaster channel you follow, we mute them by default.'; 'Farcaster channel you follow, we mute them by default.';
const dummyCallback = () => {};
const dummyNavigationState = { index: 0, routes: [] };
const unboundStyles = {
button: {
flexDirection: 'row',
backgroundColor: 'tabBarBackground',
},
label: {
textAlign: 'center',
textTransform: 'uppercase',
fontSize: 13,
margin: 4,
backgroundColor: 'transparent',
},
icon: {
height: 24,
width: 24,
},
};
function WrappedChatTabBarButton(): React.Node {
const { title, tabBarIcon: Icon } = backgroundChatThreadListOptions;
const position = React.useRef(() => new Animated.Value(0));
const route = useRoute();
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const color = React.useMemo(
() =>
activeTheme === 'dark' ? DarkTheme.colors.text : LightTheme.colors.text,
[activeTheme],
);
const styles = useStyles(unboundStyles);
const renderLabel = React.useCallback(
({ color: labelColor }: { color: string, ... }) => {
return <Text style={[styles.label, { color: labelColor }]}>{title}</Text>;
},
[styles.label, title],
);
const renderIcon = React.useCallback(
({ color: iconColor }: { color: string, ... }) => {
return (
<View style={styles.icon}>
<Icon color={iconColor} />
</View>
);
},
[styles.icon],
);
const renderLabelText = React.useCallback(() => title, [title]);
return (
<TabBarItem
position={position.current}
route={route}
navigationState={dummyNavigationState}
onPress={dummyCallback}
onLongPress={dummyCallback}
style={styles.button}
getLabelText={renderLabelText}
getAccessible={dummyCallback}
getAccessibilityLabel={dummyCallback}
renderIcon={renderIcon}
getTestID={dummyCallback}
activeColor={color}
renderLabel={renderLabel}
/>
);
}
function MutedTabTip(props: NUXTipsOverlayProps<'MutedTabTip'>): React.Node { function MutedTabTip(props: NUXTipsOverlayProps<'MutedTabTip'>): React.Node {
const fid = useCurrentUserFID(); const fid = useCurrentUserFID();
const text = React.useMemo(() => { const text = React.useMemo(() => {
if (!fid) { if (!fid) {
return mutedTabTipTextBase; return mutedTabTipTextBase;
} }
return mutedTabTipTextBase + mutedTabTipTextIfFID; return mutedTabTipTextBase + mutedTabTipTextIfFID;
}, [fid]); }, [fid]);
const MutedTabTipComponent: React.ComponentType< const MutedTabTipComponent: React.ComponentType<
NUXTipsOverlayProps<'MutedTabTip'>, NUXTipsOverlayProps<'MutedTabTip'>,
> = createNUXTipsOverlay(WrappedChatTabBarButton, text); > = createNUXTipsOverlay(
createChatTabBarButton<'MutedTabTip'>(backgroundChatThreadListOptions),
text,
);
return <MutedTabTipComponent {...props} />; return <MutedTabTipComponent {...props} />;
} }
export default MutedTabTip; export default MutedTabTip;
View Options

native/types/styles.js

// @flow // @flow
import { useRoute } from '@react-navigation/core';
import * as React from 'react'; import * as React from 'react';
import { Animated, Text, View } from 'react-native';
import { TabBarItem } from 'react-native-tab-view';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import { createChatTabBarButton } from './chat-tab-bar-button.react.js';
import { backgroundChatThreadListOptions } from '../chat/chat-options.js'; import { backgroundChatThreadListOptions } from '../chat/chat-options.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
import { LightTheme, DarkTheme } from '../themes/navigation.js';
import { import {
type NUXTipsOverlayProps, type NUXTipsOverlayProps,
createNUXTipsOverlay, createNUXTipsOverlay,
} from '../tooltip/nux-tips-overlay.react.js'; } from '../tooltip/nux-tips-overlay.react.js';
const mutedTabTipTextBase = const mutedTabTipTextBase =
'When you mute a chat, it automatically gets moved to this tab.'; 'When you mute a chat, it automatically gets moved to this tab.';
const mutedTabTipTextIfFID = const mutedTabTipTextIfFID =
' When Comm automatically adds you to a community associated with a ' + ' When Comm automatically adds you to a community associated with a ' +
'Farcaster channel you follow, we mute them by default.'; 'Farcaster channel you follow, we mute them by default.';
const dummyCallback = () => {};
const dummyNavigationState = { index: 0, routes: [] };
const unboundStyles = {
button: {
flexDirection: 'row',
backgroundColor: 'tabBarBackground',
},
label: {
textAlign: 'center',
textTransform: 'uppercase',
fontSize: 13,
margin: 4,
backgroundColor: 'transparent',
},
icon: {
height: 24,
width: 24,
},
};
function WrappedChatTabBarButton(): React.Node {
const { title, tabBarIcon: Icon } = backgroundChatThreadListOptions;
const position = React.useRef(() => new Animated.Value(0));
const route = useRoute();
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const color = React.useMemo(
() =>
activeTheme === 'dark' ? DarkTheme.colors.text : LightTheme.colors.text,
[activeTheme],
);
const styles = useStyles(unboundStyles);
const renderLabel = React.useCallback(
({ color: labelColor }: { color: string, ... }) => {
return <Text style={[styles.label, { color: labelColor }]}>{title}</Text>;
},
[styles.label, title],
);
const renderIcon = React.useCallback(
({ color: iconColor }: { color: string, ... }) => {
return (
<View style={styles.icon}>
<Icon color={iconColor} />
</View>
);
},
[styles.icon],
);
const renderLabelText = React.useCallback(() => title, [title]);
return (
<TabBarItem
position={position.current}
route={route}
navigationState={dummyNavigationState}
onPress={dummyCallback}
onLongPress={dummyCallback}
style={styles.button}
getLabelText={renderLabelText}
getAccessible={dummyCallback}
getAccessibilityLabel={dummyCallback}
renderIcon={renderIcon}
getTestID={dummyCallback}
activeColor={color}
renderLabel={renderLabel}
/>
);
}
function MutedTabTip(props: NUXTipsOverlayProps<'MutedTabTip'>): React.Node { function MutedTabTip(props: NUXTipsOverlayProps<'MutedTabTip'>): React.Node {
const fid = useCurrentUserFID(); const fid = useCurrentUserFID();
const text = React.useMemo(() => { const text = React.useMemo(() => {
if (!fid) { if (!fid) {
return mutedTabTipTextBase; return mutedTabTipTextBase;
} }
return mutedTabTipTextBase + mutedTabTipTextIfFID; return mutedTabTipTextBase + mutedTabTipTextIfFID;
}, [fid]); }, [fid]);
const MutedTabTipComponent: React.ComponentType< const MutedTabTipComponent: React.ComponentType<
NUXTipsOverlayProps<'MutedTabTip'>, NUXTipsOverlayProps<'MutedTabTip'>,
> = createNUXTipsOverlay(WrappedChatTabBarButton, text); > = createNUXTipsOverlay(
createChatTabBarButton<'MutedTabTip'>(backgroundChatThreadListOptions),
text,
);
return <MutedTabTipComponent {...props} />; return <MutedTabTipComponent {...props} />;
} }
export default MutedTabTip; export default MutedTabTip;