[v3] modal flicker and position change when keyboard is activated
See original GitHub issueBug
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
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
npx react-native init <projectName>
- Follow instruction on installing v3 bottomsheet
- add modal with text input
Describe what you expected to happen:
- 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:
- Created 3 years ago
- Reactions:2
- Comments:9 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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 ?
@rickyplouis i have created a post in discussions to plan its implementation, please have a look and feel free to share your thoughts
#233