Git Product home page Git Product logo

Comments (7)

jemise111 avatar jemise111 commented on June 19, 2024 2

@zamiang I merged in the PR to allow for passing in styles. I'll do a release over the weekend. Good call on the flex: 1 issue, I'll take a look and see if it makes sense to remove it. Leaving this open until then. Thanks!

from react-native-swipe-list-view.

jemise111 avatar jemise111 commented on June 19, 2024

Hey @zamiang happy to look into this but I think I'm missing the issue. The first two items look like they're of equal height. The third item looks larger on the right but it's not equal to the height of any other items. So is the issue that the height of the third item is unexpectedly larger?

If you could provide some snippets of code for the ListView and SwipeListView that would be really helpful.

Also if you'll take a look at this line:

https://github.com/jemise111/react-native-swipe-list-view/blob/master/components/SwipeListView.js#L104

you'll see that any props you pass to the SwipeListView are passed to the underlying ListView, meaning a style or contentContainerStyle prop will be passed along and you can style the container as you need.

from react-native-swipe-list-view.

zamiang avatar zamiang commented on June 19, 2024

Thanks! Here is a bit more detail. TLDR - All rows have flex: 1 applied in a way that I cannot override. https://github.com/jemise111/react-native-swipe-list-view/blob/master/components/SwipeRow.js#L250

Color key:

  • yellow is background of the the SwipeListView
  • purple and gray are alternating backgrounds of a component passed to renderRow

row-height

I believe the correct fix would be to allow passing custom styles to the SwipeRow (similar to the SwipeListView) rather than removing that line.

from react-native-swipe-list-view.

jemise111 avatar jemise111 commented on June 19, 2024

@zamiang Okay so without your code to run and I can't really test if this will fix your problem. But when checkout this PR, #40, when you have a sec and let me know if it fixes your issue. Then I'll merge and release a new version. Thanks!

from react-native-swipe-list-view.

zamiang avatar zamiang commented on June 19, 2024

That looks great! Thanks so much.

I have gained a bit more insight into the root issue. React-native 0.28 made changes to how flex: 1 vs flex: 0 works. I have been seeing similar pull requests / issues with other projects. In the release notes you will see this note:

"flex styling property behavior now behaves slightly differently. If you previously used flex: 1 where not necessary this change will likely break your layout as the measuring behavior is slightly different than before due to performance optimizations. Removing that unnecessary flex: 1 will solve your layout in most cases."

That note suggests that just removing the flex: 1 declaration would fix the issue -- and remove the need (in this case!) for styling the SwipeRow (though that may be a good thing for the project anyway)

from react-native-swipe-list-view.

jemise111 avatar jemise111 commented on June 19, 2024

Removed flex: 1, closing. Fixed by #40 and #43

from react-native-swipe-list-view.

zamiang avatar zamiang commented on June 19, 2024

Thanks!

from react-native-swipe-list-view.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.