Skip to content

Commit

Permalink
Move NotificationView render location to no longer avoid keyboard
Browse files Browse the repository at this point in the history 
The NotificationView should be rendered outside of the keyboard tracking
so it doesn't move when the keyboard is open.
  • Loading branch information
@samholmes
samholmes committed Jan 25, 2024
1 parent 89d7083 commit a73aa08
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 128 deletions.
200 changes: 100 additions & 100 deletions src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1307,6 +1307,16 @@ exports[`SendScene2 1 spendTarget 1`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -1330,16 +1340,6 @@ exports[`SendScene2 1 spendTarget 1`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -2838,6 +2838,16 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -2861,16 +2871,6 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -4346,6 +4346,16 @@ exports[`SendScene2 2 spendTargets 1`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -4369,16 +4379,6 @@ exports[`SendScene2 2 spendTargets 1`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -5555,6 +5555,16 @@ exports[`SendScene2 2 spendTargets hide tiles 1`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -5578,16 +5588,6 @@ exports[`SendScene2 2 spendTargets hide tiles 1`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -6740,6 +6740,16 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -6763,16 +6773,6 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -7764,6 +7764,16 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -7787,16 +7797,6 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -9093,6 +9093,16 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -9116,16 +9126,6 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -10357,6 +10357,16 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -10380,16 +10390,6 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -11580,6 +11580,16 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = `
</View>
</View>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -11603,16 +11613,6 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;

Expand Down Expand Up @@ -12788,6 +12788,16 @@ exports[`SendScene2 Render SendScene 1`] = `
}
/>
</View>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
<View
footerHeight={0}
footerOpenRatio={
Expand All @@ -12811,15 +12821,5 @@ exports[`SendScene2 Render SendScene 1`] = `
]
}
/>,
<View
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
}
}
/>,
]
`;
54 changes: 26 additions & 28 deletions src/components/common/SceneWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,34 +192,32 @@ export function SceneWrapper(props: SceneWrapperProps): JSX.Element {
const info: SceneWrapperInfo = { insets, insetStyle, undoInsetStyle, hasTabs, isKeyboardOpen }

return (
<MaybeAnimatedView when={avoidKeyboard} style={[styles.sceneContainer, layoutStyle, insetStyle, { maxHeight: keyboardAnimation, padding }]}>
<DotsBackground
accentColors={accentColors}
overrideDots={overrideDots}
backgroundGradientColors={backgroundGradientColors}
backgroundGradientStart={backgroundGradientStart}
backgroundGradientEnd={backgroundGradientEnd}
/>
<MaybeAnimatedScrollView
when={scroll && !avoidKeyboard}
style={[layoutStyle, { padding }]}
keyboardShouldPersistTaps={keyboardShouldPersistTaps}
contentContainerStyle={insetStyle}
onScroll={hasTabs || hasHeader ? handleScroll : () => {}}
// Fixes middle-floating scrollbar issue
scrollIndicatorInsets={{ right: 1 }}
>
<MaybeView when={!scroll && !avoidKeyboard} style={[styles.sceneContainer, layoutStyle, insetStyle, { padding }]}>
{isFuncChildren ? children(info) : children}
</MaybeView>
</MaybeAnimatedScrollView>
{renderFooter != null || hasNotifications ? (
<>
{hasNotifications ? <NotificationView hasTabs={hasTabs} navigation={navigation} /> : null}
{renderFooter != null && !hasTabs ? <SceneFooter>{renderFooter(info)}</SceneFooter> : null}
</>
) : null}
</MaybeAnimatedView>
<>
<MaybeAnimatedView when={avoidKeyboard} style={[styles.sceneContainer, layoutStyle, insetStyle, { maxHeight: keyboardAnimation, padding }]}>
<DotsBackground
accentColors={accentColors}
overrideDots={overrideDots}
backgroundGradientColors={backgroundGradientColors}
backgroundGradientStart={backgroundGradientStart}
backgroundGradientEnd={backgroundGradientEnd}
/>
<MaybeAnimatedScrollView
when={scroll && !avoidKeyboard}
style={[layoutStyle, { padding }]}
keyboardShouldPersistTaps={keyboardShouldPersistTaps}
contentContainerStyle={insetStyle}
onScroll={hasTabs || hasHeader ? handleScroll : () => {}}
// Fixes middle-floating scrollbar issue
scrollIndicatorInsets={{ right: 1 }}
>
<MaybeView when={!scroll && !avoidKeyboard} style={[styles.sceneContainer, layoutStyle, insetStyle, { padding }]}>
{isFuncChildren ? children(info) : children}
</MaybeView>
</MaybeAnimatedScrollView>
{renderFooter != null && !hasTabs ? <SceneFooter>{renderFooter(info)}</SceneFooter> : null}
</MaybeAnimatedView>
{hasNotifications ? <NotificationView hasTabs={hasTabs} navigation={navigation} /> : null}
</>
)
}

Expand Down

0 comments on commit a73aa08

Please sign in to comment.