Native iOS UITableView for React Native with JSON support and more

Overview

React Native TableView

Native iOS UITableView for React Native with JSON support

npm version npm downloads code style: prettier

Contents

Features

  • Look and feel of iOS TableView - because it is! (with group/plain tableview type, sections headers, etc)
  • Display long lists of data (like country list) with no performance loss
  • Built-in accessory types (checkmark or disclosure indicator)
  • Pull to refresh!
  • Automatic scroll to initial selected value during component initialization (autoFocus property)
  • Automatic item selection with "checkmark" with old item de-selection (optionally), see demo, useful to select country/state/etc.
  • Render Native Section Index Titles (sectionIndexTitlesEnabled property)
  • Native JSON support for datasource. If you need to display large dataset, generated Javascript will became very large and impact js loading time. To solve this problem the component could read JSON directly from app bundle without JS!
  • Filter JSON datasources using NSPredicate syntax. For example you could select states for given country only (check demo)
  • Create custom UITableView cells with flexible height using React Native syntax (TableView.Cell tag)
  • Use TableView as menu to navigate to other screens (check included demo, using react-navigation https://reactnavigation.org)
  • Native editing mode for table - move/delete option is supported by using attributes canMove, canEdit for items/sections

Installation

Using npm:

npm install react-native-tableview --save

or using yarn:

yarn add react-native-tableview

⚠️ If you are on React Native < 0.60.0, you must use version 2.x.x of this library

Pods

If using CocoaPods or React Native version >= 0.60.0

cd ios && pod install && cd ..

Linking

For React Native <= 0.59 only

react-native link react-native-tableview

If fails, follow manual linking steps below,

Manual Linking

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Add ./node_modules/react-native-tableview/RNTableView.xcodeproj
  3. In the XCode project navigator, select your project, select the Build Phases tab and in the Link Binary With Libraries section add libRNTableView.a
  4. And in the Build Settings tab in the Search Paths/Header Search Paths section add $(SRCROOT)/../node_modules/react-native-tableview (make sure it's recursive).

Supported Styles

UITableView styles

These values are provided to the tableViewStyle prop.

<TableView tableViewStyle={TableView.Consts.Style.Grouped}>
Style Value Preview
Plain TableView.Consts.Style.Plain alt text
Grouped TableView.Consts.Style.Grouped alt text

UITableViewCell styles

These values are provided to the tableViewCellStyle prop.

<TableView tableViewCellStyle={TableView.Consts.CellStyle.Default}>
Style Value Preview
Default TableView.Consts.CellStyle.Default alt text
Value1 TableView.Consts.CellStyle.Value1 alt text
Value2 TableView.Consts.CellStyle.Value2 alt text
Subtitle TableView.Consts.CellStyle.Subtitle alt text

Accessory types

These values are provided to the accessoryType prop on the Item.

<Item accessoryType={TableView.Consts.AccessoryType.None}>
Style Value Preview
None TableView.Consts.AccessoryType.None alt text
Disclosure Indicator TableView.Consts.AccessoryType.DisclosureIndicator alt text
Disclosure Button TableView.Consts.AccessoryType.DisclosureButton alt text
Checkmark TableView.Consts.AccessoryType.Checkmark alt text
Detail Button TableView.Consts.AccessoryType.DetailButton alt text

Disclosure Indicator can also be applied by adding the arrow prop on the section.

<Section arrow>

Checkmark can also be applied by adding the selected prop on the Item.

<Item selected>

Props

For a full list of props on all components check out the typescript definitions file.

Methods

scrollTo()

Scrolls to a set of coordinates on the tableview.

/**
  * @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

/**
  * @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 is simply text. A Cell can be any complex component. However, only Items can be edited or moved. There are also issues with Cells re-rendering on data changes (#19) that can be avoided by using Items. If you want to be able to re-render, edit or move a complex component, use reactModuleForCell, described in Editable Complex Components.

Examples

Smooth scrolling with large network loaded list

demo-3

() => {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      const response = await fetch('https://randomuser.me/api/?results=5000');
      const data = await response.json();

      setLoading(false);
      setUsers(
        data.results.map(a => ({
          name: `${a.name.first} ${a.name.last}`,
          id: a.registered,
        }))
      );
    };

    getUsers();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Text style={styles.title}>
        {loading ? 'Fetching' : 'Fetched'} 5000 users
      </Text>

      {loading && <ActivityIndicator />}

      <TableView
        style={{ flex: 1 }}
        tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
      >
        <Section>
          {users.map(a => (
            <Item key={a.id}>{a.name}</Item>
          ))}
        </Section>
      </TableView>
    </View>
  );
};

App-bundled JSON with filter and selected value checkmarked

editing example

// list spanish provinces and add 'All states' item at the beginning

const country = 'ES';

return (
  <View style={{ flex: 1 }}>
    <Text style={styles.title}>Showing States in Spain</Text>
    <TableView
      style={{ flex: 1 }}
      json="states"
      selectedValue="ES53"
      filter={`country=='${country}'`}
      tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
      onPress={event => alert(JSON.stringify(event))}
    />
  </View>
);

Built-in editing

editing example

render() {
  return (
    <View style={{ flex: 1 }}>
      <TableView
        style={{ flex: 1 }}
        editing={navigation.getParam('editing')}
      >
        <Section canMove canEdit>
          <Item canEdit={false}>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>
        </Section>
      </TableView>
    </View>
  )
}

Pull to Refresh

pull to refresh example

function reducer(state, action) {
  switch (action.type) {
    case 'getUsers':
      return { ...state, loading: false, users: action.payload };
    case 'startRefresh':
      return { ...state, refreshing: true };
    case 'endRefresh':
      return {
        ...state,
        refreshing: false,
        amount: state.amount + 10,
        users: [...state.users, ...action.payload],
      };
    default:
      return state;
  }
}

() => {
  const [{ loading, amount, refreshing, users }, dispatch] = useReducer(
    reducer,
    {
      loading: true,
      users: [],
      refreshing: false,
      amount: 10,
    }
  );

  useEffect(() => {
    const getUsers = async () => {
      const data = await fetchUsers();
      dispatch({ type: 'getUsers', payload: data });
    };

    getUsers();
  }, []);

  const fetchUsers = async () => {
    const response = await fetch('https://randomuser.me/api/?results=10');
    const data = await response.json();

    return data.results.map(a => ({
      name: `${a.name.first} ${a.name.last}`,
      id: a.login.uuid,
    }));
  };

  const fetchMore = async () => {
    dispatch({ type: 'startRefresh' });
    const data = await fetchUsers();
    dispatch({ type: 'endRefresh', payload: data });
  };

  return (
    <View style={{ flex: 1 }}>
      <Text style={styles.title}>
        {loading ? 'Fetching' : 'Fetched'} {amount} users
      </Text>

      {loading && <ActivityIndicator />}

      <TableView
        style={{ flex: 1 }}
        tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
        canRefresh
        refreshing={refreshing}
        onRefresh={fetchMore}
      >
        <Section>
          {users.map(a => (
            <Item key={a.id}>{a.name}</Item>
          ))}
        </Section>
      </TableView>
    </View>
  );
};
}

Customization

The following style props are supported:

  • tableViewCellStyle
  • tableViewCellEditingStyle
  • separatorStyle
  • contentInset
  • contentOffset
  • scrollIndicatorInsets
  • cellLayoutMargins
  • cellSeparatorInset

Colors:

  • textColor
  • tintColor
  • selectedTextColor
  • detailTextColor
  • separatorColor
  • headerTextColor
  • headerBackgroundColor
  • footerTextColor

Base font:

  • fontSize
  • fontWeight
  • fontStyle
  • fontFamily

"Subtitle" font:

  • detailFontSize
  • detailFontWeight
  • detailFontStyle
  • detailFontFamily

Header font:

  • headerFontSize
  • headerFontWeight
  • headerFontStyle
  • headerFontFamily

Footer font:

  • footerFontSize
  • footerFontWeight
  • footerFontStyle
  • footerFontFamily

Images / Icons

An Item component takes an image and an optional imageWidth prop.

An image prop can be a string pointing to the name of an asset in your "Asset Catalog". In this case an imageWidth prop is recommended.

<Item image="icon-success.png" imageWidth={40} />

Alternatively, you can require the image from your local app code. In this case an imageWidth is unnecessary.

<Item image={require('../images/icon-success.png')} />

Editable Complex Components

Only Items can be edited or moved. However you can create a complex component that is referenced by an Item using reactModuleForCell. You will need to do several things to set this up.

  1. Write your view component.
  2. Pass the name of your view component as a prop in your <TableView> component.
  3. Create a list of <Item>s in your TableView, passing props intended for your view component.
  4. Register your view component as an App root view.

Write your cell view component.

For example,

//Should be pure... setState on top-level component doesn't seem to work

class TableViewExampleCell extends React.Component {
  render() {
    var style = { borderColor: '#aaaaaa', borderWidth: 1, borderRadius: 3 };

    // Fill the full native table cell height.
    style.flex = 1;

    // All Item props get passed to this cell inside this.props.data. Use them to control the rendering, for example background color:
    if (this.props.data.backgroundColor !== undefined) {
      style.backgroundColor = this.props.data.backgroundColor;
    }

    return (
      <View style={style}>
        <Text>
          section:{this.props.section},row:{this.props.row},label:
          {this.props.data.label}
        </Text>
        <Text> message:{this.props.data.message}</Text>
      </View>
    );
  }
}

For more examples, see examples/TableViewDemo.

Pass component as prop.

<TableView reactModuleForCell="TableViewExampleCell" >

Create list of items, passing props

<Section canEdit={true}>
  {this.props.items.map(function(item) {
    return (
      <Item
        key={'i' + item.data.date}
        label={item.label}
        message={item.message}
      />
    );
  })}
</Section>

Note that the props you pass must be primitive types: they cannot be objects. Also, note that the props become properties of the data prop in your reactModuleForCell component. That is, you pass label="foo" and in your component you pick it up as this.props.data.label.

Register your component.

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

var { AppRegistry } = React;

...

AppRegistry.registerComponent('TableViewExample', () => TableViewExample);

When debugging, you will see the message:

Running application "TableViewExample" with appParams: { /* params */ }. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

multiple times. While slightly annoying, this does not seem to affect performance. You may also see message Unbalanced calls start/end for tag 5.

Issues
  • enhancement - allow custom reusable cells

    enhancement - allow custom reusable cells

    backwards compatible, but intended to replace <Cell> custom cells; examples are in TableViewDemo (LargeTableExample and FirebaseExample). Fixes issues with loading large data sets (#22) and re-rendering custom cells on data changes (#19).

    Usage: instead of Cell's, use reactModuleForCell prop:

    class LargeTableExample extends React.Component {
        render() {
            var numItems = 1000;
            var items = [];
            for (var i = 0; i < numItems; ++i) {
                items.push(i);
            }
            //Item can have any string/number fields that will be passed to your reactModuleForCell component.
            //However some fields are already used internally by the native table/cells: 
            //   height, selected, transparent, width, canEdit, canMove.
            return (
                <TableView reactModuleForCell="TableViewExampleCell" style={{flex:1}}>
                    <Section label={numItems+" items"} arrow={true}>
                        {items.map((i)=><Item key={i+1} custField1={"item "+i} height={50}/>)}
                    </Section>
                </TableView>
            );
        }
    }
    class TableViewExampleCell extends React.Component {
        render(){
            var style = {};
            if (this.props.data.height !== undefined) {
                style.height = this.props.data.height;
            } else {
                style.flex = 1;
            }
            if (this.props.data.backgroundColor !== undefined) {
                style.backgroundColor = this.props.data.backgroundColor;
            }
            return (<View style={style}><Text>{this.props.data.custField1}</Text></View>);
        }
    }
    
    //Need to register the cell component so it can be rendered as a root view - this is the key 
    //to letting ios control the lifetime of the cells while react just renders into them on demand.
    AppRegistry.registerComponent('TableViewExampleCell', () => TableViewExampleCell);
    
    opened by nyura123 27
  • React 16 Compatibility

    React 16 Compatibility

    opened by hnryjms 20
  • Error on setState and re-render when using Cell

    Error on setState and re-render when using Cell

    setState and re-rendering works when you use <Item></Item> but when i use <Cell> , i get the following error

    Exception thrown while executing UI block: removedChildren count (0) was not what we expected (7)
    
    2015-10-10 13:37:43.753 AppName[1670:38654] *** Assertion failure in -[RCTUIManager _childrenToRemoveFromContainer:atIndices:](), /Users/Username/Sites/AppName/node_modules/react-native/React/Modules/RCTUIManager.m:622
    2015-10-10 13:37:43.761 [error][tid:main][RCTUIManager.m:887] Exception thrown while executing UI block: removedChildren count (0) was not what we expected (7)
    2015-10-10 13:37:43.824 AppName[1670:38654] *** Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 13 beyond bounds [0 .. 12]'
    *** First throw call stack:
    (
        0   CoreFoundation                      0x014e3a94 __exceptionPreprocess + 180
        1   libobjc.A.dylib                     0x00730e02 objc_exception_throw + 50
        2   CoreFoundation                      0x013afeb3 -[__NSArrayM objectAtIndex:] + 243
        3   CoreFoundation                      0x01428958 -[NSArray objectAtIndexedSubscript:] + 40
        4   AppName                  0x000505af -[RNTableView dataForRow:section:] + 159
        5   AppName                  0x0004fef2 -[RNTableView tableView:cellForRowAtIndexPath:] + 226
        6   UIKit                               0x02ea2b91 -[UITableView _createPreparedCellForGlobalRow:withIndexPath:willDisplay:] + 782
        7   UIKit                               0x02ea2cbf -[UITableView _createPreparedCellForGlobalRow:willDisplay:] + 90
        8   UIKit                               0x02e72518 -[UITableView _updateVisibleCellsNow:isRecursive:] + 3317
        9   UIKit                               0x02e92716 __29-[UITableView layoutSubviews]_block_invoke + 52
        10  UIKit                               0x02eaca18 -[UITableView _performWithCachedTraitCollection:] + 88
        11  UIKit                               0x02e92684 -[UITableView layoutSubviews] + 214
        12  UIKit                               0x02dea16b -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 813
        13  libobjc.A.dylib                     0x00745059 -[NSObject performSelector:withObject:] + 70
        14  QuartzCore                          0x02a1460c -[CALayer layoutSublayers] + 144
        15  QuartzCore                          0x02a0828e _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 388
        16  QuartzCore                          0x02a080f2 _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 26
        17  QuartzCore                          0x029fac2b _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 317
        18  QuartzCore                          0x02a2ec23 _ZN2CA11Transaction6commitEv + 589
        19  QuartzCore                          0x02a2f4d6 _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 92
        20  CoreFoundation                      0x013fd77e __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 30
        21  CoreFoundation                      0x013fd6de __CFRunLoopDoObservers + 398
        22  CoreFoundation                      0x013f305c __CFRunLoopRun + 1340
        23  CoreFoundation                      0x013f2866 CFRunLoopRunSpecific + 470
        24  CoreFoundation                      0x013f267b CFRunLoopRunInMode + 123
        25  GraphicsServices                    0x05177664 GSEventRunModal + 192
        26  GraphicsServices                    0x051774a1 GSEventRun + 104
        27  UIKit                               0x02d24cc1 UIApplicationMain + 160
        28  AppName                  0x00034c4a main + 138
        29  libdyld.dylib                       0x049e9a21 start + 1
        30  ???                                 0x00000001 0x0 + 1
    )
    libc++abi.dylib: terminating with uncaught exception of type NSException
    (lldb) 
    

    My render function looks like this

    <TableView style={{flex:1}}                       
           tableViewCellStyle={TableView.Consts.CellStyle.Default}
           onPress={this._onPress}                       
        >
        <Section 
            arrow={true}
            >
            {this.state.DocumentStore.docs.map(function(doc){
                return (
                    <Cell>
                        <Text>{doc.name}</Text>
                    </Cell>
                )
            })}
        </Section>
    
    </TableView>
    
    bug help wanted 
    opened by rmdort 11
  • Use `RCTComponentEvent` for React Native 0.60

    Use `RCTComponentEvent` for React Native 0.60

    Summary

    React Native 0.60 removes some deprecated stuff -> https://github.com/facebook/react-native/commit/41343f6a7305cc82c412898139c46c01047f3399

    Impact

    This will be a breaking change.

    enhancement 
    opened by robertying 10
  • 2.0

    2.0

    Massive cleanup and refractor of the project.

    Still to do

    • [x] Finish update example
    • [x] Props table to show available props
    • [x] Update readme with new example gifs and images to make features clearer
    • [x] Finish update prop defaults and eslint

    Maybe

    • [x] Typescript definitions
    enhancement 
    opened by iRoachie 9
  • Added option for no tableViewStyle

    Added option for no tableViewStyle

    Sometimes, we might want to have no tableViewStyle

    opened by gabrielbull 8
  • Fix for React.createClass

    Fix for React.createClass

    React 0.15.5 deprecated React.createClass and will be removed completely in a newer version of react. Since [email protected], this now shows as an error when the apps are running. https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings

    The React team has provided a drop-in replacement for React.createClass as a separate library called "create-react-class".

    This PR replaces React.createClass with createReactClass

    opened by iRoachie 8
  • Contributors wanted!

    Contributors wanted!

    Developers! I'm glad that this component is so popular and thanks for great feedback about it, i did my best to fix issues to make it component more robust, however i don't have currently much time to work on suggested enhancements. If anyone is willing to help, let me know, I will add you as collaborator to the project.

    help wanted 
    opened by aksonov 8
  • undefined is not an object (evaluating '_reactNative.NativeModules.RNTableViewManager.Constants')

    undefined is not an object (evaluating '_reactNative.NativeModules.RNTableViewManager.Constants')

    Version 2.4.1

    undefined is not an object (evaluating '_reactNative.NativeModules.RNTableViewManager.Constants')

    • [ ]
    help wanted 
    opened by davesherratt 8
  • Section Index Title Scrolling

    Section Index Title Scrolling

    Fixes #125

    • Added ability to render native Section Index Title scrolling functionality. This exposes a new boolean prop called sectionIndexTitlesEnabled

    • Fixed bug I noticed with the allowsMultipleSelection feature where, when set to false, you could only select one element in a section as intended, but selecting an option under a different section would not deselect the original.

    • Fixed a bug in RNTableView/RNAppGlobals.h that would cause the build to fail when running on a mac with a case-sensitive file system.

    opened by gensc004 8
  • onPress on Item doesn't work in edit mode

    onPress on Item doesn't work in edit mode

    onPress on Item doesn't work in edit mode though I tried to add allowsSelectionDuringEditing={true} props

          <TableView
            style={{height: 100, borderWidth: 1}}
            scrollEnabled={false}
            allowsSelectionDuringEditing={true} // <----
            tableViewStyle={Consts.Style.Grouped}
            tableViewCellStyle={Consts.CellStyle.Value1}>
            <Section label={'Section 1'}>
              <Item detail="Detail" accessoryType={Consts.AccessoryType.DisclosureIndicator} onPress={onPressHome}>
                {'Home'}
              </Item>
            </Section>
            <Section canMove canEdit label={'Section 2'}>
              <Item>Item 1</Item>
              <Item>Item 2</Item>
              <Item>Item 3</Item>
              <Item>Item 4</Item>
            </Section>
          </TableView>
    

    I thought allowsSelectionDuringEditing will make the Item clickable although in edit mode. Do I misunderstand the meaning?

    opened by Great-hijack 0
  • 63 and M1 support

    63 and M1 support

    • Add React-Native 0.63 support
    • Built on an M1 machine
      • I could only pod install properly by setting the x86 platform on the CocoaPod command. This might not be required in the future or with different settings
      • Upgraded README with M1 build steps

    https://user-images.githubusercontent.com/48299693/128539471-92d5425d-7529-4708-8acc-b6096bdbe0b7.mov

    opened by HeyImChris 0
  • An Update on the Future

    An Update on the Future

    Hey team,

    You may have noticed that I haven't published any new updates or replied to issues/PRs for some time. I'm no longer actively involved in the react-native community as my day-to-day work has shifted, and I no longer have the time to keep this library up to date.

    You would already know that I'm not the "admin" of this repo (just have write access), that's still @aksonov, so I'm unable to assign permissions of this repo.

    This issue mainly serves to inform you all of the expectations.

    opened by iRoachie 0
  • It's possible to animate rows adding?

    It's possible to animate rows adding?

    I mean the ios native animation on pushing a new row, also it's possible to add some custom content on sections

    Example:

    IMG_3007

    This is an example of a section with an activity indicator taken from iPhone Wi-Fi settings view

    opened by emberist 0
  • Table not visible in Dark Mode

    Table not visible in Dark Mode

    Using the (corrected) simple example from https://github.com/aksonov/react-native-tableview/issues/214#issuecomment-631751644:

          <View style={{ flex: 1 }}>
            <TableView style={{ flex: 1 }} >
              <Section label="Section 1">
                <Item key={1}>Item 1</Item>
                <Item key={2}>Item 1</Item>
                <Item key={3}>Item 1</Item>
                <Item key={4}>Item 1</Item>
                <Item key={5}>Item 1</Item>
                <Item key={6}>Item 1</Item>
                <Item key={7}>Item 1</Item>
              </Section>
            </TableView>
          </View>
    

    the items are not visible except for the section header and the separators as shown in the screenshot below. When you touch an item, it appears in dark (reverse) color, as shown in the second screenshot.

    I tried adding the transparent prop to the <Item> as suggested in #210, but that has no effect. image

    image

    opened by chetstone 5
  • Is it possible to reduce 'dragging' shadow opacity?

    Is it possible to reduce 'dragging' shadow opacity?

    Right now, when sorting items - dragged one have quite strong shadow. It's not really matching my app style. I'd like to strongly reduce this shadow opacity or even remove shadow at all.

    Is it possible?

    opened by pie6k 0
  • Resize cell height

    Resize cell height

    Hello, I'm trying to implement custom cells and am unable to change the cell heights. In the documentation you mention being able to manipulate cell heights, but I am not seeing a way to do that. The cells are always the same narrow height of the basic table cell. Help would be much appreciated

    opened by AdamMoffitt 1
  • Table background color is white in dark mode on iOS 13

    Table background color is white in dark mode on iOS 13

    Hi.

    On iOS 13, the whole table background color is white in dark mode and I can't seem to be able to change it:

    image

    When I press on each item, it seems the pressed color and text colors are correct:

    Screenshot 2019-12-13 at 0 59 09

    Is there anyway to fix this behavior?

    opened by sallar 1
  • Need help in creating new component library

    Need help in creating new component library

    Hi,

    This issue is not related to 'react-native-tableview'.
    We are creating a new private component library for our organization. I tried the following:

    1. Component library itself as a separate project with react and react-native as peer dependencies in my project.
    2. But having just the components code in component library is not useful because we have to add new code or fixes and we have to run the story book(Because of peer dependencies could not be able run story book).

    Could you please help me with the model I have to follow for creating a react native library?

    Thank you in advance.

    question 
    opened by sureshsamanthapudi 1
  • Updated edit behavior of TableView item

    Updated edit behavior of TableView item

    • Added support for edit and custom edit button title on editing(swipe) of TableView item.
    opened by parveen-bhatia 1
Releases(3.1.0)
  • 3.1.0(Jan 4, 2021)

    Features

    • Adds allowsSelectionDuringEditing prop https://github.com/aksonov/react-native-tableview/commit/59f8b72b2ab44e11cdd5e16b00958ca8a7f811c0 @Wolfenberg
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(Aug 30, 2019)

    🚨 Breaking Changes

    Version 3.0.0 is a breaking change and will not work if you are using react-native < 0.60.0. If you are still on a lower version, then keep on the 2.x.x releases. Fixes will still be supported for the 2.x.x releases, and features if possible will be backported.

    Features

    • Enables support for react-native >= 0.60.0 https://github.com/aksonov/react-native-tableview/commit/bd65e1aeba25cb96e18ee17de1ef43e1bc60f79d @robertying
    Source code(tar.gz)
    Source code(zip)
  • 2.6.1(Aug 7, 2019)

    Fixes

    • Removes usage of componetWillReceiveProps since deprecated https://github.com/aksonov/react-native-tableview/commit/7c64cd7d8256c768775c17e19bc53b650a6293ce @iRoachie

    Other

    • Examples and Readme now use hooks for examples
    • Update libraries around react-navigation in the example app
    Source code(tar.gz)
    Source code(zip)
  • 2.6.0(Jul 2, 2019)

    • Export types from typescript
    • Allow correct github url for cocoapods use https://github.com/aksonov/react-native-tableview/commit/3c67f4f62dd1d5f3fdf117544a1250c19a7e2329 @n-kumari
    Source code(tar.gz)
    Source code(zip)
  • 2.5.0(Jan 17, 2019)

    Features

    • Pass origin of selected cell in onPress callback https://github.com/aksonov/react-native-tableview/commit/54985702bdc8e574c71ca8796a9fba1bfb242d06 @emielvanliere
    Source code(tar.gz)
    Source code(zip)
  • 2.4.1(Nov 12, 2018)

    Fixes

    • (types) Make cellSeparatorInset, cellLayoutMargins optional https://github.com/aksonov/react-native-tableview/commit/0e246c9dc7a9e141f3ab23a728747c2c14fd3162 @iRoachie
    • (types) Add transparent prop to ItemProps interface https://github.com/aksonov/react-native-tableview/commit/719108735ad0f112994cf49f6722da05e74763cb @iRoachie
    Source code(tar.gz)
    Source code(zip)
  • 2.4.0(Sep 28, 2018)

    Insert Mode Handling

    simulator screen shot - iphone 6 - 2018-09-28 at 00 43 20

    Features

    • Add headerBackgroundColor prop https://github.com/aksonov/react-native-tableview/commit/5ad3df21abb6c8c6c7ca5ba922c44cc6e4512720 @hxiongg
    • Add Insert mode handling (UITableViewCellEditingStyleInsert) https://github.com/aksonov/react-native-tableview/commit/b22d927e1616698495143d4ba4cdcf7231ca7651 @damikdk

    Other

    • Update example app to latest react-native template https://github.com/aksonov/react-native-tableview/commit/32a649e64ae333ee5482776627be04649971072a @iRoachie
    Source code(tar.gz)
    Source code(zip)
  • 2.3.1(Jul 25, 2018)

  • 2.3.0(Jul 22, 2018)

    Breaking changes

    • Deprecate emptyInsets to cellSeparatorInset and cellLayoutMargins for more customization https://github.com/aksonov/react-native-tableview/commit/e63c31edb12ef4578e2e28c7b295638648b52aab @gabrielbull

    Features

    • Adds selectionStyle to TableItem https://github.com/aksonov/react-native-tableview/commit/442fe009408a0c89c8b33123c132ef72fea8e32a @gabrielbull

    Fixes

    • alwaysBounceVertical now works as expected https://github.com/aksonov/react-native-tableview/commit/137cc85942647f33e60e912623fb80a06d72bd1f @gabrielbull
    • Correct typescript definiton for scrollIndicatorInsets and contentInset https://github.com/aksonov/react-native-tableview/commit/d9c7a7bc792cbbf5b02c620198aab948eb501ed7 @gabrielbull
    Source code(tar.gz)
    Source code(zip)
  • 2.2.0(May 30, 2018)

  • 2.1.1(May 29, 2018)

  • 2.1.0(Jan 24, 2018)

    Features

    • Added pull to refresh https://github.com/aksonov/react-native-tableview/commit/4ebb5e6c800de4079f1430573fdcb8a59ca6873e by @iRoachie
    Source code(tar.gz)
    Source code(zip)
  • 2.0.1(Jan 7, 2018)

    Bug Fixes

    • Fast-Rendering Issues with onScroll() https://github.com/aksonov/react-native-tableview/commit/b89bcf5361ae841292b496438ceb27f667a0913c @hnryjms
    • Fixed selectedValue correct propType https://github.com/aksonov/react-native-tableview/commit/b89bcf5361ae841292b496438ceb27f667a0913c @hnryjms
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0(Dec 21, 2017)

    2.0 is massive cleanup and update of the library. We now support the latest version of react native πŸŽ‰

    List of improvements

    • Flatter file structure for easier edits
    • Prettier/ESLint for code quality
    • Listing of all available props through Typescript Definitions
    • Updated all the examples in the example app (now uses up to date version of react native)
    • Update README examples and prop support with images and gifs

    Bug Fixes

    • Fixed section titles always showing
    • Upgraded sendEventWithName(deprecated) to RCTBubblingBlock
    • onAccessoryPress on Item now works

    Thanks to all those who contributed to this library previous to this release πŸ‘πŸ½

    Source code(tar.gz)
    Source code(zip)
  • 1.7.0(Jan 14, 2017)

  • 1.3.3(Oct 5, 2015)

  • 1.2.0(Sep 17, 2015)

  • 1.1.4(Sep 7, 2015)

  • 1.1.2(Aug 29, 2015)

  • 1.1.0(Aug 24, 2015)

  • 1.0.4(Aug 19, 2015)

    • Fix compilation problems with TableViewDemo example project
    • Simplify onPress event parameter - now it contains selected item data plus selectedIndex and selectedSection.
    Source code(tar.gz)
    Source code(zip)
  • 1.0.2(Aug 19, 2015)

  • 1.0.1(Aug 18, 2015)

Owner
Pavel Aksonov
Pavel Aksonov
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jack Lam 2k Jan 14, 2022
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 244 Dec 29, 2021
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

react-native-snap-carousel ✨ Some great news for you, fellow plugin user! ?? Head over there now to learn more about all the goodness that's coming yo

Meliorence 9.2k Jan 21, 2022
πŸŽ‰ toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 24 Jan 21, 2022
React Native Carousel control with support for iOS and Android

React Native Carousel Control React Native Carousel with support for both iOS and Android. React >= 16 -> 2.x.x React < 16 -> 1.x.x Installation npm i

Gustavo Machado 239 Dec 23, 2021
iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping

react-native-image-crop-picker iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping Result

Ivan Pusic 5.3k Jan 21, 2022
Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

衡東澔 534 Jan 22, 2022
πŸ’ƒπŸ» Display Animated WebP images in React Native the hacky way, support for Android & iOS both

???? react-native-animated-webp Display and control Animated WebP images in React Native the hacky way ?? Installation ?? PeerDependencies first This

Junho Yeo 9 Oct 3, 2021
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
react-native-egg make your react native app infinitely more fun !!

react-native-egg react-native-egg make your react native app infinitely more fun !! Implementation simple gestures detection achieve trigger easter eg

FuYaoDe 257 Dec 3, 2021
The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More will be implemented.

react-native-beautiful-image The Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More w

Hau Vo 60 Oct 19, 2020
Local and remote media gallery with captions, selections and grid view support for react native.

React Native Photo Browser Information A full screen image gallery with captions, selections and grid view support for react-native. Layout and API de

Halil Bilir 707 Jan 14, 2022
πŸ“±βš› πŸ”„ The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.

?? About ?? Getting started ?? Usage ?? Properties ?? Demo ?? Contributing ?? License About People want to see all the details of a product before the

Rodrigo Gonçalves S. 107 Jan 12, 2022
Awesome react-native cell components! From a Cell to more complex & awesome components.

RN Cell Components RN 0.60+ and up? Support for RN 0.60 is limited as the moment due to compatibility issues specially the deprecated ListView. Suppor

Jovanni Lo 175 Dec 28, 2021
Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.

react-native-TouchableSetActive Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for bu

Jeff Stout 30 Mar 11, 2020
Tab bar with more freedom

react-native-tabbar React-Native Tab bar with more freedom Introduction I have decided to remove all the abstraction from this module. Now there is on

Ali Najafizadeh 263 May 25, 2021
A tinted overlay that allows one or more elements to be highlighted (non-tinted).

A tinted overlay that allows one or more elements to be highlighted (non-tinted).

Jesper Sporron 1 Oct 18, 2021