How to preserve ListItem styling when upgrading to v1?

[lukewlms]

After upgrading to v1, ListItem styling has disappeared in our app. It appears this is intended (the styling from <List> is removed).

To make the upgrade path much cleaner, can you give us a simple way to reproduce the style we used to get from List? We don't want our app to change so it should be identical, but reverse engineering it will be pretty annoying (and would have to be repeated by anyone doing the upgrade).

Thanks!

[lukewlms]

Solved by creating ListItem and ListContainer files to map to legacy ListItem and List, with styles. Files below.

I would strongly suggest having a clear upgrade path that will allow users to retain their styles without needing to figure out how to rebuild them like this, if only a note under ListItem in the documentation!

The documentation also just appears to be incorrect - it doesn't list any styles in the code, but styles are applied in the screenshots which is why I spent 2-3 hours trying to figure out why I wasn't getting the default styles.

Thanks, still love the library.

ListContainer.tsx:

import * as React from "react";
import { StyleSheet, View } from "react-native";
import { legacyRNElementsColors } from "../Styles";

const styles = StyleSheet.create({
  listContainer: {
    marginTop: 20,
    borderTopWidth: 1,
    borderColor: legacyRNElementsColors.greyOutline,
    backgroundColor: legacyRNElementsColors.white,
  },
});

const ListContainer: React.SFC<{ children: React.ReactNode }> = ({
  children,
}) => <View style={styles.listContainer}>{children}</View>;

export default ListContainer;

ListItem.tsx:

import * as React from "react";
import { StyleSheet } from "react-native";
import { ListItem as RneListItem, ListItemProps } from "react-native-elements";
import {legacyRNElementsColors} from "../Styles";

const styles = StyleSheet.create({
  listItemContainer: {
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    borderBottomColor: legacyRNElementsColors.greyOutline,
    borderBottomWidth: 1,
    backgroundColor: "transparent",
  },
});

const ListItem: React.SFC<ListItemProps> = props => (
  <RneListItem
    containerStyle={[styles.listItemContainer, props.containerStyle]}
    {...props}
  />
);

export default ListItem;

In Styles.ts:

export const legacyRNElementsColors = {
  primary: "#9E9E9E",
  primary1: "#4d86f7",
  primary2: "#6296f9",
  secondary: "#8F0CE8",
  secondary2: "#00B233",
  secondary3: "#00FF48",
  grey0: "#393e42",
  grey1: "#43484d",
  grey2: "#5e6977",
  grey3: "#86939e",
  grey4: "#bdc6cf",
  grey5: "#e1e8ee",
  dkGreyBg: "#232323",
  greyOutline: "#bbb",
  searchBg: "#303337",
  disabled: "#dadee0",
  white: "#ffffff",
  error: "#ff190c",
};

[iRoachie]

Hey @lukewlms thanks for bringing this up. We definitely have to put up some instructions for upgrading from 0.19.1 to v1 but we having done it as yet. This is cause we still have a few things we want to change before finish development.

Be sure this is definite walkthrough we will publish on release of v1

[iRoachie]

We released a migration guide on the release of v1.0.0 https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html

[lukewlms]

@iRoachie Would still strongly recommend putting up a style example so those migrating can achieve parity with their old look! I don't see it in the guide, though looks great otherwise. Otherwise each implementer will have to reinvent the wheel and reverse-engineer or dig for this style in the old code so app appearance doesn't change. Per listItemContainer style above.

[iRoachie]

Are there any particular examples of usage you’d like to see?

[lukewlms]

@iRoachie Just parity with previously existing view styles, per https://github.com/react-native-training/react-native-elements/issues/1565#issuecomment-436982251.

[iRoachie]

Can you be a bit more specific about which props/styles you were using in 0.19.1? It's a bit hard to get all props to work exactly the same in v1.0.0 as some props were removed as well.

The more info you can give about how you were using it(props, styles) then I can try to implement the same styling in v1.

[lukewlms]

@iRoachie I didn't implement anything new and wasn't using any styles in 0.19.1 - the thing is that developers must now start using styles for lists and list items, which was not necessary pre-v1.0.

The styles above are identical to the default styles in 0.x that were removed. Adding the styles above to a v1.0 app will ensure the lists and listitems look the same as they did before upgrading to v1.0 so adding them is necessary for developers who are upgrading. They can be copied in by developers as-is above b/c they're pulled directly from the old (now removed) built-in RN Elements styles.

[iRoachie]

Ahhh i understand you now. Can you make a PR to make a note (link your comment) in the blog post?

[lukewlms]

Sure thing, created https://github.com/react-native-training/react-native-elements/pull/1777

[betoharres]

I was wondering why on earth the ListItem was not styled. Man, those were hours of searching for this and I couldn't find a single mention on the docs about this. I think we should let users aware that the screenshots DOES NOT represents the sample codes.
I was searching on all change logs for a mention about that, but I only found out by looking at every single issue about list item.. that was pretty sad, but the library is awesome

[lukewlms]

@betoharres I agree - created https://github.com/react-native-training/react-native-elements/pull/1915

[betoharres]

@lukewlms Thank you so much for the time you've taken into this, I really appreciate the attention given. ❤️