Text component in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a simple text message in React Native.

React Native

import React from 'react';
import { View, [1] } from 'react-native';

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

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

AScrollView

BButton

CImage

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using View instead of Text to display text.

Using Button or Image which are for other purposes.

The Text component is used to display text in React Native.

2fill in blank

medium

Complete the code to style the Text component with a font size of 20.

React Native

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

export default function App() {
  return (
    <View>
      <Text style=[1]>Styled Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  bigText: {
    fontSize: 20,
  },
});

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

Astyles.bigText

BbigText

Cstyle.bigText

D{fontSize: 20}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a plain object instead of the style reference.

Using incorrect variable names like 'style' or just 'bigText'.

Use styles.bigText to apply the defined style object to the Text component.

3fill in blank

hard

Fix the error in the code by completing the Text component usage correctly.

React Native

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

export default function App() {
  return (
    <View>
      <Text [1]>Incorrect usage</Text>
    </View>
  );
}

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

AfontSize=18

Bstyle={{fontSize: 18}}

Cstyle=fontSize:18

DfontSize={{18}}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing style as a simple key-value pair without braces.

Using incorrect syntax like fontSize=18 directly.

The style prop must be passed as an object inside double curly braces: style={{fontSize: 18}}.

4fill in blank

hard

Fill both blanks to create a Text component that is bold and blue.

React Native

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

export default function App() {
  return (
    <View>
      <Text style=[1]>[2]</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  boldBlue: {
    fontWeight: 'bold',
    color: 'blue',
  },
});

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

Astyles.boldBlue

B'Bold Blue Text'

C'Hello World'

Dstyles.bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using a style name that does not exist.

Passing non-string content inside Text.

Use styles.boldBlue for the style and a string for the text content.

5fill in blank

hard

Fill all three blanks to create a Text component with dynamic content and style.

React Native

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

export default function App() {
  const name = 'Alice';
  return (
    <View>
      <Text style=[1]>[2] {name}[3]</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  greeting: {
    fontSize: 22,
    color: 'green',
  },
});

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

Astyles.greeting

B'Hello,'

C'!'

D'Hi'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add punctuation or spaces.

Using incorrect style names.

Use styles.greeting for style, and add 'Hello,' before the name and '!' after for a friendly greeting.