my fork of the bluesky client

migrate to `expo-linear-gradient` (#3420)

* replace packages

* rm useless alias from webpack config

* fix accidental double commit

* replace all usages

authored by hailey.at and committed by

GitHub 9bcb0a7a 4e59914d

+127 -121
+1 -2
package.json
··· 117 117 "expo-image": "~1.10.6", 118 118 "expo-image-manipulator": "^11.8.0", 119 119 "expo-image-picker": "~14.7.1", 120 + "expo-linear-gradient": "^12.7.2", 120 121 "expo-linking": "^6.2.2", 121 122 "expo-localization": "~14.8.3", 122 123 "expo-media-library": "~15.9.1", ··· 162 163 "react-native-get-random-values": "~1.11.0", 163 164 "react-native-image-crop-picker": "^0.38.1", 164 165 "react-native-ios-context-menu": "^1.15.3", 165 - "react-native-linear-gradient": "^2.6.2", 166 166 "react-native-pager-view": "6.2.3", 167 167 "react-native-picker-select": "^8.1.0", 168 168 "react-native-progress": "bluesky-social/react-native-progress", ··· 175 175 "react-native-url-polyfill": "^1.3.0", 176 176 "react-native-uuid": "^2.0.1", 177 177 "react-native-web": "~0.19.6", 178 - "react-native-web-linear-gradient": "^1.1.2", 179 178 "react-native-web-webview": "^1.0.2", 180 179 "react-native-webview": "13.6.4", 181 180 "react-responsive": "^9.0.2",
+1 -1
src/components/Button.tsx
··· 11 11 View, 12 12 ViewStyle, 13 13 } from 'react-native' 14 - import LinearGradient from 'react-native-linear-gradient' 14 + import LinearGradient from 'expo-linear-gradient' 15 15 import {Trans} from '@lingui/macro' 16 16 17 17 import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
+1 -1
src/components/GradientFill.tsx
··· 1 1 import React from 'react' 2 - import LinearGradient from 'react-native-linear-gradient' 2 + import LinearGradient from 'expo-linear-gradient' 3 3 4 4 import {atoms as a, tokens} from '#/alf' 5 5
+7 -8
src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx
··· 1 1 import React from 'react' 2 2 import {View} from 'react-native' 3 - import LinearGradient from 'react-native-linear-gradient' 4 3 import {Image} from 'expo-image' 5 - import {useLingui} from '@lingui/react' 4 + import LinearGradient from 'expo-linear-gradient' 6 5 import {msg} from '@lingui/macro' 6 + import {useLingui} from '@lingui/react' 7 7 8 - import {useTheme, atoms as a} from '#/alf' 8 + import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' 9 + import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds' 10 + import {atoms as a, useTheme} from '#/alf' 9 11 import * as Toggle from '#/components/forms/Toggle' 10 - import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' 11 - import {Text} from '#/components/Typography' 12 + import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' 12 13 import {RichText} from '#/components/RichText' 13 - 14 - import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' 15 - import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds' 14 + import {Text} from '#/components/Typography' 16 15 17 16 function PrimaryFeedCardInner({ 18 17 feed,
+1 -1
src/view/com/composer/Composer.tsx
··· 11 11 TouchableOpacity, 12 12 View, 13 13 } from 'react-native' 14 - import LinearGradient from 'react-native-linear-gradient' 15 14 import {useSafeAreaInsets} from 'react-native-safe-area-context' 15 + import LinearGradient from 'expo-linear-gradient' 16 16 import {RichText} from '@atproto/api' 17 17 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 18 18 import {msg, Trans} from '@lingui/macro'
+14 -13
src/view/com/modals/AltImage.tsx
··· 1 - import React, {useMemo, useCallback, useState} from 'react' 1 + import React, {useCallback, useMemo, useState} from 'react' 2 2 import { 3 3 ImageStyle, 4 + ScrollView as RNScrollView, 4 5 StyleSheet, 6 + TextInput as RNTextInput, 5 7 TouchableOpacity, 6 - View, 7 - TextInput as RNTextInput, 8 8 useWindowDimensions, 9 - ScrollView as RNScrollView, 9 + View, 10 10 } from 'react-native' 11 - import {ScrollView, TextInput} from './util' 12 11 import {Image} from 'expo-image' 12 + import LinearGradient from 'expo-linear-gradient' 13 + import {msg, Trans} from '@lingui/macro' 14 + import {useLingui} from '@lingui/react' 15 + 16 + import {useModalControls} from '#/state/modals' 17 + import {MAX_ALT_TEXT} from 'lib/constants' 18 + import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' 13 19 import {usePalette} from 'lib/hooks/usePalette' 14 - import {gradients, s} from 'lib/styles' 15 20 import {enforceLen} from 'lib/strings/helpers' 16 - import {MAX_ALT_TEXT} from 'lib/constants' 21 + import {gradients, s} from 'lib/styles' 17 22 import {useTheme} from 'lib/ThemeContext' 18 - import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' 19 - import {Text} from '../util/text/Text' 20 - import LinearGradient from 'react-native-linear-gradient' 21 23 import {isWeb} from 'platform/detection' 22 24 import {ImageModel} from 'state/models/media/image' 23 - import {useLingui} from '@lingui/react' 24 - import {Trans, msg} from '@lingui/macro' 25 - import {useModalControls} from '#/state/modals' 25 + import {Text} from '../util/text/Text' 26 + import {ScrollView, TextInput} from './util' 26 27 27 28 export const snapPoints = ['100%'] 28 29
+19 -18
src/view/com/modals/CreateOrEditList.tsx
··· 1 - import React, {useState, useCallback, useMemo} from 'react' 1 + import React, {useCallback, useMemo, useState} from 'react' 2 2 import { 3 3 ActivityIndicator, 4 4 KeyboardAvoidingView, ··· 8 8 TouchableOpacity, 9 9 View, 10 10 } from 'react-native' 11 + import {Image as RNImage} from 'react-native-image-crop-picker' 12 + import LinearGradient from 'expo-linear-gradient' 11 13 import { 12 14 AppBskyGraphDefs, 13 15 AppBskyRichtextFacet, 14 16 RichText as RichTextAPI, 15 17 } from '@atproto/api' 16 - import LinearGradient from 'react-native-linear-gradient' 17 - import {Image as RNImage} from 'react-native-image-crop-picker' 18 - import {Text} from '../util/text/Text' 19 - import {ErrorMessage} from '../util/error/ErrorMessage' 20 - import * as Toast from '../util/Toast' 21 - import {s, colors, gradients} from 'lib/styles' 22 - import {enforceLen} from 'lib/strings/helpers' 23 - import {compressIfNeeded} from 'lib/media/manip' 24 - import {EditableUserAvatar} from '../util/UserAvatar' 25 - import {usePalette} from 'lib/hooks/usePalette' 26 - import {useTheme} from 'lib/ThemeContext' 27 - import {useAnalytics} from 'lib/analytics/analytics' 28 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 29 - import {cleanError, isNetworkError} from 'lib/strings/errors' 30 - import {Trans, msg} from '@lingui/macro' 18 + import {msg, Trans} from '@lingui/macro' 31 19 import {useLingui} from '@lingui/react' 20 + 21 + import {richTextToString} from '#/lib/strings/rich-text-helpers' 22 + import {shortenLinks} from '#/lib/strings/rich-text-manip' 32 23 import {useModalControls} from '#/state/modals' 33 24 import { 34 25 useListCreateMutation, 35 26 useListMetadataMutation, 36 27 } from '#/state/queries/list' 37 - import {richTextToString} from '#/lib/strings/rich-text-helpers' 38 - import {shortenLinks} from '#/lib/strings/rich-text-manip' 39 28 import {getAgent} from '#/state/session' 29 + import {useAnalytics} from 'lib/analytics/analytics' 30 + import {usePalette} from 'lib/hooks/usePalette' 31 + import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 32 + import {compressIfNeeded} from 'lib/media/manip' 33 + import {cleanError, isNetworkError} from 'lib/strings/errors' 34 + import {enforceLen} from 'lib/strings/helpers' 35 + import {colors, gradients, s} from 'lib/styles' 36 + import {useTheme} from 'lib/ThemeContext' 37 + import {ErrorMessage} from '../util/error/ErrorMessage' 38 + import {Text} from '../util/text/Text' 39 + import * as Toast from '../util/Toast' 40 + import {EditableUserAvatar} from '../util/UserAvatar' 40 41 41 42 const MAX_NAME = 64 // todo 42 43 const MAX_DESCRIPTION = 300 // todo
+1 -1
src/view/com/modals/DeleteAccount.tsx
··· 6 6 TouchableOpacity, 7 7 View, 8 8 } from 'react-native' 9 - import LinearGradient from 'react-native-linear-gradient' 9 + import LinearGradient from 'expo-linear-gradient' 10 10 import {msg, Trans} from '@lingui/macro' 11 11 import {useLingui} from '@lingui/react' 12 12
+17 -16
src/view/com/modals/EditImage.tsx
··· 1 1 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' 2 2 import {Pressable, StyleSheet, View} from 'react-native' 3 + import {useWindowDimensions} from 'react-native' 4 + import LinearGradient from 'expo-linear-gradient' 5 + import {MaterialIcons} from '@expo/vector-icons' 6 + import {msg, Trans} from '@lingui/macro' 7 + import {useLingui} from '@lingui/react' 8 + import {Slider} from '@miblanchard/react-native-slider' 9 + import {observer} from 'mobx-react-lite' 10 + import ImageEditor, {Position} from 'react-avatar-editor' 11 + 12 + import {useModalControls} from '#/state/modals' 13 + import {MAX_ALT_TEXT} from 'lib/constants' 3 14 import {usePalette} from 'lib/hooks/usePalette' 4 - import {useWindowDimensions} from 'react-native' 15 + import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 16 + import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' 17 + import {enforceLen} from 'lib/strings/helpers' 5 18 import {gradients, s} from 'lib/styles' 6 19 import {useTheme} from 'lib/ThemeContext' 20 + import {getKeys} from 'lib/type-assertions' 21 + import {GalleryModel} from 'state/models/media/gallery' 22 + import {ImageModel} from 'state/models/media/image' 7 23 import {Text} from '../util/text/Text' 8 - import LinearGradient from 'react-native-linear-gradient' 9 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 10 - import ImageEditor, {Position} from 'react-avatar-editor' 11 24 import {TextInput} from './util' 12 - import {enforceLen} from 'lib/strings/helpers' 13 - import {MAX_ALT_TEXT} from 'lib/constants' 14 - import {GalleryModel} from 'state/models/media/gallery' 15 - import {ImageModel} from 'state/models/media/image' 16 - import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons' 17 - import {Slider} from '@miblanchard/react-native-slider' 18 - import {MaterialIcons} from '@expo/vector-icons' 19 - import {observer} from 'mobx-react-lite' 20 - import {getKeys} from 'lib/type-assertions' 21 - import {Trans, msg} from '@lingui/macro' 22 - import {useLingui} from '@lingui/react' 23 - import {useModalControls} from '#/state/modals' 24 25 25 26 export const snapPoints = ['80%'] 26 27
+20 -19
src/view/com/modals/EditProfile.tsx
··· 1 - import React, {useState, useCallback} from 'react' 2 - import * as Toast from '../util/Toast' 1 + import React, {useCallback, useState} from 'react' 3 2 import { 4 3 ActivityIndicator, 5 4 KeyboardAvoidingView, ··· 9 8 TouchableOpacity, 10 9 View, 11 10 } from 'react-native' 12 - import LinearGradient from 'react-native-linear-gradient' 13 11 import {Image as RNImage} from 'react-native-image-crop-picker' 12 + import Animated, {FadeOut} from 'react-native-reanimated' 13 + import LinearGradient from 'expo-linear-gradient' 14 14 import {AppBskyActorDefs} from '@atproto/api' 15 - import {Text} from '../util/text/Text' 16 - import {ErrorMessage} from '../util/error/ErrorMessage' 17 - import {s, colors, gradients} from 'lib/styles' 15 + import {msg, Trans} from '@lingui/macro' 16 + import {useLingui} from '@lingui/react' 17 + 18 + import {logger} from '#/logger' 19 + import {useModalControls} from '#/state/modals' 20 + import {useProfileUpdateMutation} from '#/state/queries/profile' 21 + import {useAnalytics} from 'lib/analytics/analytics' 22 + import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from 'lib/constants' 23 + import {usePalette} from 'lib/hooks/usePalette' 24 + import {compressIfNeeded} from 'lib/media/manip' 25 + import {cleanError} from 'lib/strings/errors' 18 26 import {enforceLen} from 'lib/strings/helpers' 19 - import {MAX_DISPLAY_NAME, MAX_DESCRIPTION} from 'lib/constants' 20 - import {compressIfNeeded} from 'lib/media/manip' 21 - import {UserBanner} from '../util/UserBanner' 22 - import {EditableUserAvatar} from '../util/UserAvatar' 23 - import {usePalette} from 'lib/hooks/usePalette' 27 + import {colors, gradients, s} from 'lib/styles' 24 28 import {useTheme} from 'lib/ThemeContext' 25 - import {useAnalytics} from 'lib/analytics/analytics' 26 - import {cleanError} from 'lib/strings/errors' 27 - import Animated, {FadeOut} from 'react-native-reanimated' 28 29 import {isWeb} from 'platform/detection' 29 - import {Trans, msg} from '@lingui/macro' 30 - import {useLingui} from '@lingui/react' 31 - import {useModalControls} from '#/state/modals' 32 - import {useProfileUpdateMutation} from '#/state/queries/profile' 33 - import {logger} from '#/logger' 30 + import {ErrorMessage} from '../util/error/ErrorMessage' 31 + import {Text} from '../util/text/Text' 32 + import * as Toast from '../util/Toast' 33 + import {EditableUserAvatar} from '../util/UserAvatar' 34 + import {UserBanner} from '../util/UserBanner' 34 35 35 36 const AnimatedTouchableOpacity = 36 37 Animated.createAnimatedComponent(TouchableOpacity)
+9 -8
src/view/com/modals/EmbedConsent.tsx
··· 1 1 import React from 'react' 2 2 import {StyleSheet, TouchableOpacity, View} from 'react-native' 3 - import LinearGradient from 'react-native-linear-gradient' 4 - import {s, colors, gradients} from 'lib/styles' 5 - import {Text} from '../util/text/Text' 6 - import {ScrollView} from './util' 7 - import {usePalette} from 'lib/hooks/usePalette' 3 + import LinearGradient from 'expo-linear-gradient' 4 + import {msg, Trans} from '@lingui/macro' 5 + import {useLingui} from '@lingui/react' 6 + 7 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 8 8 import { 9 9 EmbedPlayerSource, 10 10 embedPlayerSources, 11 11 externalEmbedLabels, 12 12 } from '#/lib/strings/embed-player' 13 - import {msg, Trans} from '@lingui/macro' 14 - import {useLingui} from '@lingui/react' 15 13 import {useModalControls} from '#/state/modals' 16 14 import {useSetExternalEmbedPref} from '#/state/preferences/external-embeds-prefs' 17 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 15 + import {usePalette} from 'lib/hooks/usePalette' 16 + import {colors, gradients, s} from 'lib/styles' 17 + import {Text} from '../util/text/Text' 18 + import {ScrollView} from './util' 18 19 19 20 export const snapPoints = [450] 20 21
+7 -6
src/view/com/modals/Repost.tsx
··· 1 1 import React from 'react' 2 2 import {StyleSheet, TouchableOpacity, View} from 'react-native' 3 - import LinearGradient from 'react-native-linear-gradient' 4 - import {s, colors, gradients} from 'lib/styles' 5 - import {Text} from '../util/text/Text' 6 - import {usePalette} from 'lib/hooks/usePalette' 7 - import {RepostIcon} from 'lib/icons' 3 + import LinearGradient from 'expo-linear-gradient' 8 4 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 9 - import {Trans, msg} from '@lingui/macro' 5 + import {msg, Trans} from '@lingui/macro' 10 6 import {useLingui} from '@lingui/react' 7 + 11 8 import {useModalControls} from '#/state/modals' 9 + import {usePalette} from 'lib/hooks/usePalette' 10 + import {RepostIcon} from 'lib/icons' 11 + import {colors, gradients, s} from 'lib/styles' 12 + import {Text} from '../util/text/Text' 12 13 13 14 export const snapPoints = [250] 14 15
+11 -10
src/view/com/modals/crop-image/CropImage.web.tsx
··· 1 1 import React from 'react' 2 2 import {StyleSheet, TouchableOpacity, View} from 'react-native' 3 + import {Image as RNImage} from 'react-native-image-crop-picker' 4 + import LinearGradient from 'expo-linear-gradient' 5 + import {msg, Trans} from '@lingui/macro' 6 + import {useLingui} from '@lingui/react' 7 + import {Slider} from '@miblanchard/react-native-slider' 3 8 import ImageEditor from 'react-avatar-editor' 4 - import {Slider} from '@miblanchard/react-native-slider' 5 - import LinearGradient from 'react-native-linear-gradient' 6 - import {Text} from 'view/com/util/text/Text' 9 + 10 + import {useModalControls} from '#/state/modals' 11 + import {usePalette} from 'lib/hooks/usePalette' 12 + import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' 7 13 import {Dimensions} from 'lib/media/types' 8 14 import {getDataUriSize} from 'lib/media/util' 9 - import {s, gradients} from 'lib/styles' 10 - import {usePalette} from 'lib/hooks/usePalette' 11 - import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons' 12 - import {Image as RNImage} from 'react-native-image-crop-picker' 13 - import {Trans, msg} from '@lingui/macro' 14 - import {useLingui} from '@lingui/react' 15 - import {useModalControls} from '#/state/modals' 15 + import {gradients, s} from 'lib/styles' 16 + import {Text} from 'view/com/util/text/Text' 16 17 17 18 enum AspectRatio { 18 19 Square = 'square',
+6 -5
src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx
··· 1 1 import React from 'react' 2 - import {StyleSheet, Text, View, Pressable} from 'react-native' 3 - import LinearGradient from 'react-native-linear-gradient' 4 - import {s, colors, gradients} from 'lib/styles' 2 + import {Pressable, StyleSheet, Text, View} from 'react-native' 3 + import LinearGradient from 'expo-linear-gradient' 4 + import {msg, Trans} from '@lingui/macro' 5 + import {useLingui} from '@lingui/react' 6 + 5 7 import {usePalette} from 'lib/hooks/usePalette' 6 8 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 7 - import {Trans, msg} from '@lingui/macro' 8 - import {useLingui} from '@lingui/react' 9 + import {colors, gradients, s} from 'lib/styles' 9 10 10 11 export const ConfirmLanguagesButton = ({ 11 12 onPress,
+7 -6
src/view/com/util/fab/FABInner.tsx
··· 1 1 import React, {ComponentProps} from 'react' 2 2 import {StyleSheet, TouchableWithoutFeedback} from 'react-native' 3 - import LinearGradient from 'react-native-linear-gradient' 4 - import {gradients} from 'lib/styles' 3 + import Animated from 'react-native-reanimated' 4 + import {useSafeAreaInsets} from 'react-native-safe-area-context' 5 + import LinearGradient from 'expo-linear-gradient' 6 + 7 + import {isWeb} from '#/platform/detection' 8 + import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' 5 9 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 6 - import {useSafeAreaInsets} from 'react-native-safe-area-context' 7 10 import {clamp} from 'lib/numbers' 8 - import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' 9 - import {isWeb} from '#/platform/detection' 10 - import Animated from 'react-native-reanimated' 11 + import {gradients} from 'lib/styles' 11 12 12 13 export interface FABProps 13 14 extends ComponentProps<typeof TouchableWithoutFeedback> {
-1
webpack.config.js
··· 20 20 let config = await createExpoWebpackConfigAsync(env, argv) 21 21 config = withAlias(config, { 22 22 'react-native$': 'react-native-web', 23 - 'react-native-linear-gradient': 'react-native-web-linear-gradient', 24 23 'react-native-webview': 'react-native-web-webview', 25 24 }) 26 25 config.module.rules = [
+5 -5
yarn.lock
··· 11918 11918 resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.8.2.tgz#6cfdf8ad02b5fa130f99d4a1eb98e459d5b4332e" 11919 11919 integrity sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g== 11920 11920 11921 + expo-linear-gradient@^12.7.2: 11922 + version "12.7.2" 11923 + resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.7.2.tgz#2ff9593eae8448ac5630be1a36ce6133c4a6f074" 11924 + integrity sha512-Wwb2EF18ywgrlTodcXJ6Yt/UEcKitRMdXPNyP/IokmeKh4emoq9DxZJpZdkXm3HUTLlbRpi6/t32jrFVqXB9AQ== 11925 + 11921 11926 expo-linking@^6.2.2: 11922 11927 version "6.2.2" 11923 11928 resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-6.2.2.tgz#b7e148068ae49fd9ad814428c16fdf7a236e8aca" ··· 18619 18624 integrity sha512-UNkVl7ocvSpNaEpvBvE1aHOfDy/DFdZ5I+ElfnTXFsRxrVZmxLtST0b1q2wSWGWDmd2Ig2AYd7GRbYtcY222Ag== 18620 18625 dependencies: 18621 18626 "@dominicstop/ts-event-emitter" "^1.1.0" 18622 - 18623 - react-native-linear-gradient@^2.6.2: 18624 - version "2.8.2" 18625 - resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.2.tgz#9811c91751be673ef928ef4aa3ff3a70b82935d6" 18626 - integrity sha512-hgmCsgzd58WNcDCyPtKrvxsaoETjb/jLGxis/dmU3Aqm2u4ICIduj4ECjbil7B7pm9OnuTkmpwXu08XV2mpg8g== 18627 18627 18628 18628 react-native-pager-view@6.2.3: 18629 18629 version "6.2.3"