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

* replace packages

* rm useless alias from webpack config

* fix accidental double commit

* replace all usages

11 files changed, 112 insertions, 103 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index ac6fe6fed..17e123a0a 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/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'
diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx
index 17ce05cda..ccf129f03 100644
--- a/src/view/com/modals/AltImage.tsx
+++ b/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,
+  ScrollView as RNScrollView,
   StyleSheet,
-  TouchableOpacity,
-  View,
   TextInput as RNTextInput,
+  TouchableOpacity,
   useWindowDimensions,
-  ScrollView as RNScrollView,
+  View,
 } from 'react-native'
-import {ScrollView, TextInput} from './util'
 import {Image} from 'expo-image'
+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 {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {usePalette} from 'lib/hooks/usePalette'
-import {gradients, s} from 'lib/styles'
 import {enforceLen} from 'lib/strings/helpers'
-import {MAX_ALT_TEXT} from 'lib/constants'
+import {gradients, s} from 'lib/styles'
 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 {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%']
 
diff --git a/src/view/com/modals/CreateOrEditList.tsx b/src/view/com/modals/CreateOrEditList.tsx
index 0e11fcffd..d2d779f63 100644
--- a/src/view/com/modals/CreateOrEditList.tsx
+++ b/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
diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
index a355a3f42..f88ce1d4a 100644
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/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'
 
diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx
index 3b35ffee2..cccce8fe4 100644
--- a/src/view/com/modals/EditImage.tsx
+++ b/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 {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 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 {TextInput} from './util'
-import {enforceLen} from 'lib/strings/helpers'
+
+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 {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%']
 
diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 097b7b0d1..c34b6aafc 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/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)
diff --git a/src/view/com/modals/EmbedConsent.tsx b/src/view/com/modals/EmbedConsent.tsx
index 04104c52e..4f831754a 100644
--- a/src/view/com/modals/EmbedConsent.tsx
+++ b/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]
 
diff --git a/src/view/com/modals/Repost.tsx b/src/view/com/modals/Repost.tsx
index 6e4881adc..ac926ab00 100644
--- a/src/view/com/modals/Repost.tsx
+++ b/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 {usePalette} from 'lib/hooks/usePalette'
-import {RepostIcon} from 'lib/icons'
+import LinearGradient from 'expo-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Trans, msg} from '@lingui/macro'
+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 {colors, gradients, s} from 'lib/styles'
+import {Text} from '../util/text/Text'
 
 export const snapPoints = [250]
 
diff --git a/src/view/com/modals/crop-image/CropImage.web.tsx b/src/view/com/modals/crop-image/CropImage.web.tsx
index 98a2494ed..f3970b5be 100644
--- a/src/view/com/modals/crop-image/CropImage.web.tsx
+++ b/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 {Slider} from '@miblanchard/react-native-slider'
-import LinearGradient from 'react-native-linear-gradient'
-import {Text} from 'view/com/util/text/Text'
-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 LinearGradient from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {Slider} from '@miblanchard/react-native-slider'
+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 {gradients, s} from 'lib/styles'
+import {Text} from 'view/com/util/text/Text'
 
 enum AspectRatio {
   Square = 'square',
diff --git a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx
index 91e11a19c..b2bcdb96a 100644
--- a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx
+++ b/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,
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx
index 27a16117b..0c155fa62 100644
--- a/src/view/com/util/fab/FABInner.tsx
+++ b/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 Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {clamp} from 'lib/numbers'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import LinearGradient from 'expo-linear-gradient'
+
 import {isWeb} from '#/platform/detection'
-import Animated from 'react-native-reanimated'
+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> {