React Native support

[faceyspacey]

Is this purely web or is there any hope for making native (specifically React Native) application demos with it? What's a birds-eye-overview of what would need to be done to record native application demos?

[tolmasky]

Currently DemoKit renders everything in a WebView, so this would be tricky (as it would require interacting with the native apps, which I have no idea how feasible that is). For example, everything currently relies on query-selectors etc to find elements and click on them, does React Native expose some IPC API to do the same?

[faceyspacey]

Appium (a Native in general testing tool) seems to be picking up steam in the React Native community, although it has some flaws--mainly that it's not React Native-specific and requires you to use native selectors, which RN native developers otherwise have no idea about until they go looking for them. In addition, part of its appeal is it's cross-platform.

In general, I think the solution would be to use a React testing framework like Enzyme:

https://github.com/airbnb/enzyme basically you simulate() clicks

It works with RN http://airbnb.io/enzyme/docs/guides/react-native.html note: there they mention problems regarding running on a "host device," but in this particular demo video case you don't even need to worry about running as a test suite on a continuous integration server (which won't have the capabilities of an iPhone or Android phone), as the whole goal is to record on an actual phone

...And actually, perhaps you can skip a testing framework like Enzyme altogether and just make Redux a hard dependency, and simply dispatch redux actions with timers.

<simulator    
   id = "myapp"
   title = "My App"
   launchCommand = "cd AwesomeProject & react-native run-ios"
   phoneContainer = {true} 
   phoneColor = 'black' />

<recording.start filePath = "videos/video" />

<using window = "myapp">
    <dispatch type = "START_APP" payload =  {(isDemoVideo: true)} />
    <wait delay = { 500 }/>
    <dispatch type = "HIDE_ANIMATION" />
    <wait delay = { 300 }/>

     <click selector = "MySearchInput" />
     ???<type>How do I use <paste>JSX</paste>?</type>??? //needs Enzyme?
     <wait delay = { 150 }/>
     <dispatch type = "SUBMIT_SEARCH" payload =  {{keywords: 'How do I use JSX'}} />
</using>

<recording.stop />

...So it boils down to "native controls" like typing in an input requiring something like Enzyme and everything else (if you've built a professional redux-centric app) being address simply by dispatch. That said, even typing in a field can be handled by redux (or setState)--same with swiping and scrolling. I think we could get very far just with Redux--it may even force developers to make their app better and more testable. However, it will be annoying to replicate touchdown states on buttons. Enzyme might not even do that either. Appium would though, but I really don't think Appium is the way to go. Basically a major product the RN community needs is an Appium specifically for RN, built with RN javascript selectors in mind (and not in Ruby), while maintaining native styles like a fading opacity onPress of a button (as in the <TouchableOpacity> RN component). This product is gonna emerge at some point. But I don't think it's necessary for demo kit--basically we can leave it up to the developer: if they really want, it's totally possible to trigger the native animations of your buttons in response to redux state changes, like as an additional animation to the ones the TouchableComponents already provide just for the purposes of the video. I'm not too worried. Some natural solution will emerge. Perhaps I'm missing something, and it already is default.

So bottom line is:

• you need to be able to launch a simulator
• hook into the javascript running there and get access to store.dispatch()
• parse JSX into dispatch calls
• record what's shown in the simulator

FINAL THOUGHT: I think this could be huge, perhaps bigger than demo-kit as it already is for desktop, given how popular native mobile application video tours are, and given the explosion of RN.

Perhaps a competing view is that raw simulated clicks is higher priority than Redux. Ultimately, if you've already have access to the javascript code running the app, dispatch calls is the dead simplest thing you can do. So might as well get that in there, or definitely start with that.

[tolmasky]

There's a few competing constraints here:

1. Being able to intersperse other content. Currently we can very easily add titles, callouts, all sorts of stuff that interacts with the windows because its all living in a web view. To do that with "real" content on the desktop would essentially require you to write apps.
2. Being able to do other things with your computer while it runs. Perhaps this is not important to others, but the move in DemoKit is to increasingly someday allow it to just run in the background.

One possibility (which would be hard), is to try to render the React Native stuff offscreen, then take its window buffer and pipe it into the DemoKit app, that way you can still do whatever you want with it.