modal looks weird after use TextInput on KeyboardAwareScrollView

[dioi2000]

• before TextInput

• after TextInput

• versions react-native 0.72.8 react-native-keyboard-controller 01.10.6

[kirillzyusko]

@dioi2000 Can you please provide more information and follow template of the issue that I created?

[dioi2000]

@kirillzyusko sorry about information I made a sample application and the issue is only with release mode testApp.zip

build phase

1. yarn
2. cd ios && USE_FABRIC=1 RCT_NEW_ARCH_ENABLED=1 pod install --repo-update
3. yarn start
4. build app on xcode(release mode)

error case

• modal position and size go wired after use textinput with KeyboardAwareScrollView

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/33106641/2e566638-3853-45a0-b593-08d30add9af2

[kirillzyusko]

@dioi2000 nice, thank you. Can not promise that I'll have a look this week, because I'm quite busy with new release preparation, but I'll try to have a look on it 👍

Does the problem reproducible only on iPad or on mobile devices as well? Does it reproducible only in release mode or in debug as well?

[kirillzyusko]

@dioi2000 On my machine it works as expected:

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/85d61b32-cf6b-4143-88b2-f6d934a1234b

Also in your video before interaction with textInput for a fraction of a second modal positioned incorrectly:

Did you try to remove KeyboardProvider and KeyboardAwareScrollView - will the issue gone on your side if you do that?

I also noticed that the keyboard looks different in your case than on my video - can you describe how you added such keyboard?

[dioi2000]

@kirillzyusko only issue with iOS release mode, ok with debug mode yes I tried, It's not happened without KeyboardProvider and KeyboardAwareScrollView keyboard look like that when turn on hardware keyboard on simulator (I/O - keboard - Connect Hardware Keyboard)

• tested on below devices ipad pro 4th / 16.7 ipad 9 /16.3 iPad 9 / 16.7 iPad air2 / 15.7.5 iPad Pro 3세대 / 17.2 iPad 5 / 17.3 iPad 6 /15.3.1 iPad Air 3 / 17.2 iPhone 12 mini / 17.3.1 iPad 10th(simulator) / 17.2

[dioi2000]

build environment detail

• macOS: sonoma 14.1.1(23B81)
• Xcode: 15.2 (15C500b)
• RN architecture: NEW fabric
• cocoapods: 1.14.3
• ruby: 3.2.3

[kirillzyusko]

@dioi2000 okay, thank you for provided information! I'll try to reproduce again when I get free time!

BTW, have you tried to keep only KeyboardProvider and reproduce the issue? I'm just thinking that maybe reanimated animations somehow breaks the Modal in new arch 🤔

[dioi2000]

@kirillzyusko thank you for the advise! tried some versions but still have issue

[kirillzyusko]

@dioi2000 okay, interesting, maybe custom KeyboardControllerView breaks something 👍 I'll try to allocate some time to reproduce and fix the issue 👍

[dioi2000]

using height, width of useWindowDimensions instead of flex for workaround

[kirillzyusko]

@dioi2000 in CustomModal?

[kirillzyusko]

@dioi2000 I found some time and dig into the problem. I removed react-native-keyboard-controller and replaced with plain reanimated and issue is still there:

import React, {useState, useEffect, useCallback, useRef} from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  TextInput,
  ScrollView,
  Button,
} from 'react-native';
import CustomModal from './CustomModal';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

function App(): JSX.Element {
  const [input, setInput] = useState('')
  const [pop, setPop] = useState(false)
  const height = useSharedValue(0)
  const isExpandedRef = useRef(false);

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

  return (
    <View style={{flex: 1}}>
      <View style={styles.container}>
        <View style={{paddingTop: 40}}>
          <Button
            title='animate'
            onPress={() => {
              height.value = withTiming(isExpandedRef.current ? 0 : 336);
              isExpandedRef.current = !isExpandedRef.current;
            }}
          />
        </View>
        <ScrollView contentContainerStyle={styles.container}>
          <TextInput
            placeholder='TextInput'
            style={styles.input}
            value={input}
            onChangeText={setInput}
          />
          <Animated.View style={s} />
          <TouchableOpacity onPress={()=>setPop(true)} style={styles.signButton} />
        </ScrollView>

        {/* popup */}
        <CustomModal visible={pop} setVisible={setPop}>
          <TouchableOpacity onPress={()=>setPop(false)} style={{width: 200, height: 200, backgroundColor:'pink'}} />
        </CustomModal>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    height: 42,
    width: 200,
    backgroundColor: 'lightgreen',
  },
  signButton: {
    backgroundColor: 'pink',
    height: 42,
    width: 200,
  },
})

export default App;

I think the issue can be related to https://github.com/software-mansion/react-native-reanimated/issues/5567 (but I'm not sure).

Feel free to report this problem to REA repository 🙌 I'm going to close this issue since it can not be fixed on RNKC level.

But if you think it's fixable on RNKC level - let me know and I re-open the issue.

[dioi2000]

@kirillzyusko yes, in modal view thank you for the try :)