56cf890deb
* WIP - adding expo * WIP - adding expo 2 * Fix tsc * Finish adding expo * Disable the 'require cycle' warning * Tweak plist * Modify some dependency versions to make expo happy * Fix icon fill * Get Web compiling for expo * 1.7 * Switch to react-navigation in expo2 (#287) * WIP Switch to react-navigation * WIP Switch to react-navigation 2 * WIP Switch to react-navigation 3 * Convert all screens to react navigation * Update BottomBar for react navigation * Update mobile menu to be react-native drawer * Fixes to drawer and bottombar * Factor out some helpers * Replace the navigation model with react-navigation * Restructure the shell folder and fix the header positioning * Restore the error boundary * Fix tsc * Implement not-found page * Remove react-native-gesture-handler (no longer used) * Handle notifee card presses * Handle all navigations from the state layer * Fix drawer behaviors * Fix two linking issues * Switch to our react-native-progress fork to fix an svg rendering issue * Get Web working with react-navigation * Refactor routes and navigation for a bit more clarity * Remove dead code * Rework Web shell to left/right nav to make this easier * Fix ViewHeader for desktop web * Hide profileheader back btn on desktop web * Move the compose button to the left nav * Implement reply prompt in threads for desktop web * Composer refactors * Factor out all platform-specific text input behaviors from the composer * Small fix * Update the web build to use tiptap for the composer * Tune up the mention autocomplete dropdown * Simplify the default avatar and banner * Fixes to link cards in web composer * Fix dropdowns on web * Tweak load latest on desktop * Add web beta message and feedback link * Fix up links in desktop web
92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
/**
|
|
* In the Web build, we center all content so that it mirrors the
|
|
* mobile experience (a single narrow column). We then place a UI
|
|
* shell around the content if you're in desktop.
|
|
*
|
|
* Because scrolling is handled by components deep in the hierarchy,
|
|
* we can't just wrap the top-level element with a max width. The
|
|
* centering has to be done at the ScrollView.
|
|
*
|
|
* These components wrap the RN ScrollView-based components to provide
|
|
* consistent layout. It also provides <CenteredView> for views that
|
|
* need to match layout but which aren't scrolled.
|
|
*/
|
|
|
|
import React from 'react'
|
|
import {
|
|
FlatList as RNFlatList,
|
|
FlatListProps,
|
|
ScrollView as RNScrollView,
|
|
ScrollViewProps,
|
|
StyleSheet,
|
|
View,
|
|
ViewProps,
|
|
} from 'react-native'
|
|
import {addStyle, colors} from 'lib/styles'
|
|
|
|
export function CenteredView({
|
|
style,
|
|
...props
|
|
}: React.PropsWithChildren<ViewProps>) {
|
|
style = addStyle(style, styles.container)
|
|
return <View style={style} {...props} />
|
|
}
|
|
|
|
export const FlatList = React.forwardRef(function <ItemT>(
|
|
{
|
|
contentContainerStyle,
|
|
...props
|
|
}: React.PropsWithChildren<FlatListProps<ItemT>>,
|
|
ref: React.Ref<RNFlatList>,
|
|
) {
|
|
contentContainerStyle = addStyle(
|
|
contentContainerStyle,
|
|
styles.containerScroll,
|
|
)
|
|
return (
|
|
<RNFlatList
|
|
contentContainerStyle={contentContainerStyle}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
|
|
export const ScrollView = React.forwardRef(function (
|
|
{contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
|
|
ref: React.Ref<RNScrollView>,
|
|
) {
|
|
contentContainerStyle = addStyle(
|
|
contentContainerStyle,
|
|
styles.containerScroll,
|
|
)
|
|
return (
|
|
<RNScrollView
|
|
contentContainerStyle={contentContainerStyle}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: '100%',
|
|
maxWidth: 600,
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
},
|
|
containerScroll: {
|
|
width: '100%',
|
|
minHeight: '100vh',
|
|
maxWidth: 600,
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
},
|
|
containerLight: {
|
|
backgroundColor: colors.gray1,
|
|
},
|
|
containerDark: {
|
|
backgroundColor: colors.gray7,
|
|
},
|
|
})
|