Improve Device Detection For Better Responsiveness (#1512)
* Refactor `useOnMainScroll` function to use responsive device detection - Replace static `isDesktopWeb` with `useWebMediaQueries` hook to enable dynamic device type detection. - Create `useDeviceLimits` hook to dynamically determine `DY_LIMIT_UP` and `DY_LIMIT_DOWN` based on device type. - Update dependency arrays for the `useCallback` hooks to include new dynamic variables. * Refactor styles to be responsive to device type - Create `useStyles` hook that generates styles object based on device type detected from `useWebMediaQueries`. - Replace static styles object with dynamic styles object generated from `useStyles` hook in components. - This allows `paddingLeft` values for 'ul' and 'ol' styles to adapt to device type dynamically. - This allows `maxWidth` values for 'metaItem'' styles to adapt to device type dynamically. * Remove `isDesktopWeb` in favor of `useWebMediaQueries().isDesktop` * Refactor `SplashScreen` component for responsive design * Revision based on review results * Fix isNative check --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
parent
2e5f73ff61
commit
2aae37d67b
9 changed files with 289 additions and 244 deletions
|
@ -24,10 +24,11 @@ import {NavigationProp} from 'lib/routes/types'
|
|||
import {router} from '../../../routes'
|
||||
import {useStores, RootStoreModel} from 'state/index'
|
||||
import {convertBskyAppUrlIfNeeded, isExternalUrl} from 'lib/strings/url-helpers'
|
||||
import {isAndroid, isDesktopWeb} from 'platform/detection'
|
||||
import {isAndroid} from 'platform/detection'
|
||||
import {sanitizeUrl} from '@braintree/sanitize-url'
|
||||
import {PressableWithHover} from './PressableWithHover'
|
||||
import FixedTouchableHighlight from '../pager/FixedTouchableHighlight'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
|
||||
type Event =
|
||||
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
|
||||
|
@ -224,7 +225,9 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
|
|||
lineHeight,
|
||||
...props
|
||||
}: DesktopWebTextLinkProps) {
|
||||
if (isDesktopWeb) {
|
||||
const {isDesktop} = useWebMediaQueries()
|
||||
|
||||
if (isDesktop) {
|
||||
return (
|
||||
<TextLink
|
||||
testID={testID}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue