React-native-windows: [BUG] Some components not working in DrawerNavigator

[paulbx81]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: Windows 10
Node: 9.11.1
Yarn: 1.6.0
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.4.1 => 16.4.1
react-native: ^0.55.0 => 0.55.4

Description

When i try to use the element inside a StackNavigator it work perfectly but it don't work when i am into a drawernavigator.

For exemple : my login screen :

const AuthStack = createStackNavigator({ Login: Login },{headerMode:'none'});

If i use a Picker inside this screen it will work perfectly :

But if i change :

const AuthStack = createStackNavigator({ Login: Login },{headerMode:'none'});

with :

const AuthStack = createDrawerNavigator({ Login: Login },{headerMode:'none'});

my Picker is always visible but nothing append when i try to use it, nothing... and this is the same result for all my other screen..

Reproducible Demo

this.state = {
    villeRisk : "prs",
}

<Picker
    selectedValue={this.state.villeRisk}
    style={{ height: 30, width: 200 }}
    onValueChange={(itemValue, itemIndex) => this.setState({villeRisk: itemValue})}
>
    <Picker.Item label="Toulouse" value="tls" />
    <Picker.Item label="Paris" value="prs" />
</Picker>

[creambyemute]

@rozele I created a small and simple reproduction repository.
Picker, Switch and FlatList are affected for sure, didn't test more.
I just checked with React-DevTools. The RCTSwitch View is not being created when nested somewhere in the DrawerNavigator

@paulbx81 Can you maybe change the Issue title to "Some components not working in DrawerNavigator"?

https://github.com/creambyemute/RNWindowsComponentsNotWorkingInDrawerNavigator

[paulbx81]

@creambyemute done, thx for your help !

[paulbx81]

@creambyemute look https://github.com/Microsoft/react-native-windows/issues/715

[creambyemute]

@paulbx81 That's not really the case here I think. Normal Buttons etc receive the press. It's really that the Switch/Picker view isn't fully created if you look at the dom with react-devtools

[paulbx81]

i tried with other versions of react-native, react-native-windows, react-navigation... same
@rozele

[creambyemute]

@paulbx81 Stop pinging over and over again.

I'm sure they'll have a look at it

[rozele]

Thanks @paulbx81 - can you share code for a full component with this repro, or point to a repository with this issue?

[creambyemute]

@rozele Here is one with a <Switch> on a screen which is inside a DrawerNavigator: https://github.com/creambyemute/RNWindowsComponentsNotWorkingInDrawerNavigator/tree/master/src

[paulbx81]

FIX : https://github.com/anumang/react-native-drawer-layout/blob/5054bfa28fd60a13c1de0b0deb3cb144c876fa5c/src/DrawerLayout.js

It work perfectly with this

[creambyemute]

@rozele I just tried the "Fix" posted by @paulbx81 . It indeed works, and didn't break anything on iOS/Android on my project neither.