question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v3] modal flicker and position change when keyboard is activated

See original GitHub issue

Bug

Im not able to reproduce it on the examples but happens on a fresh react native init project Flicker and modal gets pushed up slightly when pressing on a TextInput. Happens with normal BottomSheet aswell but no flicker, just the sheet getting pushed up slightly. seems to happen only on android

https://user-images.githubusercontent.com/24904987/104121155-1ce07480-52f1-11eb-9cac-472a770d8517.mp4

Environment info

Library Version
@gorhom/bottom-sheet 3.0.1
react-native 0.63.4
react-native-reanimated 2.0.0-rc.1
react-native-gesture-handler 1.9.0

Steps To Reproduce

  1. npx react-native init <projectName>
  2. Follow instruction on installing v3 bottomsheet
  3. add modal with text input

Describe what you expected to happen:

  1. no flicker and push up of modal

Reproducible sample code

//App.js
import React, {useRef} from 'react';
import {View, Button, TextInput} from 'react-native';
import {
  BottomSheetModalProvider,
  BottomSheetModal,
  BottomSheetBackdrop,
} from '@gorhom/bottom-sheet';

const App = () => {
  const bottomSheetRef = useRef(null);
  return (
    <BottomSheetModalProvider>
      <View>
        <Button
          title="OPEN MODAL"
          onPress={() => bottomSheetRef.current.present()}
        />
      </View>
      <BottomSheetModal
        ref={bottomSheetRef}
        snapPoints={['80%']}
        backdropComponent={BottomSheetBackdrop}>
        <View style={{backgroundColor: 'red'}}>
          <TextInput />
        </View>
      </BottomSheetModal>
    </BottomSheetModalProvider>
  );
};

export default App;

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Janak-Nirmalcommented, Mar 31, 2021

@gorhom I believe latest update resolves this issue. I have added keyboardBehavior as none i.e. I don’t want anything to happen if keyboard is opened or closed. I upgraded to latest version 3.6.2 but somehow flicker is still there in the component when we focus on the text input. Not able to figure out what I missed here. Can you please enlighten me ?

1reaction
gorhomcommented, Jan 26, 2021

@rickyplouis i have created a post in discussions to plan its implementation, please have a look and feel free to share your thoughts

#233

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Native expo modal with textinput, Keyboard and modal ...
I have an issue with modal not being stable when text input receives entry. I have struggled with this and read most post...
Read more >
Scott M. Flicker, Partner, Litigation - Paul Hastings LLP
Mr. Flicker advises clients in matters arising from cross-border mergers and acquisitions, financings and operations, including foreign investment reviews, ...
Read more >
FlickerFree - Philips
Philips Flicker-Free technology applies a new solution to regulate brightness and reduce flicker for more comfortable viewing.
Read more >
This Is Why Your Monitor Keeps Flickering - Targus
One user had a Bluetooth dongle plugged into a USB 3.0 port on the back of the docking station. Moving the dongle to...
Read more >
Rearrange clips in a Premiere Pro sequence - Adobe Support
Move clips using the keypad. You can change the position of a clip in a sequence by typing the number of frames that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found