diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
index 581148cd..b695b249 100644
--- a/example/src/navigation/navigator.tsx
+++ b/example/src/navigation/navigator.tsx
@@ -11,6 +11,7 @@ import { EndOfPageScreen, EndOfPageScreenWithCTA } from "../pages/EndOfPage";
import { FooterWithButton } from "../pages/FooterWithButton";
import { FooterWithButtonEmptyState } from "../pages/FooterWithButtonEmptyState";
import { ForceScrollDownViewPage } from "../pages/ForceScrollDownViewPage";
+import { GradientScroll } from "../pages/GradientScroll";
import { HeaderFirstLevelScreen } from "../pages/HeaderFirstLevel";
import { HeaderSecondLevelScreen } from "../pages/HeaderSecondLevel";
import { HeaderSecondLevelWithStepper } from "../pages/HeaderSecondLevelWithStepper";
@@ -18,6 +19,7 @@ import { Icons } from "../pages/Icons";
import { ImageScreen } from "../pages/Image";
import { Layout } from "../pages/Layout";
import { ListItems } from "../pages/ListItem";
+import { Loaders } from "../pages/Loaders";
import { Logos } from "../pages/Logos";
import MainScreen from "../pages/MainScreen";
import Modules from "../pages/Modules";
@@ -33,7 +35,6 @@ import { TabNavigationScreen } from "../pages/TabNavigation";
import { TextInputs } from "../pages/TextInputs";
import { Toasts } from "../pages/Toasts";
import { Typography } from "../pages/Typography";
-import { Loaders } from "../pages/Loaders";
import { AppParamsList } from "./params";
import APP_ROUTES from "./routes";
@@ -331,6 +332,15 @@ const AppNavigator = () => (
}}
/>
+
+
(
+
+ Alert.alert("Primary action pressed! (ꈍᴗꈍ)")
+ }}
+ >
+ Start
+ {[...Array(50)].map((_el, i) => (
+ Repeated text
+ ))}
+
+
+
+ Alert.alert("Test button")}
+ />
+ {[...Array(2)].map((_el, i) => (
+ Repeated text
+ ))}
+ End
+
+
+);
diff --git a/package.json b/package.json
index f58fd37a..836584d7 100644
--- a/package.json
+++ b/package.json
@@ -191,6 +191,7 @@
"@types/react-test-renderer": "^18.0.0",
"auto-changelog": "^2.4.0",
"lodash": "^4.17.21",
+ "react-native-easing-gradient": "^1.1.1",
"react-native-gesture-handler": "^2.12.0",
"react-native-haptic-feedback": "^2.0.2",
"react-native-linear-gradient": "^2.5.6",
diff --git a/src/components/layout/GradientBottomActions.tsx b/src/components/layout/GradientBottomActions.tsx
index abf0859a..04e75c61 100644
--- a/src/components/layout/GradientBottomActions.tsx
+++ b/src/components/layout/GradientBottomActions.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
-import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { Easing, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { easeGradient } from "react-native-easing-gradient";
import LinearGradient from "react-native-linear-gradient";
import Animated from "react-native-reanimated";
import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
@@ -33,6 +34,15 @@ type GradientBottomActionsDimensions = {
// Background color should be app main background (both light and dark themes)
const HEADER_BG_COLOR: IOColors = "white";
+const { colors, locations } = easeGradient({
+ colorStops: {
+ 0: { color: hexToRgba(IOColors[HEADER_BG_COLOR], 0) },
+ 1: { color: IOColors[HEADER_BG_COLOR] }
+ },
+ easing: Easing.ease,
+ extraColorStopsPerTransition: 20
+});
+
const styles = StyleSheet.create({
buttonContainer: {
paddingHorizontal: IOVisualCostants.appMarginDefault,
@@ -84,14 +94,18 @@ export const GradientBottomActions = ({
]}
pointerEvents="none"
>
+ {/* 100% opacity bg color fills at least 45% of the area */}
+
diff --git a/src/components/layout/GradientScrollView.tsx b/src/components/layout/GradientScrollView.tsx
index c88c69b3..900fcc27 100644
--- a/src/components/layout/GradientScrollView.tsx
+++ b/src/components/layout/GradientScrollView.tsx
@@ -28,7 +28,7 @@ export type GradientScrollView = WithTestID<{
}>;
// Extended gradient area above the actions
-export const gradientSafeArea: IOSpacingScale = 80;
+export const gradientSafeArea: IOSpacingScale = 96;
// End content margin before the actions
const contentEndMargin: IOSpacingScale = 32;
// Margin between primary action and secondary one
diff --git a/src/core/IOSpacing.ts b/src/core/IOSpacing.ts
index 5ff2304f..a5457a3a 100644
--- a/src/core/IOSpacing.ts
+++ b/src/core/IOSpacing.ts
@@ -19,7 +19,8 @@ export type IOSpacingScale =
| 56
| 64
| 72
- | 80;
+ | 80
+ | 96;
// Values used in the new `` component
export type IOSpacer = Extract;
diff --git a/yarn.lock b/yarn.lock
index c94795c8..7dbe3012 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12756,6 +12756,11 @@ react-native-codegen@^0.71.5:
jscodeshift "^0.13.1"
nullthrows "^1.1.1"
+react-native-easing-gradient@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/react-native-easing-gradient/-/react-native-easing-gradient-1.1.1.tgz#8d099795d7a0065e67d37a8489bffe354ffb94fa"
+ integrity sha512-KrGU97kPTMrLNzVXxFirFMgl65uo70gVNoKw2OngDzcDfoswb648I3ggeCnoY+JgMWkPyx4LlG7n3ZNgSPFnLw==
+
react-native-gesture-handler@^2.12.0:
version "2.12.1"
resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz#f11a99fb95169810c6886fad5efa01a17fd81660"