purii / react-native-tableview-simple Goto Github PK

View Code? Open in Web Editor NEW

529.0 529.0 62.0 7.68 MB

Flexible and lightweight React Native component for UITableView made with pure CSS

Home Page: https://snack.expo.io/@purii/react-native-tableview-simple

License: MIT License

JavaScript 19.59% Java 10.48% Objective-C 7.41% Ruby 8.95% Starlark 1.02% TypeScript 52.56%

css ios javascript react react-native tableview uitableview

react-native-tableview-simple's Introduction

react-native-tableview-simple's People

Contributors

Stargazers

Watchers

react-native-tableview-simple's Issues

insetLeft, insetRight issue on Separator component

I'm trying to use the Separator component and customize the insetLeft prop but remains a white straight line on the width insetLeft setting. I think it's some issue on the backgroundColor in Separator.tsx. Defining it to "transparent" solves my issue of constantly setting backgroundColor="transparent" though. This issue pop up because I'm using a dark theme.

const Separator: React.FC<SeparatorInterface> = ({
  backgroundColor = '#FFF',  // Here I'm using 'transparent'
  tintColor = '#C8C7CC',
  isHidden = false,
  insetLeft = 15,
  insetRight = 0,
  withSafeAreaView = Platform.OS === 'ios'
    ? parseInt(`${Platform.Version}`, 10) <= 10
      ? false
      : true
    : true,
}) => {
  const localStyles = {
    separator: [styles.separator, { backgroundColor: backgroundColor }],
    separatorInner: [
      styles.separatorInner,
      {
        backgroundColor: isHidden ? 'transparent' : tintColor,
        marginLeft: insetLeft,
        marginRight: insetRight,
      },
    ],
  };

  if (withSafeAreaView) {
    return (
      <SafeAreaView style={localStyles.separator}>
        <View style={localStyles.separatorInner} />
      </SafeAreaView>
    );
  }
  return (
    <View style={localStyles.separator}>
      <View style={localStyles.separatorInner} />
    </View>
  );
};

const styles = StyleSheet.create({
  separator: {},
  separatorInner: {
    height: StyleSheet.hairlineWidth,
  },
});

An in-range update of react-native is breaking the build 🚨

The dependency react-native was updated from `0.57.2` to `0.57.4`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Commits

The new version differs by 62 commits.

4681612 [0.57.4] Bump version numbers
7a766bf [LOCAL COMMIT] Make google repo priority higher than jcenter (inspired by PR#21910)
ef835b5 Android textTransform style support (#20572)
05a036d Cleaning up imports in ViewGroupManager
581a6e8 Add deprecation notice to SwipeableListView
356fcf0 Relax the requirement that lazy module cannot be initialized on the main thread
8323513 Allow specifying iOS version for run-ios with simulator option (#19079)
be39e8a Fix onTextLayout metrics on Android when using alignText
30bf655 Use TextLegend example in Android as well
1e3eb9c Android: Send metrics in onTextLayout events
346309e Text: send metrics after rendering (iOS)
fd781c3 Bump [email protected] (#21766)
e27d88f Fix issue when inserting text at 0 when maxLength is set
ac3b236 Back out "[react-native][PR] Rounded corner rendering fixed on Android N."
abbad55 ListView requestAnimationFrame leak (#21802)

There are 62 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Text lacks selectable prop

As of react native v0.39, <Text> elements can be made selectable on iOS. <Cell> should allow for selectable={true} to be set within inner <Text> elements.

http://facebook.github.io/react-native/releases/0.39/docs/text.html#selectable

Dependencies is really 0.27.0-rc or this is a typo for 0.26.0-rc?

Currently this is in package.json

"peerDependencies": {
"react-native": ">=0.25 || 0.27.0-rc"
},

https://github.com/Purii/react-native-tableview-simple/blob/master/package.json#L21

Add `object` as an expected propType for title prop

The title prop should also accept values of type object. An example of this is a custom <Text /> component that is used to format a value in some way, either pluralize it, translate it, or otherwise manipulate it. But the output of the render function is still a string. I.e.:

<Cell
  ...
  title={
    <TextComponentThatTranslatesAndFormats
      text='Format me!'
    />
  }
  ...

The above emits the following warning to console:

Warning: Failed prop type: Invalid prop title supplied to Cell.

Separators should be hidden on press

Pressing a native TableCell will "hide" the separator above and below. But with tableview-simple you could still see the white line on the left of each separator.

Cell has default padding that can't be removed

Custom Cell defined with cellContentView gets default vertical padding, that can't be removed. For custom cells it should not preset any stylings or allow to override it.

cellContentView: {
alignItems: 'center',
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
// independent from other cellViews
paddingVertical: 10,
},

Support Rounded Sections

It would be great if sections and/or cells supported rounded corners.

Ideally it would be on the sections, but if that is too difficult, which it might be after peering though the code, (or if you disagree 😀) then having it on the Cell would be acceptable.

Something like this:

I've struggled doing this with the props that exist today:

<Cell
    backgroundColor={'transparent'}
    contentContainerStyle={{
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        backgroundColor: 'white',
        borderColor: '
    }}
/>

results in

The border still seems off somewhere.

Let me know if I can help in any way!

Split react and react-native imports

With react-native v0.25.0 a deprecation warning for a split of react and react-native packages will appear: facebook/react-native@2eafcd4

Example code issues

Missing import of Image.

import {
  ActivityIndicator,
  AppRegistry,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  View,
} from 'react-native';

should be

import {
  ActivityIndicator,
  AppRegistry,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  View,
  Image,
} from 'react-native';

Custom header example is missing component. Can be possibly fixed via

<Section headerComponent={<Text>Custom header!</Text>}>

Section seems to add separator to elements that aren't <Cell>

Look at the bottom (Slutter), it has a separator at the bottom because i have a (not wrapped in a cell) element underneath it that is hidden (shown when the cell is pressed).

Expected behavior: No separator on the bottom of the last cell even when there is a element beneath it. Then I would expect that I would have to add the separator manually if needed for my use case.

Use it as static tableview form

Hi there! It's possible to use it as a form (with a input text along a label), to make it work like a form?

Thanks a lot!

CustomCell doesn't render >

Hi there,
Is there a reacon I don't see ">" when I use CustomCell?
Also, how can I use the ">" in my code? How is it rendered?

Thanks.

YellowBox warning when using a FlatList in a ScrollView

The example code always shows the TableView inside a ScrollView. (Except for the FlatList example on the README but this does not seem to be a complete example.) I wonder why this is necessary? When I omit the ScrollView in my code, only one Cell is rendered, the rest are not visible, even if the list is very short and would easily fit on the screen.

But if I do include ScrollView and a FlatList is included in the Table (or even outside the table but within the scrollview), I get a YellowBox warning:

VirtualizedLists should never be nested inside play ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Header and Footer Separators

Is there a way to get rid of the lines between the header/footer and the body of the tableview? My header and footer are transparent without text but a line still shows, separating them from the cells.

Is there a property to change the Info Icon color?

I would like to change the info icon to a colors used by my app's dark or light themes.

I would like to change form blue to my dark theme's green color.

I tried searching the repo but cannot find where the info icon comes from? I searched for png and jpg.

Thanks in advance,

null children causes crash

null is not an object (evaluating 'child.props')

Perhaps filter null childs before rendering Section childs on https://github.com/Purii/react-native-tableview-simple/blob/master/components/Section.js#L53-L77

Setting custom colors for `<Seperator>`s

Hello! I want to start out by thanking you for all the work you have put into this project and to say just how useful this has been with my app. I have one issue/question to file though.

I cannot find a way to change the left most padding section of the <Seperator>. Currently my settings screen (in dark theme) looks like this:

with those weird white sections on the left. Looking through the docs and the properties layed out in the typescript declaration file, I cannot find any way to change it. As well as the padding on the left, when a cell is selected, the whole <Seperator> changes to white:

For reference, here is how it looks in light theme:

Bad Android Default Styles

Using the example on Snack.io, Android styles appear to have some bad margin/padding left/right.

https://snack.expo.io/HJ37Ihvn4

Normal state: Padding on the right seems too much.

Pressed state: The left/right margins are darker than the rest.

Just a guess, but based on the darker pressed areas, it seems that margin/padding is off on the content wrapper.

Happy to help any way I can.

Thanks!

Bug in dark mode display

Hello! When trying to implement dark mode, I found out that the package ignored the appearance param 'dark' and always show light theme.

Then I found out the the if statement in TableView.tsx is the cause:

  if (
    (appearance === 'auto' && systemColorScheme === 'dark') ||
    systemColorScheme === 'light'
  )

Can be fixed with

  if (
    appearance === 'auto' &&
    (systemColorScheme === 'light' || systemColorScheme === 'dark')
  )

I don't know if this was the intended way, but if we are letting user to choose between automatic, light, and dark display, I believe the latter is the way to go.

Thanks!

PropTypes.oneOfType error in react-native 0.27.0

Android - Header and Footer left margin

On Android, section header and footer are missing left margin.

[ Question ] How to assign a Section custom headerComponent that can change this.state?

Sorry, this is a programming question rather than react-native-tableview-simple

How can I assign a custom section header that can change this.state ?

            <Section
              {...propsHeader}
              allowFontScaling={false}
              headerComponent={this.renderCustomSectionHeader}
            >

Thank you for a great component!

react-native type has no exported member 'StyleProp'

When compiling with TypeScript, we have this error:

node_modules/react-native-tableview-simple/index.d.ts(7,32): error TS2305: Module '"/Users/oussama/Dev/mobile-apps-consumer/node_modules/@types/react-native/index"' has no exported member 'StyleProp'.

Config:

react-native 0.47.2
typescript 2.4.2
types/react-native: 0.44.2

Custom styles for cell

Currently there's not very many ways to style a cell. Stuff like font size, padding, and others just don't exist. Recreating them with a CustomCell doesn't feel very good.

Some cell rows don't have a bottom border

Take a look under the Obs Unit Protocols cell. It seems to be only happening on certain android devices. For example, this is the Nexus 5x. I can't seem to repro it on iOS or on Xiaomi mi 5, or Samsung Galaxy 3.

Not possible to use themes with FlatList

The example of FlatList usage in README uses only the Cell component, without wrapping it TableView, this causes the custom appearances and themes to stop working within the Cell component.

      <FlatList
        data={activities}
        renderItem={({ item, separators }) => <Cell title={item.text} />}
      />

Should there be a way to style TableView so it can be used as a general wrapper? Maybe something like this:

    <TableView style={{ flex: 1 }}>
      <FlatList
        data={activities}
        renderItem={({ item, separators }) => <Cell title={item.text} />}
      />
    </TableView>

Sent a PR that fixes this.

Don't validate children via propTypes

I have something like this:

<TableView>
      <Section header={_("Select card to pay with")}>
         {cards.map((card, idx) => {
              return <Cell .... />
          })}

    <Cell title="Use a new card" ... />
  </Section>
</TableView>

My console says:

 warning.js:45 Warning: Failed propType: Invalid prop `children` supplied to `Section`. Check the render method of `Foo`.

So the children, in my case, would be:

[
    [Cell, Cell],
    Cell
]

Why are the propTypes for children defined? This seems very much overkill - and, maybe, hard to get right.

Invalid prop `children` supplied to `TableView`

Looping over data to generate sections and cells within those sections. Getting the "Invalid prop children supplied to TableView" error.

Sample:

        <TableView>

          {filters.map((section, i) => (
            <Section
              header={section.label.toUpperCase()}
              key={i}
            >
              {section.options.map((option, k) => (
                <CustomCell
                  key={k}
                >
                  <Text
                    style={{
                      flex: 1,
                      fontSize: 16,
                    }}
                  >
                    {option.label}
                  </Text>
                  <Switch
                    value={option.value}
                  />
                </CustomCell>
              ))}
            </Section>
          ))}

        </TableView>

An in-range update of eslint-plugin-react is breaking the build 🚨

The devDependency eslint-plugin-react was updated from `7.14.0` to `7.14.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v7.14.1

Fixed

Fix prop-types crash on multiple destructuring (#2319 @golopot)

Commits

The new version differs by 3 commits.

62255af Update CHANGELOG and bump version
655eb01 Merge pull request #2320 from golopot/issue-2319
9639d82 [Fix] prop-types: fix crash on multiple destructuring

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

If more than one column ?

Can I use this package, if I have more than 1 column?
-Thanks in advance

How can i solve this by Using this Component

please click it once link i have a issue.

https://stackoverflow.com/questions/45841397/how-to-check-uncheck-individual-checkbox-in-react-native-table-component

Warning: setState(...): Can only update a mounted or mounting component.

I was debugging a tricky problem in my code when I saw this warning:

 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Cell component.

I can make that warning go away by passing allowFontScaling={false} to all my Cell components. Then the Cell component doesn't try to set state. This also makes my other problem go away. I have no idea why.

This is an almost-acceptable workaround, because I have been debating whether to turn off font scaling in my settings pages. If users have the scaling set too high, it can make a mess. But I see Apple uses font scaling in their Settings app, so I guess best practice is to use it.

The other problem with the workaround is that in some cells I use a RightDetail, and the detail text is still being scaled, resulting in an ugly cell with two different font sizes, like this.

implement testID

Hello,

please, can you implement prop the testID to the table cell on the TouchableHighlight component?

TableView style RN 0.39

Please change tableview style from flex: 1 to flexGrow: 1.

Due to recent changes from RN 0.39 on android flex: 1 would give a bug and wont display a table at all.

here is the fixed tableview please include it with the new update of the component:

`
/* eslint-disable import/no-unresolved */
import React, {
PropTypes,
} from 'react';

import {
StyleSheet,
View,
} from 'react-native';
/* eslint-enable import/no-unresolved */

const TableView = props => (

{props.children}

);

const styles = StyleSheet.create({
tableView: {
flexDirection: 'column',
flexGrow:1,
},
});

TableView.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.element),
PropTypes.element,
]),
};

export default TableView;
`

Runaway thread on older versions of iOS

Apps using this component have extremely poor performance on iOS 9.3 and iOS 10.3.
To replicate, clone the latest version of this repo. Then,

cd example
yarn
npm start
cd ios

Now open example.xcodeproj in xcode. Run the example using an iOS 10.3.1 simulator (for example, use iPhone 6 Plus). Click on the debugging tab in xcode and click on CPU. The graph will show a constant 100% CPU or thereabouts.

The problem does not occur in iOS 11.0 and above.

If you click on Profile in Instruments, it will show the heaviest stack trace looks like this:

  68  35339.0  example (38732) :0
  67  33541.0  _dispatch_worker_thread3  0x1105fb :0
  66 libsystem_pthread.dylib 33541.0  start_wqthread
  65 libsystem_pthread.dylib 33541.0  _pthread_wqthread
  64 libdispatch.dylib 33541.0  _dispatch_worker_thread3
  63 libdispatch.dylib 33541.0  _dispatch_root_queue_drain
  62 libdispatch.dylib 33541.0  _dispatch_queue_invoke
  61 libdispatch.dylib 33541.0  _dispatch_queue_serial_drain
  60 libdispatch.dylib 33521.0  _dispatch_client_callout
  59 libdispatch.dylib 33507.0  _dispatch_call_block_and_release
  58 example 33507.0  __RCTExecuteOnUIManagerQueue_block_invoke /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Modules/RCTUIManagerUtils.m:59
  57 example 33486.0  __51-[RCTUIManager _executeBlockWithShadowView:forTag:]_block_invoke /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Modules/RCTUIManager.m:339
  56 example 33472.0  __37-[RCTUIManager setLocalData:forView:]_block_invoke /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Modules/RCTUIManager.m:365
  55 example 33331.0  -[RCTUIManager setNeedsLayout] /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Modules/RCTUIManager.m:1142
  54 example 33311.0  -[RCTUIManager _layoutAndMount] /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Modules/RCTUIManager.m:1074
  53 example 32935.0  -[RCTUIManager uiBlockWithLayoutUpdateForRootView:] /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Modules/RCTUIManager.m:479
  52 example 32797.0  -[RCTRootShadowView layoutWithAffectedShadowViews:] /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Views/RCTRootShadowView.m:34
  51 example 32772.0  -[RCTShadowView layoutWithMinimumSize:maximumSize:layoutDirection:layoutContext:] /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/React/Views/RCTShadowView.m:275
  50 example 32435.0  YGNodeCalculateLayout /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:4096
  49 example 30513.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  48 example 30510.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3124
  47 example 30279.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  46 example 30278.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3124
  45 example 30116.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  44 example 30116.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3124
  43 example 29967.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  42 example 29967.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3124
  41 example 27160.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  40 example 27157.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3124
  39 example 16771.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  38 example 16765.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2853
  37 example 10115.0  YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1938
  36 example 10031.0  YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1428
  35 example 9935.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  34 example 9913.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2853
  33 example 9570.0  YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1938
  32 example 9473.0  YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1428
  31 example 9183.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  30 example 9089.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2853
  29 example 7841.0  YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1938
  28 example 7707.0  YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1428
  27 example 7416.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  26 example 7345.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2853
  25 example 5679.0  YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1938
  24 example 5556.0  YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1428
  23 example 5379.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  22 example 5323.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2853
  21 example 3221.0  YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1938
  20 example 3160.0  YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1428
  19 example 3046.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  18 example 3011.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2956
  17 example 1674.0  YGResolveFlexibleLength(YGNode*, YGCollectFlexItemsRowValues&, YGFlexDirection, YGFlexDirection, float, float, float, float, float, bool, YGMeasureMode, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2368
  16 example 1603.0  YGDistributeFreeSpaceSecondPass(YGCollectFlexItemsRowValues&, YGNode*, YGFlexDirection, YGFlexDirection, float, float, float, float, float, bool, YGMeasureMode, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2215
  15 example 1454.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  14 example 1414.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2956
  13 example 345.0  YGResolveFlexibleLength(YGNode*, YGCollectFlexItemsRowValues&, YGFlexDirection, YGFlexDirection, float, float, float, float, float, bool, YGMeasureMode, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2368
  12 example 296.0  YGDistributeFreeSpaceSecondPass(YGCollectFlexItemsRowValues&, YGNode*, YGFlexDirection, YGFlexDirection, float, float, float, float, float, bool, YGMeasureMode, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2215
  11 example 190.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3861
  10 example 119.0  YGNodelayoutImpl(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:2853
   9 example 40.0  YGNodeComputeFlexBasisForChildren(YGNode*, float, float, YGMeasureMode, YGMeasureMode, YGDirection, YGFlexDirection, YGConfig*, bool, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1938
   8 example 25.0  YGNodeComputeFlexBasisForChild(YGNode*, YGNode*, float, YGMeasureMode, float, float, float, YGMeasureMode, YGDirection, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:1428
   7 example 11.0  YGLayoutNodeInternal(YGNode*, float, float, YGDirection, YGMeasureMode, YGMeasureMode, float, float, bool, char const*, YGConfig*, YGMarkerLayoutData&) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3767
   6 example 6.0  YGNodeCanUseCachedMeasurement /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3635
   5 example 3.0  YGRoundValueToPixelGrid /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:3598
   4 example 1.0  YGFloatsEqual(float, float) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Utils.cpp:48
   3 example 1.0  facebook::yoga::isUndefined(float) /Users/maint/github/react-native-tableview-simple/example/node_modules/react-native/ReactCommon/yoga/yoga/Yoga-internal.h:31
   2 example 1.0  isnan(float) /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/math.h:533
   1 example 1.0  bool __libcpp_isnan<float>(float) /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/math.h:511
   0 example 1.0  __inline_isnanf /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/math.h:209

UPDATE: There are also a number of console messages from CGContext:

Apr  4 13:11:58  example[3845] <Error>: CGContextSetFillColorWithColor: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Apr  4 13:11:58  example[3845] <Error>: CGContextAddPath: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Apr  4 13:11:58  example[3845] <Error>: CGContextDrawPath: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Apr  4 13:11:58  example[3845] <Error>: CGContextAddPath: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Apr  4 13:11:58  example[3845] <Error>: CGContextAddPath: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.

Add support for rightDetailColor?

I would like to style the right detail with a color.

Right now I am achieving this via

                detail={
                  <Text
                    style={styles.legal}
                  >
                    Legal
                  </Text>
                }

However this results in a propTypes validation error on the detail prop:

ExceptionsManager.js:78 Warning: Failed prop type: Invalid prop `detail` supplied to `Cell`

Error : Nesting of <View> within <Text> is not currently supported.

Hi Purri

I recently upgraded my EXPO to its latest version. After upgrade my app stopped working and throwing error for Cell being rendered from 'react-native-tableview-simple" Attached is the screen shot for the error.

Following is the current stack I am using.

"react-native-tableview-simple": "^1.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz", ( React Native 0.57 )
"expo": "^31.0.0",
"react": "16.5.0"

Any help on this is highly appreciated. Please let me know if you need any further information.

Support new iOS 14 Style

Can't change accessoryColor when accessory is DisclosureIndicator

<TableView>
<Cell 
  cellStyle="Basic"
  title="A"
  accessory="Checkmark"
  accessoryColor='#000'/>
<Cell
 cellStyle="Basic"
 title="B"
 accessory="DisclosureIndicator"
 accessoryColor='#000'/>
</TableView>

Result:

Cell with Text Input Eats Touchable Press When Blurring

In the following snack:

https://snack.expo.io/@slynn/react-native-tableview-simple---text-input-and-focus

When the text input is focused, you cannot click the touchable below until the text input is first blurred.

Steps:

Click into the text input to focus
Click on the "Pressable w/ accessory" cell.

Notice that you must first blur the text input.

Here is a snack that isolates the issue to show it doesn't seem to happen when not using react-native-tableview-simple.

https://snack.expo.io/@slynn/textinput-with-button

Let me know if you need anything else or if I am doing something wrong :)

[iOS] Crash on ViewPropsTypes.style

I had to remove ViewPropsTypes.style.

I was getting crashes when app started due to ViewPropsTypes.style after upgrading react-native-tableview-simple 0.16.4 -> 0.16.13

Xcode:
2017-10-05 10:48:45.581 FieldScout[15242:54944] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: undefined is not an object (evaluating 'o.ViewPropTypes.style')', reason: 'Unhandled JS Exception: undefined is not an object (evaluating 'o.ViewPropT..., stack:

The following line depends on RN 0.44 or greater:

react-native-tableview-simple/components/Cell.js

Line 430 in cf688de

contentContainerStyle: ViewPropTypes.style,

contentContainerStyle: ViewPropTypes.style,

"react": "~15.4.1",
"react-native": "0.42.3",
"react-native-tableview-simple": "^0.16.13",

Is there a way to make backwards compatible to < RN 0.44 ?

If not, should peerDependencies be updated?

  "peerDependencies": {
    "react": "*",
    "react-native": ">=0.44 || 0.50.0-rc"
  },

Thank you for sharing your work!

An in-range update of eslint is breaking the build 🚨

The devDependency eslint was updated from `6.6.0` to `6.7.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v6.7.0

312a88f New: Add grouped-accessor-pairs rule (fixes #12277) (#12331) (Milos Djermanovic)
5c68f5f Update: Add 'lexicalBindings' to no-implicit-globals and change messages (#11996) (Milos Djermanovic)
6eaad96 New: Add suggestions API (#12384) (Will Douglas)
b336fbe Fix: indent rule with JSX spread props (#12581) (Nathan Woltman)
97c745d Update: Report assignment expression location in no-cond-assign (#12465) (Milos Djermanovic)
0f01f3d Update: Check member expressions with this in operator-assignment (#12495) (Milos Djermanovic)
62c7038 Fix: invalid token checking in computed-property-spacing (fixes #12198) (#12533) (YeonJuan)
4f8a1ee Update: Add enforceForClassMembers option to no-useless-computed-key (#12110) (ark120202)
1a2eb99 New: new rule no-constructor-return (fixes #12481) (#12529) (Pig Fang)
ca3b2a6 New: ignorePatterns in config files (refs eslint/rfcs#22) (#12274) (Toru Nagashima)
60204a3 Docs: Added another Textmate 2 bundle. (#12580) (Ryan Fitzer)
62623f9 Fix: preserve whitespace in multiline-comment-style (fixes #12312) (#12316) (Kai Cataldo)
17a8849 New: Add no-dupe-else-if rule (fixes #12469) (#12504) (Milos Djermanovic)
41a78fd Update: improve location for semi and comma-dangle (#12380) (Chiawen Chen)
0a480f8 Docs: Change "Code Conventions" link in pull-requests.md (#12401) (Denis Sikuler)
fed20bb Fix: require-await crash on global await (#12571) (Brad Zacher)
b8030fc Update: deprecate personal config (fixes #11914, refs eslint/rfcs#32) (#12426) (Toru Nagashima)
40c8c32 Fix: improve report location for object-curly-spacing (#12563) (Milos Djermanovic)
1110045 Fix: ignore marker-only comments in spaced-comment (fixes #12036) (#12558) (Milos Djermanovic)
6503cb8 Update: Fix uglified object align in key-spacing (fixes #11414) (#12472) (YeonJuan)
40791af Docs: clarify ignoreDestructuring option in the camelcase rule (#12553) (Milos Djermanovic)
07d398d Chore: Add GitHub organization to Sponsor button (#12562) (Brandon Mills)
a477707 Chore: Format style guide links so they can be clicked (#12189) (Ivan V)
0f7edef Update: add react plugin config for eslint init (#12446) (Ibrahim Rouis)
448ff1e Update: Report '\08' and '\09' in no-octal-escape (fixes #12080) (#12526) (Milos Djermanovic)
45aa6a3 New: Add no-setter-return rule (fixes #12285) (#12346) (Milos Djermanovic)
0afb518 Fix: invalid autofix in function-call-argument-newline (fixes #12454) (#12539) (YeonJuan)
90305e0 Update: Depcrecate isSpaceBetweenTokens() (#12519) (Kai Cataldo)
41b1e43 New: add option for camelcase (fixes #12527) (#12528) (Pig Fang)
f49f1e0 Upgrade: upgrade optionator to avoid license issue (fixes #11536) (#12537) (Pig Fang)
0286b57 Docs: Clean up Getting Started Guide (#12544) (Nicholas C. Zakas)
575a98d Chore: Add funding field to package.json (#12543) (Nicholas C. Zakas)
9e29e18 Fix: sourceCode#isSpaceBetweenTokens() checks non-adjacent tokens (#12491) (Kai Cataldo)
5868550 Docs: add notice about function keyword in keyword-spacing (#12524) (Pig Fang)
bb556d5 Fix: curly multi reports single lexical declarations (fixes #11908) (#12513) (Milos Djermanovic)
ac60621 Fix: unexpected autofix in prefer-const (fixes #12514) (#12521) (YeonJuan)
990065e Update: curly multi-or-nest flagging semis on next line (fixes #12370) (#12378) (cherryblossom000)
084a8a6 Fix: no-cond-assign with always option reports switch case clauses (#12470) (Milos Djermanovic)
7e41355 Update: improve report location for space-infix-ops (#12324) (Chiawen Chen)
94ff921 Update: Add capIsConstructor option to no-invalid-this (fixes #12271) (#12308) (Milos Djermanovic)
de65de6 New: Add prefer-exponentiation-operator rule (fixes #10482) (#12360) (Milos Djermanovic)
c78f4a7 Update: Allow JSX exception in no-inline-comments (fixes #11270) (#12388) (Milos Djermanovic)
e17fb90 New: allowAfterThisConstructor for no-underscore-dangle (fixes #11488) (#11489) (sripberger)
287ca56 Build: update CI for Node.js 13 (#12496) (Toru Nagashima)
98e1d50 Upgrade: globals to v12.1.0 (#12296) (Tony Brix)
8ac71a3 Sponsors: Sync README with website (ESLint Jenkins)
4e142ea Docs: Update README team and sponsors (ESLint Jenkins)

Commits

The new version differs by 49 commits.

61848b4 6.7.0
9162db9 Build: changelog update for 6.7.0
312a88f New: Add grouped-accessor-pairs rule (fixes #12277) (#12331)
5c68f5f Update: Add 'lexicalBindings' to no-implicit-globals and change messages (#11996)
6eaad96 New: Add suggestions API (#12384)
b336fbe Fix: indent rule with JSX spread props (#12581)
97c745d Update: Report assignment expression location in no-cond-assign (#12465)
0f01f3d Update: Check member expressions with this in operator-assignment (#12495)
62c7038 Fix: invalid token checking in computed-property-spacing (fixes #12198) (#12533)
4f8a1ee Update: Add enforceForClassMembers option to no-useless-computed-key (#12110)
1a2eb99 New: new rule no-constructor-return (fixes #12481) (#12529)
ca3b2a6 New: ignorePatterns in config files (refs eslint/rfcs#22) (#12274)
60204a3 Docs: Added another Textmate 2 bundle. (#12580)
62623f9 Fix: preserve whitespace in multiline-comment-style (fixes #12312) (#12316)
17a8849 New: Add no-dupe-else-if rule (fixes #12469) (#12504)

There are 49 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Warning: Failed prop type: Invalid prop `children` supplied to `TableView` RN44

this structure:

<TableView>
   <Section>...</Section>
   {showMore && (<Section>...</Section>}
</TableView>

generate the following warning:

Failed prop type: Invalid prop children supplied to TableView

related to:

DisclosureIndicator is different

reproduce

https://snack.expo.io/@chengxiaodong1/react-native-tableview-simple

Missing separators after onPress toggling other cells

First of all, this little library is great for putting together quick tableview layouts, so thanks for the great work! 👍

Probably the easiest way to explain this bug is by seeing it in action, so here's a quick snack with two examples in it: https://snack.expo.io/@philo23/quiet-scone

Basically when you toggle the visibility of other cells inside a <Section>, the separators between the one you pressed on and the new cells seem to disappear. If the other cells are not pressable, the separator stays hidden. But if the other cells are pressable, the separator returns when you press on one of the other cells.

As far as I can tell, this affects both iOS and Android, but not the web version for some reason.

          <Section style={{flex: 1}}
                   header="Sounds"
                   hideSeparator={false} > 
              { sounds.sounds.map((sound, index) => {
                return ((selectedIndex == index) ? 
                  <Cell  key={index} accessory="Checkmark" title={sound.name} onPress={(event) => this.onPress(index)}/> :
                  <Cell  key={index} title={sound.name} onPress={(event) => this.onPress(index)}/>);
               }) }
          </Section>

And only every other separator shows:

What can I do about this? I've tried hiding the separators and adding bottom or top borders to each cell using styles and they don't show up at all.

Support editing mode

Thanks for awesome package.

Can I expect this feature in the future?

https://github.com/aksonov/react-native-tableview#built-in-editing

purii / react-native-tableview-simple Goto Github PK

react-native-tableview-simple's Introduction

react-native-tableview-simple's People

Contributors

Stargazers

Watchers

Forkers

react-native-tableview-simple's Issues

The dependency react-native was updated from 0.57.2 to 0.57.4.

The devDependency eslint-plugin-react was updated from 7.14.0 to 7.14.1.

Fixed

The devDependency eslint was updated from 6.6.0 to 6.7.0.

reproduce

Recommend Projects

Recommend Topics

Recommend Org

The dependency react-native was updated from `0.57.2` to `0.57.4`.

The devDependency eslint-plugin-react was updated from `7.14.0` to `7.14.1`.

The devDependency eslint was updated from `6.6.0` to `6.7.0`.