2.2.0 #167 from aksonov/next

Author: iRoachie

README.md

@@ -126,7 +126,7 @@ section.
 <Section arrow>
 ```
 
-Checkamrk can also be applied by adding the `selected` prop on the Item.
+Checkmark can also be applied by adding the `selected` prop on the Item.
 
 ```jsx
 <Item selected>
@@ -137,6 +137,36 @@ Checkamrk can also be applied by adding the `selected` prop on the Item.
 For a full list of props on all components check out
 [the typescript definitions file](./src/index.d.ts).
 
+
+### Methods
+
+#### `scrollTo()`
+
+Scrolls to a set of coordinates on the tableview.
+
+```ts
+/**
+  * @param x Horizontal pixels to scroll
+  * @param y Vertical pixels to scroll
+  * @param animated With animation or not
+  */
+  scrollTo(x: number, y: number, animated: boolean): void;
+```
+
+#### `scrollToIndex()`
+
+Scroll to an item in a section
+
+```ts
+/**
+  * @param params scroll params
+  * @param params.index index of the cell
+  * @param params.section index of the section @default 0
+  * @param params.animated scroll with animation @default true
+  */
+  scrollToIndex(params: { index: number, section?: number, animated?: boolean }): void;
+```
+
 ### List item format
 
 Items in the list can be either `TableView.Item` or `TableView.Cell`. An `Item`
@@ -366,7 +396,7 @@ Catalog". In this case an `imageWidth` prop is recommended.
 ;<Item image="icon-success.png" imageWidth={40} />
 ```
 
-Alernatively, you can `require` the image from your local app code. In this case
+Alternatively, you can `require` the image from your local app code. In this case
 an `imageWidth` is unnecessary.
 
 ```jsx

RNTableView.podspec

@@ -1,14 +1,14 @@
 Pod::Spec.new do |s|
 
   s.name         = "RNTableView"
-  s.version      = "2.1.1"
+  s.version      = "2.2.0"
   s.authors      = "Pavel Aksonov"
   s.summary      = "Native iOS UITableView for React Native with JSON support and more"
   s.license      = "BSD 2-Clause"
   s.homepage     = "https://github.com/aksonov/react-native-tableview"
   s.platform     = :ios, "7.0"
   s.source       = { :git => "https://github.com/aksonov/react-native-tableview.git",
-                     :tag => "2.1.1" }
+                     :tag => "2.2.0" }
   s.source_files = 'RNTableView/*.{h,m}'
   s.preserve_paths = "**/*.js"
   s.dependency 'React'

RNTableView/RNTableView.h

@@ -87,5 +87,6 @@
 - (void)stopRefreshing;
 - (void)startRefreshing;
 - (void)scrollToOffsetX:(CGFloat)x offsetY:(CGFloat)y animated:(BOOL)animated;
+- (void)scrollToIndex:(NSInteger)index section:(NSInteger)section animated:(BOOL)animated;
 
 @end

RNTableView/RNTableView.m

@@ -256,6 +256,13 @@ -(void)stopRefreshing {
     [self.tableView.refreshControl endRefreshing];
 }
 
+-(void)scrollToIndex: (NSInteger)index section:(NSInteger)section animated:(BOOL)animated {
+    if ([self.tableView numberOfRowsInSection:section] > index) {
+        NSIndexPath *newIndexPath = [NSIndexPath indexPathForRow:index inSection:section];
+        [self.tableView scrollToRowAtIndexPath:newIndexPath atScrollPosition:UITableViewScrollPositionTop animated:animated];
+    }
+}
+
 
 -(void)setHeaderHeight:(float)headerHeight {
     _headerHeight = headerHeight;

RNTableView/RNTableViewManager.m

@@ -288,4 +288,20 @@ - (NSDictionary *)constantsToExport {
      }];
 }
 
+RCT_EXPORT_METHOD(scrollToIndex:(nonnull NSNumber *)reactTag
+                  index:(NSInteger)index
+                  section:(NSInteger)section
+                  animated:(BOOL)animated)
+{
+    [self.bridge.uiManager addUIBlock:
+     ^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry){
+         RNTableView *tableView = viewRegistry[reactTag];
+         
+         if ([tableView isKindOfClass:[RNTableView class]]) {
+             [tableView scrollToIndex:index section:section animated:animated];
+         } else {
+             RCTLogError(@"Cannot scrollToIndex: %@ (tag #%@) is not RNTableView", tableView, reactTag);
+         }
+     }];
+}
 @end

example/package.json

@@ -5,15 +5,14 @@
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest",
-    "postinstall":
-      "rm -rf node_modules/react-native-tableview/node_modules node_modules/react-native-tableview/example"
+    "postinstall": "rm -rf node_modules/react-native-tableview/node_modules node_modules/react-native-tableview/example"
   },
   "dependencies": {
     "prop-types": "^15.6.0",
     "react": "16.0.0",
     "react-native": "0.50.4",
     "react-native-tableview": "file:..",
-    "react-navigation": "^1.0.0-beta.21"
+    "react-navigation": "^2.0.4"
   },
   "devDependencies": {
     "babel-jest": "21.2.0",

example/src/index.js

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native'
-import { StackNavigator } from 'react-navigation'
+import { createStackNavigator } from 'react-navigation';
 import Home from './screens/Home'
 import Example1 from './screens/Example1'
 import Example2 from './screens/Example2'
@@ -8,10 +8,11 @@ import Example4 from './screens/Example4'
 import Example5 from './screens/Example5'
 import Example6 from './screens/Example6'
 import Example7 from './screens/Example7'
+import Example8 from './screens/Example8'
 
 import TableViewExampleCell from './cells/TableViewExampleCell'
 
-const Stack = StackNavigator(
+const Stack = createStackNavigator(
   {
     home: {
       screen: Home,
@@ -61,6 +62,12 @@ const Stack = StackNavigator(
         title: 'Pull to Refresh',
       },
     },
+    index: {
+      screen: Example8,
+      navigationOptions: {
+        title: 'Scroll to Index',
+      },
+    },
   },
   {
     navigationOptions: {

example/src/screens/Example8.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Button, View } from 'react-native'
+import TableView from 'react-native-tableview'
+
+const { Section, Item } = TableView
+
+class Example8 extends React.Component{
+  render() {
+    return(
+      <View style={{flex: 1}}>
+
+        <Button title="Scroll To Section 2" onPress={() => this.tableView.scrollToIndex({index: 2, section: 1})} />
+
+        <TableView
+          style={{ flex: 1 }}
+          allowsToggle
+          ref={ref => this.tableView = ref}
+          allowsMultipleSelection
+          tableViewStyle={TableView.Consts.Style.Grouped}
+          tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
+          onPress={event => console.log(event)}
+        >
+          <Section label="Section 1" arrow>
+            <Item value="1" detail="Detail1">
+              Item 1
+            </Item>
+            <Item value="2">Item 2</Item>
+            <Item>Item 3</Item>
+          </Section>
+      
+          <Section label="Section 2" arrow={false}>
+            <Item>Item 1</Item>
+            <Item>Item 2</Item>
+            <Item>Item 3</Item>
+          </Section>
+      
+          <Section label="Section 3" arrow={false}>
+            <Item>Item 1</Item>
+            <Item>Item 2</Item>
+            <Item>Item 3</Item>
+            <Item>Item 4</Item>
+            <Item>Item 5</Item>
+            <Item>Item 6</Item>
+            <Item>Item 7</Item>
+            <Item>Item 8</Item>
+            <Item>Item 9</Item>
+            <Item>Item 10</Item>
+          </Section>
+        </TableView>
+      </View>
+    )
+  }
+} 
+
+export default Example8

example/src/screens/Home.js

@@ -27,6 +27,7 @@ const App = ({ navigation }: NavigationScreenConfigProps) => {
         <Item onPress={() => navigate('custom')}>Custom Cells</Item>
         <Item onPress={() => navigate('edit', { editing: true })}>Editing mode</Item>
         <Item onPress={() => navigate('refresh')}>Pull to Refresh</Item>
+        <Item onPress={() => navigate('index')}>Scroll To Index</Item>
       </Section>
     </TableView>
   )