handle KeyboardAvoid

[hoangman1108]

I have problem with enable scrollable, with new update version 3.8.2. the sheet always detents=[1]
Anyway to handle the button with keyboard avoid
`
const buttonTranslateY = useSharedValue(0)
const keyboardHeight = useSharedValue(0)
useKeyboardHandler(
{
onMove: (e) => {
"worklet"
keyboardHeight.value = e.height
buttonTranslateY.value = -e.height / 2 - (e.height > 100 ? height.value : 0)
},
onEnd: (e) => {
"worklet"
keyboardHeight.value = e.height
buttonTranslateY.value = -e.height / 2 - (e.height > 100 ? height.value : 0)
},
},
[]
)

const buttonAnimatedStyle = useAnimatedStyle(() => ({
transform: [{ translateY: buttonTranslateY.value }],
paddingBottom: keyboardHeight.value > 0 ? bottom : 0,
}))

const keyboardPadding = useAnimatedStyle(() => ({
height: height.value,
}))

return (
<SimpleBottomSheet closeFromController={handleClose} header={t("feedback.title")} isVisible={isVisible} scrollable>



<View style={[$styles.px[16], $styles.pt[16], $styles.gap[24]]}>

<Text color="neutralStrong" preset="lg/semibold" style={$titleStyle} text={t("feedback.sendToTeam")} />
<Text color="neutralMedium" preset="xs/medium" text={t("feedback.subtitle")} />

          <View style={$styles.gap[12]}>
            <View style={[$styles.row, $styles.between]}>
              {RATES.map((item) => {
                const isSelected = rating === item
                return (
                  <TouchableOpacity
                    activeOpacity={0.7}
                    key={item}
                    style={[themed($ratingBox), isSelected && themed($ratingBoxSelected)]}
                    onPress={() => setRating(item)}
                  >
                    <Text
                      color={isSelected ? "onPrimary" : "neutralStrong"}
                      preset="sm/medium"
                      text={item.toString()}
                    />
                  </TouchableOpacity>
                )
              })}
            </View>
            <View style={[$styles.row, $styles.between]}>
              <Text color="neutralStrong" preset="sm-dense/medium" text={`😡 ${t("feedback.hardToUse")}`} />
              <Text color="neutralStrong" preset="sm-dense/medium" text={`${t("feedback.easyToUse")} 😁`} />
            </View>
          </View>

          {/* Comment Section */}
          <View style={$styles.gap[8]}>
            <Text color="neutralStrong" preset="sm-dense/medium" text={t("feedback.reason")} />

            <TextAreaField
              inputWrapperStyle={themed($inputWrapper)}
              placeholder={t("feedback.placeholder")}
              value={comment}
              onChangeText={setComment}
            />
            <View style={[$styles.gap[8], $styles.mt[12]]}>
              <Text
                color="neutralStrong"
                preset="sm-dense/medium"
                text={`${t("feedback.screenshot")} (${screenshots.length}/${MAX_SCREENSHOTS})`}
              />
              <View style={[$styles.row, $styles.gap[8]]}>
                {screenshots.map((item, index) => (
                  <View key={`${item.uri}-${index}`} style={themed($imageBox)}>
                    <Image source={{ uri: item.uri }} style={getImageThumbStyle(item.aspectRatio)} />
                    <TouchableOpacity
                      activeOpacity={0.7}
                      hitSlop={5}
                      style={$removeImageButton}
                      onPress={() => removeScreenshot(index)}
                    >
                      <CloseCircleIcon color={theme.semantic.content.subtleMedium} preset="icon16" />
                    </TouchableOpacity>
                  </View>
                ))}
                {screenshots.length < MAX_SCREENSHOTS && (
                  <TouchableOpacity activeOpacity={0.7} style={themed($imageBoxAdd)} onPress={pickFromLibrary}>
                    <PlusIcon color={theme.semantic.content.neutralStrong} />
                  </TouchableOpacity>
                )}
              </View>
            </View>
          </View>
        </View>
        <Animated.View style={keyboardPadding} />
      </ScrollView>

      <Animated.View style={[buttonAnimatedStyle, themed($buttonContainer)]}>
        <View style={[$styles.row, $styles.gap[16]]}>
          <View style={$styles.flex1}>
            <Button preset="neutral" size="lg" text={t("common.later")} onPress={handleClose} />
          </View>
          <View style={$styles.flex1}>
            <Button
              disabled={rating === null || !comment.trim() || !userInfo}
              loading={loading}
              preset="primary"
              size="lg"
              text={t("common.sendFeedback")}
              onPress={handleConfirm}
            />
          </View>
        </View>
      </Animated.View>
    </View>
  </TouchableWithoutFeedback>
</SimpleBottomSheet>

)
}
`

Entry	disabled scrollable	enable scrollable