The search screen is divided into two parts: a <TextInput /> for the user to search a name and a <FlatList /> to show the list of contacts found with the entered name:
import React, { PropTypes } from 'react'
import { View, TextInput, Button, FlatList } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import { observer, inject } from 'mobx-react/native'
import ListItem from '../components/ListItem'
@inject('users', 'chats') @observer
class Search extends React.Component {
imgPlaceholder = 'https://cdn.pixabay.com/photo/2017/03/21/02/00/user-
2160923_960_720.png'
state = {
name: '',
foundUsers: null
}
static navigationOptions = {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor }) => (
<Icon name="search" size={30} color={tintColor}/>
)
};
onPressSearch() {
this.props.users.searchUsers(this.state.name)
.then((foundUsers) => {
this.setState({ foundUsers });
...