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?