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 {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 {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 {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds'
+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,
+  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%']
 

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 {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%']
 

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 {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]
 

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',

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,