Back to challenges
Check on GitHub
Report an issue

Scroll on mobile

📡 What you will learn

  • What is a <Fragment> component
  • Add a simple <ScrollView>

👾 Before we start the exercise

We are not going to explore how the navigation works in this exercice. For now, we need to update the routing manually and change exported screens.

Here is an example of the entry point of our application:

// App.tsx

import React from "react";
import { LoginScreen } from "./src/screens/LoginScreen";
import { TermsScreen } from "./src/screens/TermsScreen";

const App = () => {
  return (
    // <LoginScreen />
    <TermsScreen />
  );
};

// always export default App otherwise Expo is not happy
export default App;

🔭 One important thing to mention: React can export only one child. If you have this error JSX expressions must have one parent element use a React Fragment or a <View> to wrap all your elements.

You can use React Fragments by wrapping your child elements to be returned by your component with a <React.Fragment>. Returning to the example above, the LoginScreen component would be written like this:

export const LoginScreen = () => {
  return (
    <React.Fragment>
      <TextInput />
      <TextInput />
      <Button>Login</Button>
    </React.Fragment>
  );
};

React Fragments can also be employed with a short syntax, which looks like an empty tag:

const LoginScreen = () => {
  return (
    // using <> is just like using <React.Fragment>
    <>
      <TextInput />
      <TextInput />
      <Button>Login</Button>
    </>
    // using </> is just like using </React.Fragment>
  );
};

We are using Fragment to avoid unnecessary <View> markup.

👨‍🚀 Exercise 3

Let's now create a different screen.

Allow users to Scroll content