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
- Have a look at the
ScrollView
documentation - Create a new file
./src/screens/TermsScreen.tsx
paste the content from this TermsScreen - Fix the
View
bug with aScrollView
because it can't display all the content.