Nativebase - customise a component

Question

I just want to change the color of the line between each ListItem in a List to red. I think I have to do a custom theme to overwrite the default ListItem.

Trying:

import getTheme from '../../../native-base-theme/components'
import listItemTheme from '../../../native-base-theme/components/ListItem'

import {
  List,
  ListItem,
  Text,
  Left,
  Body,
  Right,
  Button,
  Container,
  Header,
  Title,
  Content,
  StyleProvider
} from 'native-base'

const styles1 = {
  'yourTheme.CustomComponent': {
    borderColor: 'red', 
    borderBottomWidth: 1
  }
}

Categories = connect(
  mapStateToProps,
  mapDispatchToProps
)(Categories)

export default connectStyle('yourTheme.CustomComponent', styles1)(Categories)

each ListItem:

const renderCategoryRow = (props, item) => {


  return (
    <StyleProvider style={styles1}>
    <ListItem
      style={{
        ...styles.labelHeight
      }}
      icon
      onPress={() => props.toggleShowSubcategories(item)}>

      <Left>
        <Icon
          style={styles.icon}
          name={item.icon}
          size={20}
          color={item.iconColor} />
      </Left>
      <Body style={{...styles.labelHeight

      }}>
        <Text style={{
          ...styles.label,
          color: '#7c6a4d'
        }}>{item.label}</Text>
      </Body>
      <Right style={styles.labelHeight}>
        <Eicon style={styles.arrow} name="chevron-right" size={30} />
      </Right>
    </ListItem>
      </StyleProvider>
  )
}

Getting error:

undefined is not an object (evaluation 'variables/listBtnUnderlayColor')

score 0 · Answer 1 · answered Jul 29 '17 at 09:11

I fixed the error by using an empty getTheme() in the <StyleProvider>:

const renderCategoryRow = (props, item) => {
  const styles1 = props.style;
  return (

<StyleProvider style={getTheme()}>
<ListItem

  style={{
    ...styles1

  }}
  icon
  onPress={() => props.toggleShowSubcategories(item)}>

Then I edited the actual components/ListItem.js theme file which caused any <ListItem> within the <StyleProvider> to take on those changes in the ListItem.js file.

Then did this throwaway custom theme to make it happy when using connectStyle():

// Define your own Custom theme
const customTheme = {
//backgroundColor: 'black'
height: 55,
borderBottomColor: 'red'

  }


export default connectStyle('customTheme', customTheme)(Categories)

...and it worked.

Nativebase - customise a component

1 Answers1