KeyboardAwareScrollView not figuring style or contentContainerStyle (IOS & Android)

[TimeForRelax]

this is example how I'm using it. Issue here - KeyboardAwareScrollView can't read style or contentContainerStyle properties. I tried flex: 1, gap: moderateScale{from 'react-native-size-matters'}(value), I tried only values like 20, 120 for paddingBottom, also tried Math.round etc. In all cases I facing with one error

const paddingBottom = Math.round(bottom + moderateScale(60))

  return (
    <View style={[styles.wrapper, { backgroundColor: theme("white") }]}>
      <HeaderScreen
        type={headerScreenIconType}
        title={title}
      />

      <KeyboardAwareScrollView
        // style={localeStyles.scrollView}
        contentContainerStyle={{ paddingBottom }}
        // extraKeyboardSpace={moderateScale(60)}
        bottomOffset={moderateScale(20)}>
        {children}
      </KeyboardAwareScrollView>

      <CustomButton
        loading={buttonIsLoading}
        onPress={onSavePress}
        text="Save changes"
        style={[styles.saveButton, { bottom: bottom }]}
      />
    </View>
  )
}

const localeStyles = StyleSheet.create({
  scrollView: {
    flexGrow: 1,
  },
  // scrollViewContainer: {
  //   gap: moderateScale(15),
  // },
})

without any styles it working very well. for importing styles I tried 2 variants: locale styles and import from file.

Steps to reproduce the behavior:

1. add KeyboardAwareScrollView
2. add some style or contentContainerStyle with any value like flex or paddingBottom.
3. enjoy error

Devices: Iphone 15 Pro, Mi Note 10 Lite (real devices)

[TimeForRelax]

"dependencies": { "@gorhom/bottom-sheet": "^5.0.0-alpha.10", "@gorhom/portal": "^1.0.14", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "react": "18.2.0", "react-native": "0.74.1", "react-native-blob-util": "^0.19.9", "react-native-keyboard-controller": "^1.12.5", "react-native-reanimated": "^3.11.0", "react-native-safe-area-context": "^4.10.1", "react-native-screens": "^3.31.1", "react-native-size-matters": "^0.4.2", },

[kirillzyusko]

@TimeForRelax what is the version of react-native-reanimated is in the (yarn.lock|package-lock.json) file? I see it's 3.11.0 in package, but what is the exact version in lock file? 👀

[kirillzyusko]

I'm just thinking that it could be related to https://github.com/software-mansion/react-native-reanimated/issues/6066

[TimeForRelax]

@TimeForRelax what is the version of react-native-reanimated is in the (yarn.lock|package-lock.json) file? I see it's 3.11.0 in package, but what is the exact version in lock file? 👀

the same one. ^3.11.0

[TimeForRelax]

oh, ok i see! I am using 3.12.0, but the issue from react-native-reanimated solved in 3.12.1

[kirillzyusko]

I am using 3.12.0, but the issue from react-native-reanimated solved in 3.12.1

Yep. Can you try to upgrade the version and see if the problem gets resolved? 👀

[TimeForRelax]

sure, reinstalling deps...

[TimeForRelax]

maybe you all can help me with this issue?)https://github.com/gorhom/react-native-bottom-sheet/issues/1883

[TimeForRelax]

did you get same trouble?

[kirillzyusko]

maybe you all can help me with this issue?)https://github.com/gorhom/react-native-bottom-sheet/issues/1883

Unfortunately not 😓 I'm not working closely with bottom-sheet so can't say what exactly happens there at quick glance 🤷‍♂️

[TimeForRelax]

Great support! Thx. Its working now with react-native-reanimated: '3.12.1'

[TimeForRelax]

maybe you all can help me with this issue?)gorhom/react-native-bottom-sheet#1883

Unfortunately not 😓 I'm not working closely with bottom-sheet so can't say what exactly happens there at quick glance 🤷‍♂️

Hey, are you here? can you help with case when i wnat press clearButton in my customInput, but KeyboardAwareScrollView hiding Keyboard?

[TimeForRelax]

[TimeForRelax]

Here some more information

const CustomInput: FC<CustomInputProps> = forwardRef<TextInput, CustomInputProps>(
  ({ styleProps, value, onChangeText, withoutClearButton = false, containerStyleProps, inputRef, ...props }, ref) => {
    const { theme } = useTheme()

    const localeInputRef = useRef<TextInput>(null)

    const [isFocused, setIsFocused] = useState(false)

    return (
      <TouchableWithoutFeedback onPress={() => setIsFocused(false)}>
        <View style={[styles.container, containerStyleProps]}>
          <TextInput
            ref={inputRef ? inputRef : localeInputRef}
            keyboardAppearance={"light"}
            style={[
              styles.input,
              {
                backgroundColor: theme("gray.1000"),
                paddingRight: withoutClearButton ? moderateScale(20) : moderateScale(45),
              },
              styleProps,
            ]}
            value={value}
            onChangeText={onChangeText}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            {...props}
          />

          {!withoutClearButton && isFocused && value && (
            <TouchableOpacity
              style={[styles.clearButton, { backgroundColor: theme("white") }]}
              onPress={() => onChangeText("")}
              activeOpacity={0.95}>
              <IconX
                size={16}
                color={theme("gray.100")}
              />
            </TouchableOpacity>
          )}
        </View>
      </TouchableWithoutFeedback>
    )
  }
)

export default CustomInput

export const TemplateEditScreen: FC<TemplateEditScreenProps> = ({
  title,
  headerScreenIconType,
  onSavePress,
  children,
}) => {
  const { theme } = useTheme()

  const { bottom } = useSafeAreaInsets()

  return (
    <View style={[styles.wrapper, { backgroundColor: theme("white") }]}>
      <HeaderScreen
        type={headerScreenIconType}
        title={title}>
        <TouchableOpacity
          onPress={onSavePress}
          activeOpacity={0.95}>
          <CustomText
            size={moderateScale(15)}
            weight={TextWeight.MEDIUM}
            color={theme("primary")}>
            Save
          </CustomText>
        </TouchableOpacity>
      </HeaderScreen>

      <KeyboardAwareScrollView
        contentContainerStyle={{ paddingTop: moderateScale(25), paddingBottom: bottom, gap: moderateScale(15) }}
        bottomOffset={moderateScale(25)}>
        {children}
      </KeyboardAwareScrollView>
    </View>
  )
}

how to disable this behavior

[kirillzyusko]

@TimeForRelax will it help https://github.com/kirillzyusko/react-native-keyboard-controller/discussions/360#discussioncomment-8502972?

[TimeForRelax]

nope(

[TimeForRelax]

I believe that problem here is that TextInput not covered clearButton. TextInput have paddingRight like 45 and clearButton its just TouchableOpacity. But I want KeyboardDismiss only if I tap outside Block with textInput & clearButton

[TimeForRelax]

[kirillzyusko]

Strange - in this case TouchableOpacity should intercept touch and don't propagate it further.

I would try to call e.preventDefault() and verify that TouchableOpacity, ScrollView and other components come from react-native package (not a combination of react-native-gesture-handler)...

[TimeForRelax]

I am using all Components from react-native and I am not using ScrollView, I just using your KeyboardAwareScrollView

[TimeForRelax]

OOOOOH SHIT!!! You know what the problem???? AHAHHA

TouchableOpacity was small for finger, its causing the behavior that hard to snipe this button))))

Will add hitslop!

[TimeForRelax]

[kirillzyusko]

@TimeForRelax awesome 🚀