Skip to content

Jon/scenewrapper updates #5886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Jon-edge wants to merge 1 commit into from
+175 −171
Closed

Jon/scenewrapper updates #5886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2293,6 +2293,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
]
}
nativeID="10"
onLayout={[Function]}
style={
[
{
Expand Down
11 changes: 3 additions & 8 deletions src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,15 +357,10 @@ exports[`FioConnectWalletConfirm should render with loading props 1`] = `
<View
style={
{
"flex": undefined,
"marginBottom": undefined,
"marginLeft": undefined,
"marginRight": undefined,
"marginTop": undefined,
"flex": 1,
"marginTop": 0,
"paddingBottom": 11,
"paddingLeft": 11,
"paddingRight": 11,
"paddingTop": 11,
"paddingHorizontal": 11,
}
}
>
Expand Down
139 changes: 67 additions & 72 deletions src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,97 +273,92 @@ exports[`SwapConfirmationScene should render with loading props 1`] = `
<View
style={
{
"flex": undefined,
"marginBottom": undefined,
"marginLeft": undefined,
"marginRight": undefined,
"marginTop": undefined,
"paddingBottom": 11,
"justifyContent": "center",
"overflow": "visible",
"paddingLeft": 11,
"paddingRight": 11,
"paddingTop": 11,
}
}
>
<View
style={
{
"justifyContent": "center",
"overflow": "visible",
"paddingBottom": 11,
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
"marginBottom": 11,
"marginHorizontal": 11,
}
}
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
"marginBottom": 11,
"marginHorizontal": 11,
}
}
>
<Text
adjustsFontSizeToFit={true}
allowFontScaling={false}
minimumFontScale={0.65}
numberOfLines={1}
style={
[
{
"color": "#FFFFFF",
"fontFamily": "Quicksand-Regular",
"fontSize": 22,
"includeFontPadding": false,
},
{
"fontFamily": "Quicksand-Medium",
"fontSize": 27,
},
null,
]
}
>
Exchange
</Text>
</View>
<BVLinearGradient
colors={
[
452984831,
452984831,
]
}
endPoint={
{
"x": 1,
"y": 0.5,
}
}
locations={null}
startPoint={
{
"x": 0,
"y": 0.5,
}
}
<Text
adjustsFontSizeToFit={true}
allowFontScaling={false}
minimumFontScale={0.65}
numberOfLines={1}
style={
[
{
"borderBottomColor": "rgba(255, 255, 255, .1)",
"borderBottomWidth": 1,
"height": 1,
"color": "#FFFFFF",
"fontFamily": "Quicksand-Regular",
"fontSize": 22,
"includeFontPadding": false,
},
{
"margin": 11,
"marginRight": -22,
"fontFamily": "Quicksand-Medium",
"fontSize": 27,
},
null,
]
}
/>
>
Exchange
</Text>
</View>
<BVLinearGradient
colors={
[
452984831,
452984831,
]
}
endPoint={
{
"x": 1,
"y": 0.5,
}
}
locations={null}
startPoint={
{
"x": 0,
"y": 0.5,
}
}
style={
[
{
"borderBottomColor": "rgba(255, 255, 255, .1)",
"borderBottomWidth": 1,
"height": 1,
},
{
"margin": 11,
"marginRight": -22,
},
]
}
/>
</View>
<View
style={
{
"flex": 1,
"marginTop": 0,
"paddingBottom": 11,
"paddingHorizontal": 11,
}
}
>
<View
collapsable={false}
entering={
Expand Down
10 changes: 2 additions & 8 deletions src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,18 +272,12 @@ exports[`SwapCreateScene should render with loading props 1`] = `
>
<View>
<View
expand={true}
style={
{
"flex": 1,
"marginBottom": undefined,
"marginLeft": undefined,
"marginRight": undefined,
"marginTop": undefined,
"marginTop": 0,
"paddingBottom": 11,
"paddingLeft": 11,
"paddingRight": 11,
"paddingTop": 11,
"paddingHorizontal": 11,
}
}
>
Expand Down
22 changes: 6 additions & 16 deletions src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,15 +228,10 @@ exports[`TransactionDetailsScene should render 1`] = `
<View
style={
{
"flex": undefined,
"marginBottom": undefined,
"marginLeft": undefined,
"marginRight": undefined,
"marginTop": undefined,
"flex": 1,
"marginTop": 0,
"paddingBottom": 11,
"paddingLeft": 11,
"paddingRight": 11,
"paddingTop": 11,
"paddingHorizontal": 11,
}
}
>
Expand Down Expand Up @@ -3121,15 +3116,10 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi
<View
style={
{
"flex": undefined,
"marginBottom": undefined,
"marginLeft": undefined,
"marginRight": undefined,
"marginTop": undefined,
"flex": 1,
"marginTop": 0,
"paddingBottom": 11,
"paddingLeft": 11,
"paddingRight": 11,
"paddingTop": 11,
"paddingHorizontal": 11,
}
}
>
Expand Down
23 changes: 20 additions & 3 deletions src/components/common/SceneWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,9 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
const navigation = useNavigation<NavigationBase>()
const isIos = Platform.OS === 'ios'

// Track dock height for content padding when dockProps is used
const [dockHeight, setDockHeight] = useState(0)

// We need to track this state in the JS thread because insets are not shared values
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false)
useKeyboardHandler({
Expand Down Expand Up @@ -240,6 +243,12 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
// Ignore inset bottom when keyboard is open because it is rendered behind it
const maybeInsetBottom =
!isKeyboardOpen || !avoidKeyboard ? safeAreaInsets.bottom : 0
// Include dock height in bottom inset when dock is visible (not keyboard-only or keyboard is open)
const keyboardVisibleOnlyDock = dockProps?.keyboardVisibleOnly ?? true
const maybeDockHeight =
dockProps != null && (!keyboardVisibleOnlyDock || isKeyboardOpen)
? dockHeight
: 0
const insets: EdgeInsets = useMemo(
() => ({
top: hasHeader ? headerBarHeight : safeAreaInsets.top,
Expand All @@ -248,13 +257,15 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
maybeInsetBottom +
maybeNotificationHeight +
maybeTabBarHeight +
footerHeight,
footerHeight +
maybeDockHeight,
left: safeAreaInsets.left
}),
[
footerHeight,
hasHeader,
headerBarHeight,
maybeDockHeight,
maybeInsetBottom,
maybeNotificationHeight,
maybeTabBarHeight,
Expand Down Expand Up @@ -328,7 +339,12 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
}, [children, sceneWrapperInfo])

// Build Dock View element
const keyboardVisibleOnlyDoc = dockProps?.keyboardVisibleOnly ?? true
const handleDockLayout = React.useCallback(
(event: { nativeEvent: { layout: { height: number } } }) => {
setDockHeight(event.nativeEvent.layout.height)
},
[]
)
const dockBaseStyle = useMemo(
() => ({
position: 'absolute' as const,
Expand Down Expand Up @@ -366,9 +382,10 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
return { bottom }
})
const shouldShowDock =
dockProps != null && (!keyboardVisibleOnlyDoc || isKeyboardVisibleDock)
dockProps != null && (!keyboardVisibleOnlyDock || isKeyboardVisibleDock)
const dockElement = !shouldShowDock ? null : (
<Reanimated.View
onLayout={handleDockLayout}
style={[
dockBaseStyle,
dockAnimatedStyle,
Expand Down
Loading