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

* replace packages

* rm useless alias from webpack config

* fix accidental double commit

* replace all usages

package.json

@@ -117,6 +117,7 @@
     "expo-image": "~1.10.6",
     "expo-image-manipulator": "^11.8.0",
     "expo-image-picker": "~14.7.1",
+    "expo-linear-gradient": "^12.7.2",
     "expo-linking": "^6.2.2",
     "expo-localization": "~14.8.3",
     "expo-media-library": "~15.9.1",
@@ -162,7 +163,6 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "^0.38.1",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^8.1.0",
     "react-native-progress": "bluesky-social/react-native-progress",
@@ -175,7 +175,6 @@
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.1",
     "react-native-web": "~0.19.6",
-    "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.6.4",
     "react-responsive": "^9.0.2",

src/components/Button.tsx

@@ -11,7 +11,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import LinearGradient from 'expo-linear-gradient'
 import {Trans} from '@lingui/macro'
 
 import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'

src/components/GradientFill.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LinearGradient from 'react-native-linear-gradient'
+import LinearGradient from 'expo-linear-gradient'
 
 import {atoms as a, tokens} from '#/alf'
 

src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx

@@ -1,18 +1,17 @@
 import React from 'react'
 import {View} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import {Image} from 'expo-image'
-import {useLingui} from '@lingui/react'
+import LinearGradient from 'expo-linear-gradient'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {useTheme, atoms as a} from '#/alf'
-import * as Toggle from '#/components/forms/Toggle'
-import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed'
-import {Text} from '#/components/Typography'
-import {RichText} from '#/components/RichText'
-
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed'
 import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds'
+import {atoms as a, useTheme} from '#/alf'
+import * as Toggle from '#/components/forms/Toggle'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {RichText} from '#/components/RichText'
+import {Text} from '#/components/Typography'
 
 function PrimaryFeedCardInner({
   feed,

src/view/com/composer/Composer.tsx

@@ -11,8 +11,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import LinearGradient from 'expo-linear-gradient'
 import {RichText} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'

src/view/com/modals/AltImage.tsx

@@ -1,28 +1,29 @@
-import React, {useMemo, useCallback, useState} from 'react'
+import React, {useCallback, useMemo, useState} from 'react'
 import {
   ImageStyle,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  TextInput as RNTextInput,
-  useWindowDimensions,
   ScrollView as RNScrollView,
+  StyleSheet,
+  TextInput as RNTextInput,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
 } from 'react-native'
-import {ScrollView, TextInput} from './util'
 import {Image} from 'expo-image'
-import {usePalette} from 'lib/hooks/usePalette'
-import {gradients, s} from 'lib/styles'
-import {enforceLen} from 'lib/strings/helpers'
+import LinearGradient from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useModalControls} from '#/state/modals'
 import {MAX_ALT_TEXT} from 'lib/constants'
-import {useTheme} from 'lib/ThemeContext'
 import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
-import {Text} from '../util/text/Text'
-import LinearGradient from 'react-native-linear-gradient'
+import {usePalette} from 'lib/hooks/usePalette'
+import {enforceLen} from 'lib/strings/helpers'
+import {gradients, s} from 'lib/styles'
+import {useTheme} from 'lib/ThemeContext'
 import {isWeb} from 'platform/detection'
 import {ImageModel} from 'state/models/media/image'
-import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
-import {useModalControls} from '#/state/modals'
+import {Text} from '../util/text/Text'
+import {ScrollView, TextInput} from './util'
 
 export const snapPoints = ['100%']
 

src/view/com/modals/CreateOrEditList.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback, useMemo} from 'react'
+import React, {useCallback, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
   KeyboardAvoidingView,
@@ -8,35 +8,36 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
+import {Image as RNImage} from 'react-native-image-crop-picker'
+import LinearGradient from 'expo-linear-gradient'
 import {
   AppBskyGraphDefs,
   AppBskyRichtextFacet,
   RichText as RichTextAPI,
 } from '@atproto/api'
-import LinearGradient from 'react-native-linear-gradient'
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {Text} from '../util/text/Text'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import * as Toast from '../util/Toast'
-import {s, colors, gradients} from 'lib/styles'
-import {enforceLen} from 'lib/strings/helpers'
-import {compressIfNeeded} from 'lib/media/manip'
-import {EditableUserAvatar} from '../util/UserAvatar'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {cleanError, isNetworkError} from 'lib/strings/errors'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+
+import {richTextToString} from '#/lib/strings/rich-text-helpers'
+import {shortenLinks} from '#/lib/strings/rich-text-manip'
 import {useModalControls} from '#/state/modals'
 import {
   useListCreateMutation,
   useListMetadataMutation,
 } from '#/state/queries/list'
-import {richTextToString} from '#/lib/strings/rich-text-helpers'
-import {shortenLinks} from '#/lib/strings/rich-text-manip'
 import {getAgent} from '#/state/session'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {compressIfNeeded} from 'lib/media/manip'
+import {cleanError, isNetworkError} from 'lib/strings/errors'
+import {enforceLen} from 'lib/strings/helpers'
+import {colors, gradients, s} from 'lib/styles'
+import {useTheme} from 'lib/ThemeContext'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
+import {EditableUserAvatar} from '../util/UserAvatar'
 
 const MAX_NAME = 64 // todo
 const MAX_DESCRIPTION = 300 // todo

src/view/com/modals/DeleteAccount.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import LinearGradient from 'expo-linear-gradient'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/view/com/modals/EditImage.tsx

@@ -1,26 +1,27 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
 import {useWindowDimensions} from 'react-native'
+import LinearGradient from 'expo-linear-gradient'
+import {MaterialIcons} from '@expo/vector-icons'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {Slider} from '@miblanchard/react-native-slider'
+import {observer} from 'mobx-react-lite'
+import ImageEditor, {Position} from 'react-avatar-editor'
+
+import {useModalControls} from '#/state/modals'
+import {MAX_ALT_TEXT} from 'lib/constants'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
+import {enforceLen} from 'lib/strings/helpers'
 import {gradients, s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {Text} from '../util/text/Text'
-import LinearGradient from 'react-native-linear-gradient'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import ImageEditor, {Position} from 'react-avatar-editor'
-import {TextInput} from './util'
-import {enforceLen} from 'lib/strings/helpers'
-import {MAX_ALT_TEXT} from 'lib/constants'
+import {getKeys} from 'lib/type-assertions'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ImageModel} from 'state/models/media/image'
-import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons'
-import {Slider} from '@miblanchard/react-native-slider'
-import {MaterialIcons} from '@expo/vector-icons'
-import {observer} from 'mobx-react-lite'
-import {getKeys} from 'lib/type-assertions'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
+import {Text} from '../util/text/Text'
+import {TextInput} from './util'
 
 export const snapPoints = ['80%']
 

src/view/com/modals/EditProfile.tsx

@@ -1,5 +1,4 @@
-import React, {useState, useCallback} from 'react'
-import * as Toast from '../util/Toast'
+import React, {useCallback, useState} from 'react'
 import {
   ActivityIndicator,
   KeyboardAvoidingView,
@@ -9,28 +8,30 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {AppBskyActorDefs} from '@atproto/api'
-import {Text} from '../util/text/Text'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {s, colors, gradients} from 'lib/styles'
-import {enforceLen} from 'lib/strings/helpers'
-import {MAX_DISPLAY_NAME, MAX_DESCRIPTION} from 'lib/constants'
-import {compressIfNeeded} from 'lib/media/manip'
-import {UserBanner} from '../util/UserBanner'
-import {EditableUserAvatar} from '../util/UserAvatar'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {cleanError} from 'lib/strings/errors'
 import Animated, {FadeOut} from 'react-native-reanimated'
-import {isWeb} from 'platform/detection'
-import {Trans, msg} from '@lingui/macro'
+import LinearGradient from 'expo-linear-gradient'
+import {AppBskyActorDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
 import {useModalControls} from '#/state/modals'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
-import {logger} from '#/logger'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from 'lib/constants'
+import {usePalette} from 'lib/hooks/usePalette'
+import {compressIfNeeded} from 'lib/media/manip'
+import {cleanError} from 'lib/strings/errors'
+import {enforceLen} from 'lib/strings/helpers'
+import {colors, gradients, s} from 'lib/styles'
+import {useTheme} from 'lib/ThemeContext'
+import {isWeb} from 'platform/detection'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
+import {EditableUserAvatar} from '../util/UserAvatar'
+import {UserBanner} from '../util/UserBanner'
 
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)

src/view/com/modals/EmbedConsent.tsx

@@ -1,20 +1,21 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {s, colors, gradients} from 'lib/styles'
-import {Text} from '../util/text/Text'
-import {ScrollView} from './util'
-import {usePalette} from 'lib/hooks/usePalette'
+import LinearGradient from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {
   EmbedPlayerSource,
   embedPlayerSources,
   externalEmbedLabels,
 } from '#/lib/strings/embed-player'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
 import {useSetExternalEmbedPref} from '#/state/preferences/external-embeds-prefs'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {usePalette} from 'lib/hooks/usePalette'
+import {colors, gradients, s} from 'lib/styles'
+import {Text} from '../util/text/Text'
+import {ScrollView} from './util'
 
 export const snapPoints = [450]
 

src/view/com/modals/Repost.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {s, colors, gradients} from 'lib/styles'
-import {Text} from '../util/text/Text'
+import LinearGradient from 'expo-linear-gradient'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useModalControls} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
 import {RepostIcon} from 'lib/icons'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
+import {colors, gradients, s} from 'lib/styles'
+import {Text} from '../util/text/Text'
 
 export const snapPoints = [250]
 

src/view/com/modals/crop-image/CropImage.web.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import ImageEditor from 'react-avatar-editor'
+import {Image as RNImage} from 'react-native-image-crop-picker'
+import LinearGradient from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {Slider} from '@miblanchard/react-native-slider'
-import LinearGradient from 'react-native-linear-gradient'
-import {Text} from 'view/com/util/text/Text'
+import ImageEditor from 'react-avatar-editor'
+
+import {useModalControls} from '#/state/modals'
+import {usePalette} from 'lib/hooks/usePalette'
+import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
 import {Dimensions} from 'lib/media/types'
 import {getDataUriSize} from 'lib/media/util'
-import {s, gradients} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons'
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
+import {gradients, s} from 'lib/styles'
+import {Text} from 'view/com/util/text/Text'
 
 enum AspectRatio {
   Square = 'square',

src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import {StyleSheet, Text, View, Pressable} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {s, colors, gradients} from 'lib/styles'
+import {Pressable, StyleSheet, Text, View} from 'react-native'
+import LinearGradient from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {colors, gradients, s} from 'lib/styles'
 
 export const ConfirmLanguagesButton = ({
   onPress,

src/view/com/util/fab/FABInner.tsx

@@ -1,13 +1,14 @@
 import React, {ComponentProps} from 'react'
 import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {gradients} from 'lib/styles'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {clamp} from 'lib/numbers'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
-import {isWeb} from '#/platform/detection'
 import Animated from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import LinearGradient from 'expo-linear-gradient'
+
+import {isWeb} from '#/platform/detection'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {clamp} from 'lib/numbers'
+import {gradients} from 'lib/styles'
 
 export interface FABProps
   extends ComponentProps<typeof TouchableWithoutFeedback> {

webpack.config.js

@@ -20,7 +20,6 @@ module.exports = async function (env, argv) {
   let config = await createExpoWebpackConfigAsync(env, argv)
   config = withAlias(config, {
     'react-native$': 'react-native-web',
-    'react-native-linear-gradient': 'react-native-web-linear-gradient',
     'react-native-webview': 'react-native-web-webview',
   })
   config.module.rules = [

yarn.lock

@@ -11918,6 +11918,11 @@ expo-keep-awake@~12.8.2:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.8.2.tgz#6cfdf8ad02b5fa130f99d4a1eb98e459d5b4332e"
   integrity sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==
 
+expo-linear-gradient@^12.7.2:
+  version "12.7.2"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.7.2.tgz#2ff9593eae8448ac5630be1a36ce6133c4a6f074"
+  integrity sha512-Wwb2EF18ywgrlTodcXJ6Yt/UEcKitRMdXPNyP/IokmeKh4emoq9DxZJpZdkXm3HUTLlbRpi6/t32jrFVqXB9AQ==
+
 expo-linking@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-6.2.2.tgz#b7e148068ae49fd9ad814428c16fdf7a236e8aca"
@@ -18620,11 +18625,6 @@ react-native-ios-context-menu@^1.15.3:
   dependencies:
     "@dominicstop/ts-event-emitter" "^1.1.0"
 
-react-native-linear-gradient@^2.6.2:
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.2.tgz#9811c91751be673ef928ef4aa3ff3a70b82935d6"
-  integrity sha512-hgmCsgzd58WNcDCyPtKrvxsaoETjb/jLGxis/dmU3Aqm2u4ICIduj4ECjbil7B7pm9OnuTkmpwXu08XV2mpg8g==
-
 react-native-pager-view@6.2.3:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.3.tgz#698f6387fdf06cecc3d8d4792604419cb89cb775"