Change nested component in react-native

I am using the code below, My data list is inside the . Right now as per below code Icon is not working inside . Via some clicks Toggle for this.state.rmvCircle is happening. Boolean is changing but Icon is not getting toggle.

But If I wrote just inside the So Icon is working fine as per the toggle change via some function.

What extra thing I need to implement for refreshing Icon inside the listItem.

import React, { Component } from "react";
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Icon,
  List,
  ListItem,
  Text,
  Left,
  Right,
  Body,
  View,
  Spinner,
} from "native-base";
import {AsyncStorage, 
  RefreshControl,
  TouchableOpacity,
  Alert
} from "react-native";
import Display from 'react-native-display';
import {fetchApi} from '../../includes/function';
import {networkFailure} from '../../includes/function';
import styles from "./styles";
const GLOBAL = require('../../includes/Global');

class notifylog extends Component {
  constructor(props) {
    super(props);
    this.state = {
     jsonData : '',
     isLoading : true,
     rmvCircle : false
    };
  }

  notifylogFun(){
    let userId = this.state.user;
    if(userId == null || userId==undefined){
      alert("User not found");
      return false;
    }
    const json = JSON.stringify({"userId":userId});
    return fetch(GLOBAL.BASE_URL+'services.php?action=notifylogFun',{
      method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        },
        body: json
      })
    .then(function(response) {
      if (!response.ok) {
        this.setState({isLoading: false,resultSet : false});
        throw Error(response.statusText);
      }
      return response;
    })
    .then((response) => response.json())
    .then((responseJson) => {
      if(responseJson.data.message == 'getData'){
        this.setState({isLoading: false, jsonData: responseJson.data.data, resultSet : true});
        return responseJson.data.data;
      }else if(responseJson.data.message == 'noData'){
        this.setState({isLoading: false, jsonData: responseJson.data.data, resultSet : false});
      }else{
        networkFailure("Network Failure.");
      }
    })
    .catch((error) => {
      networkFailure("Network Failure");
    });
  }

  componentWillMount() {
    AsyncStorage.getItem('userId', (err, result) => {
      this.setState({
        user: result
      },this.notifylogFun);
    });
  }

  toggleDisplay() {
    let toggle = !this.state.rmvCircle;
    this.setState({rmvCircle: toggle});
  }

  render() {
    if(this.state.isLoading == true ) {
      return (
        <Container style={styles.container}>
          <Header
            style={{ backgroundColor : GLOBAL.ThemeHeader}}
            androidStatusBarColor="#dc2015"
            iosBarStyle="light-content"
          >
            <Left>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon style={{ color : GLOBAL.ThemeMenu}} name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title style={{ color : GLOBAL.ThemeHeaderTitleColor}}>Notifications</Title>
            </Body>
            <Right />
          </Header>
            <View style={styles.loaderContainer}>
              <Spinner color="blue"/>
            </View>
        </Container>
      );
    } 
   else if(this.state.isLoading == false && this.state.resultSet == false) {
      return (
        <Container style={styles.container}>
          <Header
              style={{ backgroundColor : GLOBAL.ThemeHeader}}
              androidStatusBarColor="#dc2015"
              iosBarStyle="light-content"
            >
            <Left>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon style={{ color : GLOBAL.ThemeMenu}} name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title style={{ color : GLOBAL.ThemeHeaderTitleColor}}>Notifications</Title>
            </Body>
            <Right />
          </Header>
          <View style={styles.loaderContainer}>
            <Text>No Notifications Logs</Text>
          </View>
        </Container>
      );
    } 
    else
    {
      return (
        <Container style={styles.container}>
          <Header style={{ backgroundColor : GLOBAL.ThemeHeader}} androidStatusBarColor="#dc2015" iosBarStyle="light-content">
            <Left>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon style={{ color : GLOBAL.ThemeMenu}} name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title style={{ color : GLOBAL.ThemeHeaderTitleColor}}>Notifications</Title>
            </Body>
            <Right>
              <TouchableOpacity onPress={() => this.toggleDisplay()}>
                <Text style={{ color : GLOBAL.ThemeMenu}}>
                  Clear
                </Text>
              </TouchableOpacity>
            </Right>
          </Header>
          <Content>
            <List 
              dataArray={this.state.jsonData}
              renderRow={data =>
              <ListItem style={{borderBottomWidth: 1,marginLeft: 0, backgroundColor : data.rowBg}}>

                <Left>
                  <Text>
                    {data.text}
                  </Text>
                </Left>
                <Right>
                   <Display 
                    enable={this.state.rmvCircle} 
                    enterDuration={500} 
                    exitDuration={250}
                    exit="fadeOutLeft"
                    enter="fadeInLeft"
                  >
                    <Icon style={{color:'red'}} name="md-remove-circle" />
                  </Display>
                </Right>
              </ListItem>}
            />
          </Content>
        </Container>
      );
    }
  }
}

export default notifylog;

Upvotes: 1

Answers (2)

Priyanka Sadh

Reputation: 51

List content is rendered if we make our list by using dataSource :)

Upvotes: 0

Jayffe

Reputation: 1279

You want to toggle the Icon on-off depending on this.state.rmvCircle ?

{ this.state.rmvCircle && <Icon style={{color:'red'}} name="remove-circle" /> }

Upvotes: 1

Change nested component in react-native

Answers (2)

Related Questions