Why advanced UI creates polished apps in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple button with a label in React Native.

React Native

import React from 'react';
import { Button, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Button title=[1] onPress={() => alert('Clicked!')} />
    </View>
  );
}

Drag options to blanks, or click blank then click option'

AClick Me

B'Click Me'

C"Click Me"

DclickMe

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Using a variable name without defining it

The title prop requires a string wrapped in quotes. Using single quotes like 'Click Me' is correct.

2fill in blank

medium

Complete the code to apply a background color style to the View component.

React Native

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container} />
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: [1]
  }
});

Drag options to blanks, or click blank then click option'

A'#3498db'

B3498db

Cblue

DbackgroundColor

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the color code

Using a color name without quotes

Colors in React Native styles must be strings, so '#3498db' is correct.

3fill in blank

hard

Fix the error in the code to correctly display a text label inside a View.

React Native

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text[1]>Hello, world!</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A style={{ fontSize: 20 }}

B style=fontSize: 20

C style={fontSize: 20}

D style='fontSize: 20'

Attempts:

3 left

💡 Hint

Common Mistakes

Using single curly braces without an object

Using quotes instead of curly braces

The style prop must be an object inside double curly braces, so style={{ fontSize: 20 }} is correct.

4fill in blank

hard

Fill both blanks to create a styled button with padding and a background color.

React Native

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <TouchableOpacity style={{padding: [1], backgroundColor: [2]>
      <Text>Press me</Text>
    </TouchableOpacity>
  );
}

Drag options to blanks, or click blank then click option'

A12

B'#e74c3c'

C12px

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using '12px' instead of 12 for padding

Using color names without quotes

Padding should be a number without units, and backgroundColor should be a string color code.

5fill in blank

hard

Fill all three blanks to create a responsive text input with placeholder and border color.

React Native

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';

export default function App() {
  return (
    <TextInput
      style={{ borderWidth: [1], borderColor: [2], padding: [3] }}
      placeholder="Enter text"
    />
  );
}

Drag options to blanks, or click blank then click option'

A1

B'#2ecc71'

C10

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings for borderWidth or padding

Omitting quotes around borderColor

Border width is a number (2), border color is a string color code, and padding is a number (10).