React Native TableView

Native iOS UITableView for React Native

## Title ## Contents

• Contents
• Features
• Installation
  • Pods
• Examples
  • Register your component.
  • Diff

Features

• Use native iOS TableView
• Display long lists of data with no performance loss
• Support mutable cells
• Wrapper cell with Redux and custom context.
• Diff data source changes to refresh tableview

Installation

Using npm:

npm install js.react-native-tableview --save

or using yarn:

yarn add js.react-native-tableview

Pods

cd ios && pod install && cd ..

Examples

const App: () => React$Node = () => {
  const [theme, setTheme] = useState({ theme: "#FFE4C4" });
  const [ds, setDs] = useState([ e1, e2, e5, e7 ]);

  useEffect(() => {
    setInterval(() => {
      const idx = Math.floor(Math.random() * 10) % 6;
      setTheme(themes[idx]);
    }, 3000);
  }, []);

  useEffect(() => {
    setTimeout(() => {
      setDs([ e0, e1, e2, e3, e4, e5, e6, e7 ]);
    }, 3000);
  }, []);

  return (
    <Provider store={store}>
      <ThemeContext.Provider value={theme}>
        <View style={{ flex: 1 }}>
          <StatusBar barStyle="dark-content" />
          <SafeAreaView style={{ flex: 1 }}>
            <FlatList
              style={{ flex: 1 }}
              data={ds}
              heightForItemAtIndex={(_, idx) => 100}
              reuseIdentifierForItemAtIndex={(item, idx) => {
                return 'TextCell';
              }}
              keyExtractor={(e) => e.title}
              otherContext={ThemeContext}
            />
          </SafeAreaView>
        </View>
      </ThemeContext.Provider>
    </Provider>
  );
};

Register your component.

Each cell you render becomes a reuseable root view or App.

regisgerCell(store, ThemeContext)(SwitchCell)("SwitchCell");

Diff

• https://github.com/mcudich/HeckelDiff/blob/master/Source/Diff.swift
• https://gist.github.com/ndarville/3166060
• http://documents.scribd.com/docs/10ro9oowpo1h81pgh1as.pdf