Unable to use themes to style components that are children of NativeBase.List

[jenni-divvito]

• node 8.11.1
• npm 5.6.0
• react-native 0.55.4
• react 16
• native-base 2.6.1

Expected behaviour

Able to theme components through the normal means (ejected theme)

Actual behaviour

Unable to style any components descending from a List

Steps to reproduce

An example layout:

class Test extends React.PureComponent {
  render() {
    return <Container>
      <Content>
        <List>
          <ListItem>
            <Text>I am text</Text>
          </ListItem>
        </List>
      <Content>
    </Container>
  }
}

An example theme in Content.js of an ejected theme:

export default (variables = variable) => {
  const contentTheme = {
    "NativeBase.ListItem": {
      backgroundColor: "#F00",
      "NativeBase.Text": { color: "#00F" }
    }
  };

  return contentTheme;
};

Neither the colour, nor the background colour are applied to their respective elements.

Is the bug present in both iOS and Android or in any one of them?

Both

Any other additional info which would help us debug the issue quicker.

After fighting this all afternoon, I at least have a way around the issue - It appears there is no theme for the List component, at least in the theme ejected from my current version. This causes... something... to go wrong when shoutem compiles the themes down based on the parentPath.

I added an empty theme to the ejected theme to get this working - that is I added the file List.js to the theme folder:

import variable from "./../variables/platform";

export default (variables = variable) => ({})

and in index.js added:

import listTheme from "./List";
// ... snip ...
    "NativeBase.List": {
      ...listTheme(variables)
    },
// ... snip ...

but this doesn't do the trick on it's own. I didn't dig deep enough to found out where, but somewhere in the depths of NativeBase and/or shoutem something must be checking for empty objects and filtering them out, because in order for this to work I had to change List.js to:

import variable from "./../variables/platform";

export default (variables = variable) => ({
  minWidth: 1
});

Any other property at all works fine, a long as there is at least one property in the resulting object.

[SupriyaKalghatgi]

@chris-divvito Did you read issue guidelines, while creating issue and tried http://nativebase.io/customizer/?

[jenni-divvito]

@SupriyaKalghatgi I did read the guidelines, and I am not sure that the customizer is relevant here? it's unable to reproduce the kind of styling I am speaking about in the issue.

[SupriyaKalghatgi]

@chris-divvito Did you find this working?

[jenni-divvito]

Nope, not without the workaround as stated in the original issue posting

[suvenduchhatoi]

@chris-divvito
If you check NB docs, it has been mentioned that
"List is deprecated. Use of List for dynamic list generation is discouraged. Use FlatList instead."
Moreover, there is no 'List.js' component within the ejected-theme of native-base because the developers wanted to keep the 'List' more as a standard...So, you should try to customize 'ListItem.js' instead of 'List.js'

In App.js

import React, { Component } from "react";
import {
  Container,
  Header,
  Content,
  List,
  ListItem,
  Text,
  StyleProvider,
  Button,
} from "native-base";
import getTheme from "./native-base-theme/components";
import variables from "./native-base-theme/variables/platform";

export default class AccordionCustomHeaderContentExample extends Component {
  render() {
    return (
      <StyleProvider style={getTheme(variables)}>
        <Container>
          <Header />
          <Content>
            <List>
              <ListItem>
                <Text>Simon Mignolet</Text>
              </ListItem>
              <ListItem>
                <Text>Nathaniel Clyne</Text>
              </ListItem>
            </List>
            <ListItem>
              <Button>
                <Text>Dejan Lovren</Text>
              </Button>
            </ListItem>
          </Content>
        </Container>
      </StyleProvider>
    );
  }
}

In ListItem.js of native-base-theme/components
add these styling

 "NativeBase.Text": {
      fontWeight: "200",
      color: "red",
    },

    "NativeBase.Button": {
      "NativeBase.Text": {
        fontWeight: "800",
        color: "white",
      },
    },

It means inside of a ListItem component, if we have to style Text component, then it will have fontWeight:200 and color of Text will be 'red' ...Again if we want to style Text within a Button inside of a ListItem component, we set a different style for it as above...It works...

[suvenduchhatoi]

[suvenduchhatoi]

Closing the issue due to no response for a while...Hope your issue has been resolved.You can reopen the issue if you still feel the issue is exclusive to "native-base"...