連絡先リストアプリの構築
SectionList、アルファベット順のセクションヘッダー、検索フィルター、プル・トゥ・リフレッシュを組み合わせ、滑らかなスクロール性能を備えた実用的な連絡先画面を構築します
「連絡先リストアプリの構築」はCoddyKit上の無料React Native Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Native Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Native Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
App Overview: Contacts List
In this lesson you will build a realistic contacts list screen that combines everything from the FlatList and SectionList lessons. The app will display contacts grouped alphabetically, support a search filter, allow pull-to-refresh, and maintain smooth performance even with hundreds of entries.
Defining the Contacts Data
Start with a static array of contact objects. In a real app this would come from the device's contacts API or a remote server. Each contact has an id, name, and phone. A unique numeric or string ID is essential for the keyExtractor.
const CONTACTS = [
{ id: '1', name: 'Alice Brown', phone: '+1-555-0101' },
{ id: '2', name: 'Andrew Chen', phone: '+1-555-0102' },
{ id: '3', name: 'Bob Davis', phone: '+1-555-0201' },
{ id: '4', name: 'Carol Evans', phone: '+1-555-0301' },
// ... more contacts
];Search Filter State
Add a searchQuery state variable and filter the contacts array before grouping. The filter converts both the query and contact name to lowercase for a case-insensitive match. Wrap the filtering and grouping in useMemo so it only recomputes when the contacts or query changes.
const [searchQuery, setSearchQuery] = useState('');
const filteredContacts = useMemo(() => {
if (!searchQuery) return CONTACTS;
return CONTACTS.filter((c) =>
c.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [searchQuery]);Grouping Contacts Alphabetically
Convert the filtered flat array into the SectionList sections format. Reduce the contacts into a map keyed by the first letter, then sort the keys and map them to section objects. This transformation runs inside useMemo alongside the filter for a single computed value.
const sections = useMemo(() => {
const map = filteredContacts.reduce((acc, contact) => {
const letter = contact.name[0].toUpperCase();
if (!acc[letter]) acc[letter] = [];
acc[letter].push(contact);
return acc;
}, {});
return Object.keys(map).sort().map((key) => ({
title: key,
data: map[key],
}));
}, [filteredContacts]);Search Bar Component
Render a TextInput above the SectionList as the ListHeaderComponent so it scrolls with the list. Bind it to searchQuery state with onChangeText. Use the clearButtonMode prop on iOS to show a native clear button inside the input.
const SearchBar = () => (
<TextInput
style={styles.searchBar}
placeholder='Search contacts...'
value={searchQuery}
onChangeText={setSearchQuery}
clearButtonMode='while-editing'
/>
);Contact Row Component
Build a memoized row component using React.memo to prevent unnecessary re-renders. The row shows the contact's initials in a colored avatar circle and their name and phone number on the right. Memoizing the row component is critical for smooth scrolling with hundreds of contacts.
const ContactRow = React.memo(({ item }) => (
<View style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</View>
));Section Header Component
The alphabetic section header is a simple View with the letter. Give it a distinct background color and sticky behavior so it stays visible as the user scrolls through each letter group. Keep the component small and memoized since it renders once per letter.
const SectionHeader = ({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
);Pull-to-Refresh Integration
Simulate refreshing by introducing a refreshing state. On refresh, clear the search query (so users see all contacts again), wait briefly to simulate a network call, then set refreshing to false. In a real app you would re-fetch from the device contacts API or the server.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
setRefreshing(true);
setSearchQuery('');
setTimeout(() => setRefreshing(false), 1000);
};Empty State When No Results
When the filtered sections array is empty (no contacts match the search), display an informative empty state using ListEmptyComponent. Tell the user no contacts match their query and suggest they clear the search. This is far better than showing a blank screen.
const ListEmpty = () => (
<View style={styles.empty}>
<Text>No contacts found for '{searchQuery}'</Text>
<Button title='Clear Search' onPress={() => setSearchQuery('')} />
</View>
);Assembling the Full Screen
Combine all the pieces: SectionList with the sections data, memoized renderItem, renderSectionHeader, keyExtractor, sticky headers, pull-to-refresh, and ListHeaderComponent for the search bar. The result is a production-quality contacts screen.
export default function ContactsScreen() {
return (
<SectionList
sections={sections}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ContactRow item={item} />}
renderSectionHeader={({ section }) => <SectionHeader section={section} />}
stickySectionHeadersEnabled
refreshing={refreshing}
onRefresh={onRefresh}
ListHeaderComponent={SearchBar}
ListEmptyComponent={ListEmpty}
/>
);
}Navigating to a Contact Detail Screen
Make each row tappable by wrapping the ContactRow in a TouchableOpacity that calls navigation.navigate('ContactDetail', { contactId: item.id }). The detail screen reads the ID from route.params and fetches the full contact data, following the React Navigation pattern you learned earlier.
const ContactRow = React.memo(({ item, onPress }) => (
<TouchableOpacity onPress={() => onPress(item)} style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</TouchableOpacity>
));Quick Check
Test your understanding of the Contacts List App architecture from this lesson.
Lesson Recap
In this lesson you learned: combine SectionList, search filtering, and useMemo for an efficient contacts screen, memoize row components with React.memo to maintain scroll performance, and integrate pull-to-refresh and empty states for a polished UX. Next up we dive into the useRef hook and mutable values.
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「連絡先リストアプリの構築」レッスンは無料ですか？
はい。「連絡先リストアプリの構築」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。
「連絡先リストアプリの構築」で何を学びますか？
SectionList、アルファベット順のセクションヘッダー、検索フィルター、プル・トゥ・リフレッシュを組み合わせ、滑らかなスクロール性能を備えた実用的な連絡先画面を構築します ブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Native Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「連絡先リストアプリの構築」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Native Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。