component.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, View, Alert } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';

import {
  Container,
  Content,
  Icon,
  Item,
  Input,
  Label,
  Form,
  Button,
  Text,
  ListItem,
  CheckBox,
  Body,
} from 'native-base';
import { requestRepSearch, resetData } from '../actions/searchReps';
import { ErrorText } from '../components/Text';

class REPSearch extends Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    title: 'REP Search',
    drawerIcon: () => <Icon name="ios-home" />,
  };

  static propTypes = {
    dispatch: PropTypes.func,
    showLoading: PropTypes.bool,
    showAlert: PropTypes.bool,
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // this will prevent any state changes AT ALL
    // you should be checking if the state needs to be changed here, and returning the difference
    return prevState;
  }
  constructor(props) {
    super(props);
    this.state = {
      firstname: '',
      lastname: '',
      company: '',
      secureid: '',
      exact: false,
      not_revoked_access: false,
      showError: false,
      showLoading: false,
    };
  }
  componentDidMount() {
    console.log('i am mounted here');
    this.props.dispatch(resetData());
  }

  componentDidUpdate(prevProps) {
    // see comment in render
    this.setState({ showLoading: this.props.showLoading });
    
    // only trigger this when the prop actually changes
    // otherwise this will emit a new Alert every time the component rerenders in response to:
    // - component state changing
    // - parent re-rendering
    if (!prevProps.showAlert && this.props.showAlert) {
      Alert.alert(
        'No Match Found',
        'No reps checked in',
        [
          {
            text: 'OK',
          },
        ],
        { cancelable: false },
      );
    }
  }

  handleRepSearch = () => {
    if (
      this.state.firstname === '' &&
      this.state.lastname === '' &&
      this.state.company === '' &&
      this.state.secureid === ''
    ) {
      this.setState({ showError: true });
    } else {
      this.setState({ showError: false });
      this.props.dispatch(requestRepSearch({
        user_fname: this.state.firstname,
        user_lname: this.state.lastname,
        user_company: this.state.company,
        user_id: this.state.secureid,
        exact: this.state.exact ? '1' : '0',
        not_revoked_access: this.state.not_revoked_access ? '1' : '0',
      }));
    }
  };

  handleChangeFirstNameText = (text) => {
    this.setState({ firstname: text, showError: false });
  };
  handleChangeLastNameText = (text) => {
    this.setState({ lastname: text, showError: false });
  };
  handleChangeCompanyText = (text) => {
    this.setState({ company: text, showError: false });
  };
  handleSecureIDText = (text) => {
    this.setState({ secureid: text, showError: false });
  };
  handleExactPressed = () => {
    // or just this.setState({exact: !this.state.exact}); 
    if (this.state.exact) {
      this.setState({ exact: false });
    } else {
      this.setState({ exact: true });
    }
  };
  handleRevokedPressed = () => {
    // as above
    if (this.state.not_revoked_access) {
      this.setState({ not_revoked_access: false });
    } else {
      this.setState({ not_revoked_access: true });
    }
  };

  render() {
    const errorMessege = 'Please enter FirstName/LastName/Company/ID to search';
    
    // you can use this.props.showLoading in your code all the way
    // there's no need for this.state.showLoading at all as it's just
    // a copy of the props data
    
    console.log(`LOADING ${this.props.showLoading}`);

    return (
      <Container>
        <Content padder style={styles.content}>
          <Spinner
            visible={this.state.showLoading}
            textContent="Searching Reps"
            textStyle={{ color: '#FFF' }}
          />

          <Form>
            <Item floatingLabel>
              <Label>FirstName</Label>
              <Input onChangeText={this.handleChangeFirstNameText} />
            </Item>
            <Item floatingLabel>
              <Label>LastName</Label>
              <Input onChangeText={this.handleChangeLastNameText} />
            </Item>
            <Item floatingLabel>
              <Label>Company</Label>
              <Input onChangeText={this.handleChangeCompanyText} />
            </Item>
            <Item floatingLabel>
              <Label>SEC3URE ID</Label>
              <Input onChangeText={this.handleSecureIDText} />
            </Item>
          </Form>
          <View style={styles.checkboxView}>
            <View style={styles.checkboxExact}>
              <ListItem style={styles.checkboxExact}>
                <CheckBox checked={this.state.exact} onPress={this.handleExactPressed} />
                <Body>
                  <Text style={styles.notRevokedAccessText}>Exact</Text>
                </Body>
              </ListItem>
            </View>
            <View style={styles.checkboxRevokeAccess}>
              <ListItem>
                <CheckBox
                  checked={this.state.not_revoked_access}
                  onPress={this.handleRevokedPressed}
                />
                <Body>
                  <Text style={styles.notRevokedAccessText}>Not Revoked Access</Text>
                </Body>
              </ListItem>
            </View>
          </View>
          {this.state.showError ? <ErrorText displayText={errorMessege} /> : ''}
          <Button success style={styles.searchButton} onPress={this.handleRepSearch}>
            <Text> Search </Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    backgroundColor: '#FFF',
  },
  searchButton: {
    marginTop: '5%',
    alignSelf: 'center',
  },
  listItemStyles: {
    height: 45,
  },
  checkboxView: {
    //  backgroundColor: 'yellow',
    flexDirection: 'row',
    alignSelf: 'stretch',
  },
  checkboxExact: {
    // backgroundColor: 'yellow',

    flex: 0.5,
  },
  checkboxRevokeAccess: {
    // backgroundColor: 'pink',
    flex: 1,
  },
  notRevokedAccessText: {
    // backgroundColor: 'pink',
    fontSize: 15,
  },
});

const mapStateToProps = state => ({
  showLoading: state.searchReps.showLoading,
  showAlert: state.searchReps.showAlert,
});
export default connect(mapStateToProps)(REPSearch);