How to show selected item in list with a different color in react native using native base ui kit?

Question

I want to show the sidebar content in a different background color.For that I've tried TouchableOpacity underlay.But that is not the one I'm looking for.After giving TouchableOpacity ,it will change the color of the text only not the entire list background.How do I change the listitem background color as I'm using native base ui kit.Please help.Is there any method to do that?This is how the sidebar looks like.I've done something likes the following.Setting pressStatus as true within onPresList and if it is true change backround color.But navigation to route is not working.There is a mistake

https://i.sstatic.net/w9YiR.png

How do I change background color onPress? Following is my code.

updated

import React, { Component } from "react";
import { Image, FlatList } from "react-native";
import {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  Right,
  Badge,
  Thumbnail
} from "native-base";
import styles from "./style";

const drawerCover = require("../../imgs/quwait.jpg");

const datas = [
  {
    name: "Dashboard",
    route: "Anatomy",
    icon: require("../../imgs/dashboard.png"),

  },
  {
    name: "Companies",
    route: "Header",
    icon: require("../../imgs/enterprise1.png"),
  },
  {
    name: "Company Admin",
    route: "Footer",
    icon: require("../../imgs/icon1.png"),

  },
  {
    name: "Employee",
    route: "NHBadge",
    icon: require("../../imgs/businessman1.png"),

  },
  {
    name: "Employs",
    route: "NHButton",
    icon: require("../../imgs/employee1.png"),

  },
  {
    name: "Announcement",
    route: "NHCard",
    icon: require("../../imgs/megaphone1.png"),

  },
  {
    name: "Holiday",
    route: "Check",
    icon:  require("../../imgs/sun-umbrella1.png"),

  },
  {
    name: "Accounting Report",
    route: "NHTypography",
    icon: require("../../imgs/accounting1.png"),

  },
  {
    name: "Invoice",
    route: "NHCheckbox",
    icon: require('../../imgs/approve-invoice1.png'),

  },
  {
    name: "Settings",
    route: "NHDatePicker",
    icon: require('../../imgs/settings1.png'),
  },
  {
    name: "Safety Phone Numbers",
    route: "NHThumbnail",
    icon: "user",

  },
  {
    name: "NBK",
    route: "NHDeckSwiper",
    icon: "swap",


  },
  {
    name: "ABK",
    route: "NHFab",
    icon: "help-buoy",

  },
  {
    name: "CBK",
    route: "NHForm",
    icon: "call",

  },
  {
    name: "Daily Invoice",
    route: "NHIcon",
    icon: "information-circle",

  },
  {
    name: "Kolin",
    route: "NHLayout",
    icon: "grid",

  },
  {
    name: "Limak",
    route: "NHList",
    icon: "lock",

  },
  {
    name: "Polaytol",
    route: "ListSwipe",
    icon: "code-working",

  },
  {
    name: "ACTS",
    route: "NHPicker",
    icon: "arrow-dropdown",

  }
];

class SideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4,
      pressStatus:false
    };
  }
onPressList = (DATA, INDEX) => {

  this.props.navigation.navigate(DATA.route);
  this.setState({ pressStatus : true, selectedItem: INDEX});
}

  render() {
    return (
      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >
          <Image source={drawerCover} style={styles.drawerCover} />
          <FlatList
        data={datas}
        keyExtractor={(item, index) => String(index)}
        renderItem={({ DATA, INDEX }) => {
              <ListItem
                button
                noBorder
                onPress={() => this.onPressList(DATA, INDEX)}
                style={{
               backgroundColor:
                 this.state.selectedItem === INDEX ? "#cde1f9" : "transparent"
             }}
              >
                <Left>
                <Image
                  source={DATA.icon }
                  style={{width:30,height:30}}
                />
                  <Text style={styles.text}>
                    {DATA.name}
                  </Text>
                </Left>
              </ListItem>}}
          />
        </Content>
      </Container>
    );
  }
}

export default SideBar;

Answer 1

In the App example from native Base they don't support styles for background items list. So you should change your List component from NativeBase and add a FlatList Component from react native. But you should also return the ListItem component from NativeBase and don't forget the import { FlatList } from "react-native";

You should also modify the onPressList function (I would transform it into an arrow function)

In your states you need to add the state selectedItem: 0

Everytime you press an item, your function would be called by modifying a selectedItem idex, which tells the Flatlist, which Item should get which background. I think this has to be the solution.

If it doesn't compile, make sure that you support arrow functions and that any curly braces or something like that isn't missing.

Final Code UPDATE

import React, { Component } from "react";
import { Image, FlatList } from "react-native";
import {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  Right,
  Badge,
  Thumbnail
} from "native-base";
import styles from "./style";

const drawerCover = require("../../imgs/quwait.jpg");
 
const datas = [
  {
    name: "Dashboard",
    route: "Anatomy",
    icon: require("../../imgs/dashboard.png"),

  },
  {
    name: "Companies",
    route: "Header",
    icon: require("../../imgs/enterprise1.png"),
  },
  {
    name: "Company Admin",
    route: "Footer",
    icon: require("../../imgs/icon1.png"),

  },
  {
    name: "Employee",
    route: "NHBadge",
    icon: require("../../imgs/businessman1.png"),

  },
  {
    name: "Employs",
    route: "NHButton",
    icon: require("../../imgs/employee1.png"),

  },
  {
    name: "Announcement",
    route: "NHCard",
    icon: require("../../imgs/megaphone1.png"),

  },
  {
    name: "Holiday",
    route: "Check",
    icon:  require("../../imgs/sun-umbrella1.png"),

  },
  {
    name: "Accounting Report",
    route: "NHTypography",
    icon: require("../../imgs/accounting1.png"),

  },
  {
    name: "Invoice",
    route: "NHCheckbox",
    icon: require('../../imgs/approve-invoice1.png'),

  },
  {
    name: "Settings",
    route: "NHDatePicker",
    icon: require('../../imgs/settings1.png'),
  },
  {
    name: "Safety Phone Numbers",
    route: "NHThumbnail",
    icon: "user",

  },
  {
    name: "NBK",
    route: "NHDeckSwiper",
    icon: "swap",


  },
  {
    name: "ABK",
    route: "NHFab",
    icon: "help-buoy",

  },
  {
    name: "CBK",
    route: "NHForm",
    icon: "call",

  },
  {
    name: "Daily Invoice",
    route: "NHIcon",
    icon: "information-circle",

  },
  {
    name: "Kolin",
    route: "NHLayout",
    icon: "grid",

  },
  {
    name: "Limak",
    route: "NHList",
    icon: "lock",

  },
  {
    name: "Polaytol",
    route: "ListSwipe",
    icon: "code-working",

  },
  {
    name: "ACTS",
    route: "NHPicker",
    icon: "arrow-dropdown",

  }
];

class SideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4,
      pressStatus:false,
      selectedItem:0
    };
  }

onPressList = (data, index) => {
  this.props.navigation.navigate(data.route);
  this.setState({ pressStatus : true, selectedItem: index});
}

  render() {
    return (
      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >
          <Image source={drawerCover} style={styles.drawerCover} />
          <FlatList
            data={datas}
            keyExtractor={(item, index) => String(index)}
            extraData={this.state.selectedItem}
            renderItem={({item:data, index})  => {
              const { selectedItem: sd } = this.state
              const localColor ={backgroundColor: sd === index ? "#cde1f9" : "transparent"}
              return (
                <ListItem
                  button
                  noBorder
                  style={localColor}
                  onPress={() => this.onPressList(data, index)}                    
                >
                  <Left>
                  <Image
                    source={data.icon}
                    style={{width:30,height:30}}
                  />
                    <Text style={styles.text}>
                      {data.name}
                    </Text>
                  </Left>
                </ListItem>
              )                   
            }}
          />
        </Content>
      </Container>
    );
  }
}

export default SideBar;