setNightmode(!nightMode)}
/>
setShowDropDown(true)}
onDismiss={() => setShowDropDown(false)}
value={gender}
setValue={setGender}
list={genderList}
/>
setShowMultiSelectDropDown(true)}
onDismiss={() => setShowMultiSelectDropDown(false)}
value={colors}
setValue={setColors}
list={colorList}
multiSelect
/>
);
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
},
spacerStyle: {
marginBottom: 15,
},
safeContainerStyle: {
flex: 1,
margin: 20,
justifyContent: 'center',
},
});
export default App;
```
- look at the "web" tab of the snack device section
- make window vertically small until scrollbar appears
- scroll down a bit
- open dropdown
### Result
The dropdown opens at the wrong position. The offset is equal to the scroll position of the window, so the dropdown moves twice as fast as the scrollbar of the window.
![Screenshot from 2021-08-02 22-48-48](https://user-images.githubusercontent.com/85846148/127921980-3068ffba-c402-4ccb-a49d-6239cfcb50f4.png)
Steps to reproduce
function App() { const [nightMode, setNightmode] = useState(false); const [showDropDown, setShowDropDown] = useState(false); const [gender, setGender] = useState('');
const [showMultiSelectDropDown, setShowMultiSelectDropDown] = useState(false);
const [colors, setColors] = useState('');
const genderList = [
{
label: 'Male',
value: 'male',
},
{
label: 'Female',
value: 'female',
},
{
label: 'Others',
value: 'others',
},
];
const colorList = [
{
label: 'White',
value: 'white',
},
{
label: 'Red',
value: 'red',
},
{
label: 'Blue',
value: 'blue',
},
{
label: 'Green',
value: 'green',
},
{
label: 'Orange',
value: 'orange',
},
];
return ( <Provider theme={nightMode ? DarkTheme : DefaultTheme}> <ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}> <StatusBar backgroundColor={ nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary } barStyle={'light-content'} />