0
0
React Nativemobile~15 mins

Item separators in React Native - Mini App: Build & Ship

Choose your learning style9 modes available
Build: Item Separator List
This screen shows a list of items with a visible separator line between each item.
Target UI
---------------------
| Item 1           |
---------------------
| Item 2           |
---------------------
| Item 3           |
---------------------
Display a vertical list of at least 5 items using FlatList.
Add a thin horizontal separator line between each item.
The separator line should be gray and span the full width of the list.
Each item should show simple text like 'Item 1', 'Item 2', etc.
Starter Code
React Native
import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

export default function ItemSeparatorList() {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    { id: '4', title: 'Item 4' },
    { id: '5', title: 'Item 5' }
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
        // TODO: Add item separator component here
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50
  },
  item: {
    padding: 20,
    fontSize: 18
  }
});
Task 1
Task 2
Solution
React Native
import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

export default function ItemSeparatorList() {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    { id: '4', title: 'Item 4' },
    { id: '5', title: 'Item 5' }
  ];

  const renderSeparator = () => {
    return <View style={styles.separator} />;
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
        ItemSeparatorComponent={renderSeparator}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50
  },
  item: {
    padding: 20,
    fontSize: 18
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
    marginLeft: 0,
    marginRight: 0
  }
});

We added the ItemSeparatorComponent prop to the FlatList. This prop takes a component that renders between each item. We created a simple renderSeparator function that returns a View styled as a thin gray horizontal line. This line appears between each item in the list, making the list easier to read and visually separated.

The separator uses a height of 1 and a light gray color. It spans the full width because margins are set to zero. This is a common pattern to improve list readability in mobile apps.

Final Result
Completed Screen
---------------------
| Item 1           |
---------------------
| Item 2           |
---------------------
| Item 3           |
---------------------
| Item 4           |
---------------------
| Item 5           |
---------------------
User can scroll vertically through the list.
Between each item, a thin gray line separates them visually.
Stretch Goal
Add a separator that changes color when an item is pressed.
💡 Hint
Use state to track the pressed item and conditionally style the separator.