React-Native: how to import / use RC experimental components, i.e. SwipeableRow (0.27 rc)?

Question

I am wondering how to import / use / test new components in a ReactNative RC? Specifically, I want to import and use the SwipeableRow components in 0.27.0-rc1. Once I can import it, I can dig around in the code base to understand the params and options, but I can't even get past the import step...

I have the right tagged release installed via npm, but when I try importing the components, they show up as undefined:

import {
  ListView,
  ScrollView,
  StyleSheet,
  SwipeableListView,
  Text,
  TouchableHighlight,
  View
  } from 'react-native';

I get errors like:

Render code (that triggers the above):

render() {
    var ds = new SwipeableListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    blah blah blah
}

I have also tried moving the SwipeableRow folder to be a child of Libraries (instead of Libraries -> Experimental -> SwipeableRow, now it is Libraries -> SwipeableRow). Same error.

I have tried importing Experimental and then using <Experimental.SwipeableRow.SwipeableListView>, but that also throws an "Undefined is not an object" exception.

As suggested, I also tried importing by using a direct path to the node module:

import {
  SwipeableListView
} from '../../../node_modules/react-native/Libraries/Experimental/SwipeableRow';

That resulted in:

Unable to resolve module ../../../node_modules/react-native/Libraries/Experimental/SwipeableRow from <source component path>: File <path>/node_modules/react-native/Libraries/Experimental/SwipeableRow/index doesnt exist

I then tried:

import {
  SwipeableListView
} from '../../../node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListView';

Which resulted in:

Unable to resolve module emptyFunction from <path>/Libraries/Experimental/SwipeableRow/SwipeableRow.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/emptyFunction and its parent directories. This might be related to github issue 4968 (paraphrasing).

Is there a way to use and test these experimental components? Or do I just have to wait for the official release?

Answer 1

Since the module has a @providesModule annotation, it can be required directly. This is something specific to the packager used in react-native!

You can just do

const SwipeableRow = require('SwipeableRow');
// or 
import SwipeableRow from 'SwipeableRow';

And to fix the empty function issue, just change the require to the following:

const emptyFunction = require('fbjs/lib/emptyFunction'); 

while waiting for the next version to come out.

Answer 2

Please use the documentation in the code on how to use SwipeableRow.

I will work on writing documentation that is external to the code as time allows, but there is commenting in the code that should get you started.

The general way to use it is:

1. It's let ds = SwipeableListView.getNewDataSource()
2. Do the usual cloneWithRowsAndSections(..) as you would any other ListView, check the source of SwipeableListView for what params to supply
3. Use SwipeableListView as you would ListView; so same props as ListView with additional props described in SwipeableListView.js. renderRow is the top part that is swipeable, renderQuickActions is the bottom part that is revealed when swiped.

Then you should use it just like you would ListView, i.e. something like <SwipeableListView renderRow={..} renderQuickActions={..} {..someListViewProps} />

That's about it.