Summary - ScrollView

Combine ScrollView, horizontal and RefreshControl to write a gallery.

Summary - ScrollView

This group covered the basics of scrolling regions. ScrollView scrolls content with a finger; horizontal enables sideways scroll; contentContainerStyle styles the inner content wrapper.

onScroll calls a function while scrolling; you read the vertical position with event.nativeEvent.contentOffset.y. RefreshControl is the pull-to-refresh mechanism; you drive the spinner with the refreshing state.

Now you will combine these in two mini tasks: first a horizontal gallery, then a list with pull-to-refresh.

Exercise Horizontal card gallery

Write a horizontal ScrollView with three <View> cards. Each card is styled width: 140 and height: 140 with a <Text> inside. Give contentContainerStyle a padding: 8.

Show example solution

const styles = { card: { width: 140, height: 140, margin: 6, backgroundColor: '#f0f0f0' } };
function App() {
  return (
    <ScrollView horizontal contentContainerStyle={{ padding: 8 }}>
      <View style={styles.card}><Text>One</Text></View>
      <View style={styles.card}><Text>Two</Text></View>
      <View style={styles.card}><Text>Three</Text></View>
    </ScrollView>
  );
}
export default App;

Exercise A list with refresh

Write a ScrollView with four <Text> rows. Pass <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> to its refreshControl prop. Define refreshing with useState(false) and a handleRefresh that flips it back to false after two seconds.

Show example solution

function App() {
  const [refreshing, setRefreshing] = useState(false);
  const handleRefresh = () => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  };
  return (
    <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
      <Text>Row one</Text>
      <Text>Row two</Text>
      <Text>Row three</Text>
      <Text>Row four</Text>
    </ScrollView>
  );
}
export default App;

Test yourself

Match all the concepts

horizontal

Horizontal scroll
contentContainerStyle

Inner wrapper style
onScroll

Scroll event
RefreshControl

Pull-to-refresh
What enables pull-to-refresh?
- RefreshControl
- horizontal
- contentOffset
- padding
Show answer

contentOffset — RefreshControl works with refreshing and onRefresh.

Next lesson: Image

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies