Ignite: react-native-windows UWP TextInput

[semiautomatix]

I know this is completely out of scope, but I was sincerely hoping Ignite would become the boilerplate code I use for my hybrid Windows Desktop/Mobile application. I know there is an intention to include Windows as a platform, so perhaps this is also of some interest?

As such, I have a peculiar problem resulting from using Ignite 2.0 and react-native-windows whereby the TextInputs are positioning the cursor at the beginning of a field when the field is populated using the value property. See below.

---

Install Ignite 2.0 as per instructions
npm install --save-dev rnpm-plugin-windows
react-native windows
react-native run-windows

---

ignite doctor results:

System
  platform           win32                                                                                              
  arch               x64                                                                                                
  cpu                8 cores                                          Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz

If anyone has any idea, or could point me to the offending module or piece of code that might be causing the issues, I'd be most grateful. The project itself has severe time constraints and to track down this problem is just another burden.

Thanks everyone.

And Ignite is still my no. 1 choice - that's why I want to port my Android code to Windows!

[kevinvangelder]

@semiautomatix Having used RNW a fair bit myself recently I suspect this is an issue on the UWP end. Can you do a quick test in the RNW Playground and if it is an upstream issue file an issue with them?

[GantMan]

I have to agree with @kevinvangelder

can you verify this is Ignite or RNW? If it's RNW, we're still here to help! We just want to know which it is first.

[semiautomatix]

Thanks for the replies. As far as I can test, this issue only occurs within the Ignite boilerplate - not within a vanilla RN project. Additionally, no issues within the RNW Playground.

What I'm unsure of is whether the Ignite boilerplate code is revealing a bug in RNW or not, possibly affecting the OnSizeChanged event. However, to recreate the error Ignite definitely needs to be installed.

[semiautomatix]

I've possibly narrowed the problem down to the react-native-drawer component. The containers are rendered through this module.

Rendering the react-native-router-flux scenes without using the react-native-drawer prevents the problem from occurring.

EDIT: I've further narrowed down the issue to the pointerEvents property. The react-native-drawer component contains this property in View (and I've also tested react-native-drawer-layout
that contains this property in Animated.View). The specific piece of code is:

<View
          pointerEvents={ this._open && this.shouldCaptureGestures() ? 'auto' : 'none' }
/>

and

const pointerEvents = drawerShown ? 'auto' : 'none';

<Animated.View
            pointerEvents={pointerEvents}
/>

[kevinvangelder]

Fascinating! Thanks for doing all this legwork. Can you file issues with those packages? If they won't help you because you're on Windows we'll see what we can do.

[semiautomatix]

Joy, it's now preventing ScrollView from scrolling. Yeah, it could be a bigger problem than just a textinput, I'll see if it can be fixed in the packages, or it's something RNW needs to deal with.

[jamonholmgren]

@semiautomatix Can we close this issue, or should we keep it open to track?

[semiautomatix]

@jamonholmgren I'm not sure whether the issue lies on the RNW side or the components - but it's most likely not an Ignite issue. So in that instance, it should be closed. I think it best these issues be filed with RNW, react-native-drawer and react-native-drawer-layout packages. rather than Ignite.

So close the issue here. Once the issue is resolved (elsewhere) we can either re-open or create a new request to update the packages.

[semiautomatix]

Issue to be posted to RNW, react-native-drawer and react-native-drawer-layout packages. Ignite to be updated once the issue is resolved.