verdnatura-chat/app/views/ShareListView/Header/Header.ios.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Keyboard, StyleSheet, View } from 'react-native';
import ShareExtension from 'rn-extensions-share';

import SearchBox from '../../../containers/SearchBox';
import * as HeaderButton from '../../../containers/HeaderButton';
import { themes } from '../../../constants/colors';
import sharedStyles from '../../Styles';
import { animateNextTransition } from '../../../utils/layoutAnimation';

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		...sharedStyles.separatorBottom
	}
});

const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSearch, theme }) => {
	const [text, setText] = useState('');

	const onChangeText = searchText => {
		onChangeSearchText(searchText);
		setText(searchText);
	};

	const onCancelPress = () => {
		Keyboard.dismiss();
		onChangeText('');
		cancelSearch();
		animateNextTransition();
	};

	const onFocus = () => {
		initSearch();
		animateNextTransition();
	};

	return (
		<View
			style={[
				styles.container,
				{
					borderColor: themes[theme].separatorColor,
					backgroundColor: themes[theme].headerBackground
				}
			]}>
			{!searching ? <HeaderButton.CancelModal onPress={ShareExtension.close} testID='share-extension-close' /> : null}
			<SearchBox
				value={text}
				hasCancel={searching}
				onFocus={onFocus}
				onCancelPress={onCancelPress}
				onChangeText={onChangeText}
				testID='rooms-list-view-search'
				key='rooms-list-view-search'
			/>
		</View>
	);
});

Header.propTypes = {
	searching: PropTypes.bool,
	onChangeSearchText: PropTypes.func,
	initSearch: PropTypes.func,
	cancelSearch: PropTypes.func,
	theme: PropTypes.string
};

export default Header;