@uiw/react-native/lib/SearchInputBar/index.js

UIW for React Native

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, TextInput, } from 'react-native';
import Icon from '../Icon';
import Loader from '../Loader';
import Text from '../Typography/Text';
import { useTheme } from '@shopify/restyle';
const SearchInputBar = (props) => {
    const inputRef = React.createRef();
    const theme = useTheme();
    const [state, setState] = useState({
        showIcon: false,
    });
    const needFocus = (type) => {
        if (type === 'close') {
            props.onClear?.();
        }
        else if (type === 'search') {
            props.onSearch?.();
            return;
        }
        if (type === 'actived') {
            setState({ showIcon: true });
        }
        inputRef.current && inputRef.current.focus();
    };
    // 右侧搜索
    const renderSearch = () => {
        const { showActionButton, searchRender, touchProps, actionName = '搜索' } = props;
        const { showIcon } = state;
        if (showActionButton || showIcon) {
            return searchRender ? (searchRender) : (<TouchableOpacity {...touchProps} style={[styles.search, { paddingHorizontal: 10 }]}>
          <Text color="primary_background">{actionName}</Text>
        </TouchableOpacity>);
        }
        return null;
    };
    const { value, onChangeText, showActionButton, inputStyle, containerStyle, searchIcon, closeIcon, loading = false, ...other } = props;
    return (<Loader loading={loading} rounded={5} maskColor="transparent">
      <View style={[styles.centerFlex]}>
        <View style={StyleSheet.flatten([
            { backgroundColor: theme.colors.mask || '#fff' },
            styles.searchContainer,
            styles.centerFlex,
            containerStyle,
        ])}>
          <TouchableOpacity onPress={() => needFocus('search')}>
            <Icon name="search" size={14} color={theme.colors.text} height={'100%'} {...searchIcon}/>
          </TouchableOpacity>
          <TextInput {...other} value={value} onChangeText={onChangeText} ref={inputRef} style={[{ color: theme.colors.primary_text || '#A6ACB1' }, styles.textInput, inputStyle]} onFocus={(e) => {
            if (showActionButton !== null) {
                setState({ showIcon: true });
            }
            other?.onFocus?.(e);
        }} onBlur={(e) => {
            if (showActionButton !== null && !value && !loading) {
                setState({ showIcon: false });
            }
            other?.onBlur?.(e);
        }}/>
          {Boolean(value) && (<TouchableOpacity style={{}} onPress={() => needFocus('close')}>
              <Icon name="close" size={14} color={theme.colors.primary_text || '#A6ACB1'} height={'100%'} {...closeIcon}/>
            </TouchableOpacity>)}
        </View>
        {renderSearch()}
      </View>
    </Loader>);
};
export default SearchInputBar;
const styles = StyleSheet.create({
    centerFlex: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignContent: 'center',
    },
    searchContainer: {
        height: 40,
        borderRadius: 5,
        flex: 1,
        paddingHorizontal: 15,
    },
    textInput: {
        paddingVertical: 0,
        height: '100%',
        flex: 1,
        fontSize: 14,
        fontWeight: '400',
        paddingLeft: 10,
    },
    search: {
        justifyContent: 'center',
        borderWidth: 0,
    },
});