Merge pull request #40822 from tienifr/fix/38594-fix-illustration-nat…

…ive-device

fix illustration is sitting too far down

src/pages/settings/Troubleshoot/TroubleshootPage.tsx

@@ -29,6 +29,7 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import getLightbulbIllustrationStyle from './getLightbulbIllustrationStyle';
 
 type BaseMenuItem = {
     translationKey: TranslationPaths;
@@ -50,6 +51,7 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
     const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false);
     const waitForNavigate = useWaitForNavigation();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const illustrationStyle = getLightbulbIllustrationStyle();
 
     const menuItems = useMemo(() => {
         const debugConsoleItem: BaseMenuItem = {
@@ -101,7 +103,7 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
                         isCentralPane
                         subtitleMuted
                         illustration={LottieAnimations.Desk}
-                        illustrationStyle={[styles.mt4, styles.mbn4]}
+                        illustrationStyle={illustrationStyle}
                         titleStyles={styles.accountSettingsSectionTitle}
                         illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor}
                         renderSubtitle={() => (

src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.native.ts

@@ -0,0 +1,6 @@
+import type {ViewStyle} from 'react-native';
+
+// Styling lottie animations for the Lightbulb component requires different margin values depending on the platform.
+export default function getLightbulbIllustrationStyle(): ViewStyle {
+    return {};
+}

src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.ts

@@ -0,0 +1,9 @@
+import type {ViewStyle} from 'react-native';
+
+// Styling lottie animations for the Lightbulb component requires different margin values depending on the platform.
+export default function getTripIllustrationStyle(): ViewStyle {
+    return {
+        marginTop: 16,
+        marginBottom: -16,
+    };
+}