Not sure how to remove this FlatList from displaying by default on screen

user_14419747 0
Viewed 399

Currently, this - this is how the SearchBar and FlatList is showing up on the screen. Upon clicking on the SearchBar and typing one of the list components, it shows up this- this way. I want the FlatList to only appear when I click on the SearchBar. How do I implement this in the app? Something like a dropdown search bar...

import React from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { SearchBar } from 'react-native-elements';
import { Button, Menu, Divider, Provider, TextInput } from 'react-native-paper';

 const restaurantList = [
   {
     type: 'Italian',
     name: 'DiMaggio'
   },
   {
     type: 'Greek',
     name: 'Athena'
   }
 ];

export default class App extends React.Component {
  static navigationOptions = {
    title: 'Search for Restaurants'
  };
  constructor (props) {
    super(props);

    this.state = {
      loading: false,
      data: restaurantList,
      error: null,
      value: '',
    };
    this.arrayholder = [];
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '86%',
          backgroundColor: '#CED0CE',
          marginLeft: '14%'
        }}
      />
    );
  };

  searchFilterFunction = text => {
    this.setState({
      value: text
    });

    const newData = restaurantList.filter(item => {
      console.log(item.type)
      const itemData = `${item.name.toUpperCase()} ${item.type.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.includes(textData);
    });

    this.setState({
      data: newData
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
      />

    );
  };

  render () {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return (
       <Provider>
        <View
          style={{
            paddingTop: 50,
            flexDirection: 'row',
            justifyContent: 'center',
          }}>
            <View style={styles.container}>
              <FlatList
                keyExtractor={(item, index) => `${index}`}
                extraData={this.state}
                data={this.state.data}
                renderItem={({ item }) => (
                  <Text>{item.name} {item.type}</Text>
                )}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
              />
            </View>
        </View>
        <View style={styles.container}>
          <TextInput />
        </View>
      </Provider>
      );
    }
  }
}
searchbar react-native-flatlist react-native javascript
2 Answers

Try this way

this.state = {
      searchClicked: false
    };

 <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
       onFocus={() => this.setState({searchClicked: true})} 
       onBlur={() => this.setState({searchClicked: false})} 
      />



<View>{this.renderHeader()}</View>
    {this.state.searchClicked && <FlatList
      keyExtractor={(item, index) => `${index}`}
      extraData={this.state}
       data={this.state.data}
      renderItem={({ item }) => (
         <Text>{item.name} {item.type}</Text>
      )}
      ItemSeparatorComponent={this.renderSeparator}
      // ListHeaderComponent={this.renderHeader} <—- Remove from here —->
    />}
user_12833450

In case @Lakhani reply doesn't satisfy your question, I have another suggestion for you.

Your SearchBar should contain a TextInput. You can use onFocus and onBlur props to capture event you click on SearchBar or leave it.

...
      <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
        onFocus={()=>this.setState({showList: true})} // <---
        onBlur={()=>this.setState({showList: false})} // <---
      />
...

   render() {
      return (
         ...
         {
            this.state.showList && <FlatList ... />
         }
      )
   }
user_76988770
Related