Digital Renter navigation bar component

Inbox.screen.js

// Please, update Line 52 to line 62 (handling the query) to 

if (query) {
    inboxes = inboxes.filter(inbox => {
        let {headline, id} = inbox; 
        let client_name = inbox.client ? inbox.client.name : headline; 
        if (id == query || headline.includes(query) || client_name.includes(query) ) {
            return true; 
        }else{
            return false; 
        }
    })
}

// Changed sender to client and sender_name to client_name

Navbar.component.js

'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import I18n from './../../translation/i18n';

import styles from './Navbar.style'

export default class Navbar extends Component {
	constructor(props){
		super(props);
		this.state ={
			searching : false, 
			text: this.props.searchString ?? '',
		}
	}

	toggleSearching(visible){
		this.setState({searching: visible})
	}

	onChangeText(text) {
		this.setState({ text }, () => {
			if (this.props.onChangeText) { 
				this.props.onChangeText(text)
			}
		})
	}

  	render() {
  		const {searching} = this.state;
	    return (
	      	<View style={styles.navBar}>
	      		{ searching ? 
				<View style={styles.isSearchingContainer}>
					<View style={{flexDirection: 'row'}}>
				 		<Icon name="arrow-back" 
				 			size={30} 
				 			style={styles.icon}
				 			color="#63004f"
				 			onPress ={() =>{this.toggleSearching(false)}}
				 		/>
				 		<TextInput 
				 			placeholder={I18n.t('words.search')  +'...'}
				 			underlineColorAndroid="transparent"
				 			onChangeText={text => this.onChangeText(text)}
  							value={this.state.text}
  							autoFocus={true}
				 			style={styles.textInput} 
				 		/>
					</View>
				</View>
	      		: 
	      		<View style={styles.notSearchingContainer}>
		  			<Text style={styles.header}>{this.props.title}</Text>
				 	<View style={styles.rightNav}>
				 	  	<TouchableOpacity onPress={()=>{this.toggleSearching(true)}}>
				 			<Icon style={styles.navItem} name="search" size={25} color="white" />
				 	  	</TouchableOpacity>
				 	</View>
	      		</View>
	      		}
			</View>
    	);
  	}
}

Navbar.style.js

import theme from './../../style/theme';

const styles = {
	navBar:{
		/*height: 55,
		backgroundColor: theme.SECONDARY_COLOR,
		elevation: 2,
		paddingHorizontal: 15,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'*/
	},
	notSearchingContainer: {
		height: 55,
		backgroundColor: theme.SECONDARY_COLOR,
		elevation: 2,
		paddingHorizontal: 15,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	isSearchingContainer:{
		backgroundColor: 'white',
		alignItems: 'center',
		elevation:3,
		height: 55,
		justifyContent: 'center'
	},
	rightNav:{
		flexDirection: 'row'
	},

	navItem:{
		marginLeft: 25
	},
	header:{
		fontSize: theme.FONT_SIZE_LARGE,
		color: theme.WHITE_COLOR
	},
	text:{
		color: 'green',
		marginTop: 10,
	},
	textInput: {
		width:250,
		height: 40,
		marginTop: 8,
		marginRight: 40,	
		fontSize: theme.FONT_SIZE_MEDIUM
	},
	icon:{
		marginRight:15,
		marginTop: 8,
	}
}
export default styles;