fix(app): stop composer flickering during keyboard changes

Keep layout-only styles on stable React Native style IDs when they share Reanimated hosts with keyboard transforms. This prevents style regeneration from disturbing the animated native views while preserving keyboard and safe-area behavior.
This commit is contained in:
Mohamed Boudra
2026-07-21 23:56:23 +02:00
parent 97cfcf8306
commit 21d9bdc644
4 changed files with 43 additions and 24 deletions
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useRef } from "react";
import { Keyboard, ScrollView, Text, View } from "react-native";
import { Keyboard, ScrollView, StyleSheet as RNStyleSheet, Text, View } from "react-native";
import { useTranslation } from "react-i18next";
import ReanimatedAnimated from "react-native-reanimated";
import { StyleSheet } from "react-native-unistyles";
@@ -665,7 +665,11 @@ export function WorkspaceDraftAgentTab({
});
const inputAreaWrapperStyle = useMemo(
() => [styles.inputAreaWrapper, { paddingBottom: insets.bottom }, composerKeyboardStyle],
() => [
animatedStaticStyles.inputAreaWrapper,
{ paddingBottom: insets.bottom },
composerKeyboardStyle,
],
[insets.bottom, composerKeyboardStyle],
);
@@ -772,6 +776,12 @@ export function WorkspaceDraftAgentTab({
);
}
const animatedStaticStyles = RNStyleSheet.create({
inputAreaWrapper: {
width: "100%",
},
});
const styles = StyleSheet.create((theme) => ({
container: {
flex: 1,
@@ -795,10 +805,6 @@ const styles = StyleSheet.create((theme) => ({
configSection: {
gap: theme.spacing[3],
},
inputAreaWrapper: {
width: "100%",
backgroundColor: theme.colors.surface0,
},
importPillRow: {
width: "100%",
paddingHorizontal: theme.spacing[4],