CodeBlanks Logo Icon CodeBlanks

Summary - React Native basics

Combine View, Text and App.js to write your first mobile app.

Summary - React Native basics

In this group you learned what React Native is, how to create a project with Expo, the View and Text components, the App.js skeleton, and the npx expo start command.

You can now open an Expo project, write a basic screen, start the server, and view it on a phone with Expo Go.

Let us combine all of this in a single app.

Practice Write a complete App.js

Write a complete App.js: import View and Text from react-native, and with export default function App() return <View> containing <Text>React Native</Text>.

Starter code

App.js
// import line
// export default function App() {...}

Sample solution

App.js
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>React Native</Text>
    </View>
  );
}

Practice Two-line welcome

Write an App component; inside a <View> place two <Text> elements: the first says Welcome, the second says React Native. Do not forget the import.

Starter code

App.js
// import line
// function App() {...}

Sample solution

App.js
import { View, Text } from 'react-native';

function App() {
  return (
    <View>
      <Text>Welcome</Text>
      <Text>React Native</Text>
    </View>
  );
}

export default App;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which file is the app entry point?

  • App.js Correct answer
  • package.json
  • app.json
  • index.html

Explanation: App.js holds the entry component.

2 Match all the basic concepts

Term Meaning
react-native Core package
Expo Framework
App.js Entry component
npx expo start Server

All lessons in Beginner