zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Move border positioning to FlatList and ScrollView (#509)

Browse source 
* Move border positioning to FlatList and ScrollView

* Fix mobile web tab bar border
This commit is contained in:
Ollie Hsieh 2023-04-21 14:40:41 -07:00 • committed by GitHub
parent f0706dbe9f
commit aa56f4a5e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/view/com/util/Views.web.tsx
View file

@ -23,6 +23,7 @@ import {
ViewProps,
} from 'react-native'
import {addStyle, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
export function CenteredView({
style,
@ -41,6 +42,7 @@ export const FlatList = React.forwardRef(function <ItemT>(
}: React.PropsWithChildren<FlatListProps<ItemT>>,
ref: React.Ref<RNFlatList>,
) {
const pal = usePalette('default')
contentContainerStyle = addStyle(
contentContainerStyle,
styles.containerScroll,
@ -61,7 +63,11 @@ export const FlatList = React.forwardRef(function <ItemT>(
return (
<RNFlatList
ref={ref}
contentContainerStyle={contentContainerStyle}
contentContainerStyle={[
contentContainerStyle,
pal.border,
styles.contentContainer,
]}
style={style}
contentOffset={contentOffset}
{...props}
@ -73,13 +79,19 @@ export const ScrollView = React.forwardRef(function (
{contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
ref: React.Ref<RNScrollView>,
) {
const pal = usePalette('default')
contentContainerStyle = addStyle(
contentContainerStyle,
styles.containerScroll,
)
return (
<RNScrollView
contentContainerStyle={contentContainerStyle}
contentContainerStyle={[
contentContainerStyle,
pal.border,
styles.contentContainer,
]}
ref={ref}
{...props}
/>
@ -87,6 +99,11 @@ export const ScrollView = React.forwardRef(function (
})
const styles = StyleSheet.create({
contentContainer: {
borderLeftWidth: 1,
borderRightWidth: 1,
minHeight: '100vh',
},
container: {
width: '100%',
maxWidth: 600,
@ -95,7 +112,6 @@ const styles = StyleSheet.create({
},
containerScroll: {
width: '100%',
maxHeight: '100vh',
maxWidth: 600,
marginLeft: 'auto',
marginRight: 'auto',