react-native#FlatList JavaScript Examples

render() {
    const { options } = this.props;
    return (
      <KeyboardAwareScrollView
        innerRef={this.getScrollRef}
      >
        <FlatList
          ref={this.setListRef}
          data={options}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
          ListFooterComponent={this.renderListFooter}
          extraData={options}
        />
      </KeyboardAwareScrollView>
    );
  }

render() {
    return (
      <FlatList
        data={data}
        renderItem={this._renderItem}
        keyExtractor={(item) => item.id}
      />
    );
  }

export default function AllClansScreen() {
  var theme = useSelector(i => i.themes[i.theme]);
  var { width } = useDimensions().window;
  var dash = useSelector(i => i.clanBookmarks);
  return (
    <FlatList
      key={width}
      style={{ backgroundColor: theme.page.bg }}
      contentContainerStyle={{ padding: 4 }}
      numColumns={width > 800 ? 2 : 1}
      data={[
        { type: "clan_requirements", key: "clanreq" },
        ...dash.map(i => {
          i.type = "clan_stats";
          i.key = i.clan_id;
          return i;
        }),
        { type: "blankHack", key: "blankHack" },
      ]}
      renderItem={({ item }) => <Clan item={item} />}
      keyExtractor={item => (item.key || "xd").toString()}
    />
  );
}

render() {
    return (
      <FlatList
        // data={datas}
        data={this.state.feedList}
        renderItem={({item}) => (
          <View style={Styles.container_content}>
            <PostCard
              detail={{
                uid: item.postID,
                username: item.username,
                user_avatar: item.photo,
                image: item.post,
                caption: item.caption,
                location: item.country,
                city: item.city
              }}
              key={item.uid}
              navigation={this.props.navigation}
            />
          </View>
        )} />
    );
  }

render() {
    const { options } = this.props;
    return (
      <FlatList
        data={options}
        renderItem={this.renderItem}
      />
    );
  }

render() {
    if (this.account.needRecovery) {
      return <HDWalletRecoveryComponent />;
    }
    if (!this.account.hasCreated) {
      return this.renderDefaultPage();
    }
    return (
      <View style={styles.main}>
        <FlatList
          refreshControl={
            <RefreshControl
              refreshing={this.isRefreshing}
              onRefresh={this._onRefresh}
              tintColor={theme.iconColor}
              title={i18n.t("common-loading")}
              titleColor={theme.iconColor}
              colors={["#f00", "#0f0", "#00f"]}
              progressBackgroundColor="#ffffff"
            />
          }
          style={styles.list}
          ListFooterComponent={<FlatListLoadMoreView status={"nomore"} style={styles.loadMore} />}
          ListHeaderComponent={this._renderHeader}
          ItemSeparatorComponent={this._renderSeparator}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          data={this.coins}
          onMomentumScrollEnd={this._onMomentumScrollEnd}
          initialNumToRender={5}
          removeClippedSubviews={true}
          showsVerticalScrollIndicator={false}
          {...this._panResponder.panHandlers}
        />
        <MessageBox ref={ref => (this.msgbox = ref)} />
      </View>
    );
  }

Feed = () => {

  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetchPosts();
  }, [])

  const fetchPosts = async () => {
    try {
      const postsData = await API.graphql(graphqlOperation(listPosts));
      setPosts(postsData.data.listPosts.items);
    } catch (e) {
      console.log(e.message);
    }
  }

  return (
    <FlatList
      data={posts}
      renderItem={({item}) => <Post post={item} />}
      keyExtractor={({id}) => id}
      ListHeaderComponent={Stories}
    />
  )
}

render() {
    const { navigation } = this.props;
    const { title, items, snapPoints } = this.props.route.params || {};

    return (
      <View style={{ flex: 1 }}>
        <View style={{ padding: 10 }}>
          <Text
            style={{
              textAlign: 'center',
              color: '#505050',
              marginBottom: 10,
              fontSize: 15,
              fontWeight: '600',
              marginVertical: 10
            }}
          >
            {title}
          </Text>
        </View>
        <FlatList
          data={items}
          renderItem={this.renderItem}
          keyboardShouldPersistTaps={true}
          automaticallyAdjustContentInsets={false}
          keyExtractor={item => item.value}
          style={{ flex: 1, backgroundColor: 'white' }}
        />
      </View>
    );
  }

function SearchHistoryList({ data }) {
  return (
    <FlatList
      style={{ padding: 16 }}
      data={data}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <Box py={6}>
          <SimpleCardContainer>
            <SimpleCardTitle>{item.title}</SimpleCardTitle>
          </SimpleCardContainer>
        </Box>
      )}
      ListHeaderComponent={
        <Text color="textLight" mb={10}>
          Son Aramalar
        </Text>
      }
    />
  )
}

export function Cart() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>My Cart</Text>
      <FlatList
        data={DATA}
        renderItem={({ item, index }) => <Item item={item} last={index == 1} />}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

MoviesRow = ({ data, title, navigation, type }) => {
  return (
    <View>
      <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
        <Text style={Styles.text}>{title}</Text>
        <TouchableNativeFeedback onPress={() => navigation.navigate("Movielist", { data, type, title })}>
          <Text style={Styles.textMore}>More</Text>
        </TouchableNativeFeedback>
      </View>
      <FlatList
        data={data}
        horizontal
        renderItem={({ item }) => <MoviePoster item={item} navigation={navigation} type={type} />}
        keyExtractor={(item) => item.id.toString()}
        style={{ margin: 8, marginTop: 4 }}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
}

export function ProductsList({navigation}) {
  const {data, loading, error} = useQuery(GET_ALL_PRODUCTS, {
    fetchPolicy: 'cache-and-network',
  });

  if (loading) {
    return <Loading hasBackground />;
  }

  if (error) {
    return <Error error={error} />;
  }

  function renderProduct({item: product}) {
    return (
      <Product
        product={product}
        onPress={() => {
          navigation.navigate('ProductDetails', {
            productId: product.id,
          });
        }}
      />
    );
  }

  return (
    <FlatList
      style={styles.productsList}
      contentContainerStyle={styles.productsListContainer}
      data={data.products}
      renderItem={renderProduct}
    />
  );
}

export function ProductsListScreen({navigation}) {
  const {logout} = React.useContext(AuthContext);
  const switchTheme = React.useContext(ThemeContext);
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <HeaderIconsContainer>
          <HeaderIconButton
            name={'color-palette'}
            onPress={() => {
              switchTheme();
            }}
          />
          <HeaderIconButton
            name={'log-out'}
            onPress={() => {
              logout();
            }}
          />
        </HeaderIconsContainer>
      ),
    });
  }, [navigation, logout, switchTheme]);
  const products = useGet('/products');

  function renderProduct({item: product}) {
    return <Product product={product} />;
  }

  return (
    <FlatList
      contentContainerStyle={styles.productsListContainer}
      data={products}
      renderItem={renderProduct}
      keyExtractor={product => `${product.id}`}
    />
  );
}

Options = ({ mainScrollView }) => {
  return (
    <View
      style={{
        width: SCREEN_WIDTH * 0.8,
        //alignContent: "center"
      }}
    >
      <FlatList
        data={_basicShapes}
        numColumns={2}
        style={{
          marginTop: 5,
          //width: SCREEN_WIDTH *0.7,
          alignSelf: "center",
        }}
        keyExtractor={(item) => `${item.id} basic shapes`}
        renderItem={({ index, item }) => (
          <TouchableOpacity
            style={styles.shapeOption}
            onPress={() => {
              mainScrollView.scrollTo({
                x: SCREEN_WIDTH * 0.8 * (item.id + 1),
                y: 0,
                animated: true,
              });
            }}
          >
            <Text style={{ textAlign: "center" }}>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

function SearchResults({route}) {
  const [searchPosts, setSearchPosts] = useState([]);
  useEffect(() => {
    if (route.params.params.tag) {
      getTagPosts(route.params.params.tag).then(res => {
        setSearchPosts(res.data.data);
      });
    } else if (route.params.params.company) {
      getCompanyPosts(route.params.params.company).then(res => {
        setSearchPosts(res.data.data);
      });
    } else {
      getSearchPosts(route.params.params).then(res => {
        setSearchPosts(res.data.data);
      });
    }
  }, [route.params.params]);
  return (
    <React.Fragment>
      <Header title="Arama Sonuçları" />
      {searchPosts.length ? (
        <FlatList
          data={searchPosts}
          renderItem={item => <PostPreview data={item.item} />}
          keyExtractor={item => item.slug}
        />
      ) : (
        <PostsLoading />
      )}
    </React.Fragment>
  );
}

render() {
        const {rows, initialScrollIndex} = this.props;
        const {data, rowHeight, initialRow} = this.state;
        const heightOfContainer = rows * rowHeight;
        const {maxScrollIndex} = this._maxIndex();
        return (
            <View style={{height: heightOfContainer}}>
                <View pointerEvents={'box-none'} style={this._lineStyle(BORDER_LINE_POSITION.TOP)}/>
                <View pointerEvents={'box-none'} style={this._lineStyle(BORDER_LINE_POSITION.MIDDLE)}/>
                <View pointerEvents={'box-none'} style={this._lineStyle(BORDER_LINE_POSITION.BOTTOM)}/>
                <FlatList
                    ref={ref => this.flatList = ref}
                    style={this._getFlatListStyle()}
                    data={data}
                    initialScrollIndex={Math.min(initialScrollIndex, maxScrollIndex)}
                    getItemLayout={(data, index) => ({length: rowHeight, offset: index * rowHeight, index})}
                    keyExtractor={(item, index) => index.toString()}
                    onScrollEndDrag={this._onScrollEndDrag}
                    onMomentumScrollEnd={this._onMomentumScrollEnd}
                    renderItem={this._renderItem}
                    onScroll={this._onScroll}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    scrollsToTop={false}
                />
            </View>
        );
    }

ListText = ({scrollX}) => {
  return (
    <View style={{height: HEADER_HEIGHT, marginVertical: MARGIN_hScale}}>
      <FlatList
        initialNumToRender={DummyCardImage.length}
        scrollEnabled={false}
        showsVerticalScrollIndicator={false}
        data={DummyCardImage}
        renderItem={({item, index}) => (
          <Item item={item} index={index} scrollX={scrollX} />
        )}
      />
    </View>
  );
}

function BLEReadcharacteristic(ReduxStore) {

  const [text,setText] = useState({'text':'write something to device'});

    return(
        <SafeAreaView style={styles.container}>
          <Text>{ReduxStore.selectedCharacteristic.uuid}</Text>
            <FlatList
                data={[ReduxStore.selectedCharacteristic]}
                renderItem={({ item }) => 
                <>
                <Item characteristic={item} />
                <TextInput
                 onChangeText={(text) => setText({text})}
                  style={{ height: 40, color: 'black', borderColor: 'gray', borderWidth: 1 }}
                  value={text.text}
                />
                <Button
                  title="Write"
                  onPress={() => handleClick(ReduxStore,text.text)}
                ></Button>
                </>
                }
                keyExtractor={item => item.id.toString()}
                ListEmptyComponent={DataActivityIndicator}
            />
        </SafeAreaView>
    );
}

export default function homeScreen({navigation}) {
  const data = [
    {key: '1'},
    {key: '2'},
    {key: '3'},
    {key: '4'},
    {key: '5'},
    {key: '6'},
    {key: '7'},
    {key: '8'},
    {key: '9'},
    {key: '10'},
  ];

  const storyOnPress = () => navigation.navigate('StoryScreen');

  const post = {
    userName: 'John Doe',
    placeName: 'Istanbul, Turkey',
    imgUrl: 'https://picsum.photos/1920/1080',
    likeCount: 103,
    commentCount: 21,
    text:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut sem viverra.',
    publishDate: new Date().toDateString(),
  };
  const stories = [
    {
      key: 'JohnDoe',
      hasStory: true,
      src: 'https://picsum.photos/600',
    },
    {
      key: 'CarlaCoe',
      hasStory: true,
      src: 'https://picsum.photos/600',
    },
    {
      key: 'DonnaDoe',
      hasStory: true,
      src: 'https://picsum.photos/600',
    },
    {
      key: 'JuanDoe',
      hasStory: true,
      src: 'https://picsum.photos/600',
    },
    {
      key: 'MartaMoe',
      hasStory: true,
      src: 'https://picsum.photos/600',
    },
    {
      key: 'PaulaPoe',
      hasStory: true,
      src: 'https://picsum.photos/600',
    },
  ];

  return (
    <FlatList
      style={{backgroundColor: colors.background}}
      data={data}
      ListHeaderComponent={() => (
        <StoryContainer stories={stories} storyOnPress={storyOnPress} />
      )}
      renderItem={({item, index}) => (
        /*<View style={{flex: 1, alignItems: 'center'}}>
          <Image
            source={images.harun}
            style={{height: 512, width: 512, resizeMode: 'contain'}}
          />
        </View>
        */
        <Post post={post} />
      )}
    />
  );
}

render() {
    const {intl} = this.props;
    const {data} = this.state;
    const {formatMessage} = intl;

    return (
      <SafeAreaView style={styles.warper}>
        <Header
          styleTitle={styles.titleHeader}
          title={formatMessage(message.header)}
          styleHeader={styles.header}
        />
        <View style={styles.contact}>
          <Text
            text={formatMessage(message.contact)}
            style={styles.textContact}
            onPress={this.onChangeFAQ}
          />
        </View>
        <View style={{flex: 1}}>
          <View style={styles.detailHeader}>
            <MediumText
              style={styles.textHeader}
              text={formatMessage(message.date)}
            />
            <MediumText
              style={styles.textHeader}
              text={formatMessage(message.textContact)}
            />
          </View>
          <FlatList
            style={{flex: 1}}
            ref={this.setRef}
            data={data}
            keyExtractor={item => item.dateStr}
            renderItem={this.renderItem}
          />
        </View>
      </SafeAreaView>
    );
  }

export default function JobList(props) {
    const [data, setdata] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {
        fetch('https://getplaced.pythonanywhere.com/api/blog/', {
            method: "GET"
        })
            .then(resp => resp.json())
            .then(data => {
                setdata(data)
                setLoading(false)
            })
            .catch(error => Alert.alert("error", error))
    }

    useEffect(() => {
        loadData();
    }, [])

    const clickedItem = (data) => {
        props.navigation.navigate("Blog-Detail", { data: data })
    }

    const renderData = (item) => {
        var date = new Date(`${item.post_date}`)
        return (
            <>
                <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                    <View style={{ flex: 1 }}>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#000", fontSize: 16, marginLeft: 15, }}>
                            {item.title}
                            <Text style={{ fontSize: 13, color: '#808080' }}>    -   ({date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text>
                        </Text>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#808080", fontSize: 12, marginLeft: 17, }}>
                            {item.snippet}
                        </Text>

                    </View>
                </Card>
            </>
        )
    }
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)
                }}
                onRefresh={() => loadData()}
                refreshing={loading}
                keyExtractor={item => `${item.id}`}
            />
            <FAB
                style={styles.fab}
                small={false}
                icon="plus"

                onPress={() => props.navigation.navigate("Create")}
            />
        </View>


    )
}

MyResources = function ({ navigation }) {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    navigation.addListener('focus', () => {
      search({ userID: userID() })
        .then(setItems)
        .catch(err => {
          console.log(err);
          Alert.alert('ERROR', 'Please try again. If the problem persists contact an administrator.', [{text: 'OK'}]);
        });
    })
  }, []);

  const Item = (props) => {
    return (
      <TouchableOpacity style={styles.itemTouchable}
          onPress={() => { navigation.navigate('Edit Donation', { item: props }); }}>
        <View style={styles.itemView}>
          <Text style={styles.itemName}>{props.name}</Text>
          <Text style={styles.itemQuantity}> ( {props.quantity} ) </Text>
        </View>
        <Text style={styles.itemDescription}>{props.description}</Text>
      </TouchableOpacity>
    );
  };
  
  if (items.length > 0) {
    return (
      <FlatList style={styles.flatListView}
        data={items}
        renderItem={({ item }) => <Item {...item} />}
        keyExtractor={item => item.id || item['_id']}
      />
    )
  } else {
    return (
      <View style={styles.emptyListView}>
        <Text style={styles.emptyListText}>You currently have no donations listed</Text>
      </View>
    )
  }
}

CategoryScreen = (props) => {
  const [refreshing, setRefreshing] = useState(false)
  const { products, navigation } = props

  const slug = navigation.getParam('slug', '')

  useEffect(() => {
    props.showCategory(slug)
  }, [])

  const pullRefresh = () => {
    props.showCategory(slug)
  }

  const renderItem = ({ item, index }) => (
    <CardProduct
      item={item}
      onPress={() => onPress(item)}
    />
  )

  const onPress = (item) => {
    props.getDetail('/' + item?.slug)
    navigation.navigate('ProductDetail', {title: item.title, stock: item.stock})
  }

  return (
    <SafeAreaView style={apply('flex bg-gray-100')}>
      <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
      {products?.fetching ? (
        <View style={styles.emptyState}>
          <ActivityIndicator size="large" color={apply('gray-900')} />
        </View>
      ) : (
        <FlatList
          data={products?.data[0]?.product}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={false}
          initialNumToRender={6}
          contentContainerStyle={apply('bg-gray-100 py-2')}
          renderItem={renderItem}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={() => pullRefresh()} />
          }
          horizontal={false}
          numColumns={2}
          key={2}
          onEndReachedThreshold={0.1}
          ListEmptyComponent={() =>
            <View style={styles.emptyState}>
              <Text>No data.</Text>
            </View>
          }
        />
      )}
    </SafeAreaView>
  )
}

function UserActivityPage({ toggleDrawer, filters }) {
  var moment = useMoment();
  var theme = useSelector(i => i.themes[i.theme]);
  var date = moment().tz('America/Chicago');
  var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
  var route = useRoute();
  if (route.params.date) {
    dateString = route.params.date;
  }
  var username = route.params.username
  var userdata = useAPIRequest({
    endpoint: 'user',
    data: { username }
  })
  let user_id = userdata?.user_id
  var dataraw = useAPIRequest(user_id ? {
    endpoint: 'user/activity',
    data: { day: dateString, user_id },
    cuppazee: true
  } : null)
  if (!dataraw) return (
    <View style={{ flex: 1, alignContent: "center", justifyContent: "center", backgroundColor: theme.page.bg }}>
      <ActivityIndicator size="large" color={theme.page.fg} />
    </View>
  )
  var activityList = ActivityConverter(dataraw, filters, userdata);
  return <View style={{ flex: 1 }}>
    <FlatList
      contentContainerStyle={{ width: 500, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", paddingBottom: 88 }}
      style={{ flex: 1, backgroundColor: theme.page.bg }}
      extraData={[userdata?.username]}
      ListHeaderComponent={<View>
        <View style={{ padding: 4 }}>
          <Card noPad>
            <DateSwitcher dateString={dateString} toggleDrawer={toggleDrawer} />
            <ActivityOverview date={dateString} user_id={user_id} filters={filters} />
          </Card>
        </View>
      </View>}
      // getItemLayout={(data, index) => (
      //   { length: data.height||0, offset: data.offset||0, index }
      // )}
      data={activityList.sort((a, b) => new Date(b.time) - new Date(a.time))}
      renderItem={({ item: act }) => <ListItem act={act} userdata={userdata} />}
      keyExtractor={(item, index) => item.key}
    />
    <UserFAB username={username} user_id={user_id} />
  </View>
}

IncidentList = styled(FlatList)`
  margin-top: 32px;
`

export default function MovieList(props) {

  const [ movies, setMovies ] = useState([]);
  let token = null;

  const getData = async () => {
    token = await AsyncStorage.getItem('MR_Token');
    if (token) {
      getMovies();
    } else {
      props.navigation.navigate("Auth")
    }
  };
  
  useEffect(() => {
    getData();
  }, []);

  const getMovies = () => {
    console.log(token);
    fetch(`http://www.dynatraceworkshops.com:8079/api/movies/`, {
      method: 'GET',
      headers: {
        'Authorization': `Token ${token}`
      }
    })
    .then( res => res.json())
    .then( jsonRes => setMovies(jsonRes))
    .catch( error => console.log(error));
  }

  const movieclicked = (movie) => {
    props.navigation.navigate("Detail", {movie: movie, title: movie.title, token: token})
  }

  return (
    <View>
      <Image source={require('../assets/MR_logo.png')}
        style={{width: '100%', height: 135, paddingTop: 30}}
        resizeMode="contain"/>

      <FlatList 
        data={movies}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => movieclicked(item)}>
            <View style={styles.item}>
              <Text style={styles.itemText}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
}

render() {
    const { coin, showModal } = this.state;
    const { localLabelFromLocal, convertBalanceFromBCH, showBalance, noBorder } = this.props;
    const balance = !COINS[coin].disabled && this.props.balance[coin];
    const { label, icon, disabled } = COINS[coin];
    const { cBalance } = convertBalanceFromBCH(balance, coin);

    return (
      <View style={[styles.wrapper, !noBorder && styles.wrapperBorder]}>
        <TouchableWithoutFeedback onPress={this.handleShowModal}>
          <View style={styles.optionTrigger}>
            <Image style={styles.icon} source={icon} resizeMode="cover" />
            <View style={styles.leftWrapper}>
              <Text style={styles.coinName}>{label}</Text>
              <Text style={styles.secondary}>{coin}</Text>
            </View>
            <View style={{ flex: 1 }} />
            {showBalance && (
              <View style={styles.rightWrapper}>
                <Text style={styles.priceByLocalCurrency}>
                  {localLabelFromLocal(cBalance)}
                </Text>
                <Text style={styles.secondary}>
                  {(disabled || !balance) ? 'Coming Soon' : `${minUnitAmountToBCH(balance.confirmed, coin)} ${coin}`}
                </Text>
              </View>
            )}
            <Ionicons
              style={showBalance ? styles.iconWithBalance : styles.iconUp}
              name="ios-arrow-up"
              size={18}
              color={staticLabelColor}
            />
          </View>
        </TouchableWithoutFeedback>
        <OBLightModal
          animationType="slide"
          transparent
          visible={showModal}
          onRequestClose={() => {}}
        >
          <Header
            modal
            left={<NavCloseButton />}
            onLeft={() => this.setState({ showModal: false })}
          />
          <FlatList
            keyExtractor={this.keyExtractor}
            data={Object.keys(COINS)}
            renderItem={this.renderItem}
          />
        </OBLightModal>
      </View>
    );
  }

render() {
    return (
      <View style={styles.main}>
        <Header
          style={{ backgroundColor: this.backgroundColor }}
          title={this.title}
          leftButtons={CoinDetailScreen.navigatorButtons.leftButtons}
          rightButtons={this.rightButtons}
          navigator={this.navigator}
        />
        <CoinHeader coin={this.coin} backgroundColor={this.backgroundColor} />
        <SectionHeader type={this.txTypeText} onTxTypeButtonPress={this.onTxTypeButtonPress} />
        <FlatList
          refreshControl={
            <RefreshControl
              refreshing={this.isRefreshing}
              onRefresh={this._onRefresh}
              tintColor={theme.textColor.minorTitle1}
              title={i18n.t("common-loading")}
              titleColor={theme.textColor.minorTitle1}
              colors={["#f00", "#0f0", "#00f"]}
              progressBackgroundColor="#ffffff"
            />
          }
          ListEmptyComponent={this._renderEmptyComponent}
          ListFooterComponent={<FlatListLoadMoreView status={this.loadMoreStatus} />}
          onEndReached={this._onEndReached}
          onEndReachedThreshold={0.3}
          // getItemLayout={(data, index) => ({length: ITEM_HEIGHT, offset: (ITEM_HEIGHT + SEPARATOR_HEIGHT) * index, index})}
          removeClippedSubviews={true}
          initialNumToRender={5}
          data={this.txs}
          extraData={this.txs.length}
          renderItem={this._renderItem}
          ItemSeparatorComponent={this._renderSeparator}
          keyExtractor={this._keyExtractor}
          style={styles.list}
        />
        <Footer>
          <Button
            title={i18n.t("wallet-coindetail-send")}
            containerStyle={styles.buttonContainer}
            buttonStyle={[styles.button, styles.txButton, { backgroundColor: this.backgroundColor }]}
            titleStyle={[styles.buttonText, styles.txButtonText]}
            onPress={this.onTxButtonPress}></Button>
          <Button
            title={i18n.t("wallet-coindetail-receive")}
            containerStyle={styles.buttonContainer}
            buttonStyle={[styles.button, styles.receiveButton]}
            titleStyle={styles.buttonText}
            onPress={this.onReceiveButtonPress}></Button>
        </Footer>
        <ProgressHUD ref={this.handleHUDRef} />
        <ActionSheet
          ref={ref => (this.actionSheet = ref)}
          options={[
            i18n.t("wallet-coindetail-section-type-total"),
            i18n.t("wallet-coindetail-section-type-receive"),
            i18n.t("wallet-coindetail-section-type-send"),
            i18n.t("wallet-coindetail-section-type-failed"),
            i18n.t("wallet-coindetail-section-actionsheet-cancel"),
          ]}
          cancelButtonIndex={4}
          tintColor={theme.linkColor}
          onPress={this.onActionSheetItemPress}
        />
        <MessageBox ref={ref => (this.msgbox = ref)} />
      </View>
    );
  }

function Search(props) {
    const [users, setUsers] = useState([])
    return (
        <View style={[utils.backgroundWhite, container.container]}>
            <View style={{ marginVertical: 30, paddingHorizontal: 20 }}>
                <TextInput
                    style={utils.searchBar}
                    placeholder="Type Here..."
                    onChangeText={(search) => props.queryUsersByUsername(search).then(setUsers)} />
            </View>


            <FlatList
                numColumns={1}
                horizontal={false}
                data={users}
                renderItem={({ item }) => (
                    <TouchableOpacity
                        style={[container.horizontal, utils.padding10Sides, utils.padding10Top]}
                        onPress={() => props.navigation.navigate("Profile", { uid: item.id, username: undefined })}>

                        {item.image == 'default' ?
                            (
                                <FontAwesome5
                                    style={[utils.profileImage, utils.marginBottomSmall]}
                                    name="user-circle" size={50} color="black" />

                            )
                            :
                            (
                                <Image
                                    style={[utils.profileImage, utils.marginBottomSmall]}
                                    source={{
                                        uri: item.image
                                    }}
                                />
                            )
                        }
                        <View style={utils.justifyCenter}>
                            <Text style={text.username}>{item.username}</Text>
                            <Text style={text.name} >{item.name}</Text>
                        </View>
                    </TouchableOpacity>

                )}
            />
        </View>
    )
}