Text strings must be rendered within a <Text> component. When creating a button

Question

I'm new to react native and trying to create a button, here is my StartScreen:

import React from 'react' import Background from '../components/Background' import AppButton from '../components/AppButton'

export default function StartScreen({ navigation }) {
    return(
        <Background>
            <AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />;
        </Background>
    ) }

Here is my AppButton:

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

export default function AppButton ({ onPress, title, size, backgroundColor }) {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[
        styles.appButtonContainer,
        size === "sm" && {
          paddingHorizontal: 8,
          paddingVertical: 6,
          elevation: 6
        },
        backgroundColor && { backgroundColor }
      ]}
    >
      <Text style={[styles.appButtonText, size === "sm" && { fontSize: 14 }]}>
        {title}
      </Text>
    </TouchableOpacity>
  )
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: "center",
    padding: 16
  },
  appButtonContainer: {
    elevation: 8,
    backgroundColor: "#009688",
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 12
  },
  appButtonText: {
    fontSize: 18,
    color: "#fff",
    fontWeight: "bold",
    alignSelf: "center",
    textTransform: "uppercase"
  }
});

Here is my Background:

import React from 'react'
import { ImageBackground, StyleSheet, KeyboardAvoidingView } from 'react-native'
import { theme } from '../core/theme'

export default function Background({ children }) {
  return (
      <ImageBackground style={styles.background}>
          <KeyboardAvoidingView style={styles.container} behavior="padding">
              {children}
          </KeyboardAvoidingView>
      </ImageBackground>
  )
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    width: '100%',
    backgroundColor: theme.colors.surface,
  },
  container: {
    flex: 1,
    padding: 20,
    width: '100%',
    maxWidth: 340,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

When I try to run the application in my Android phone I get the following error:

Error: Text strings must be rendered within a component. Blockquote

But I cant figure out where this error happens. Can someone spot the mistake?

Answer 1

You have an unnecessary semicolon (;) in your StartScreen JSX, remove it.

export default function StartScreen({ navigation }) {
    return(
        <Background>
            <AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" /> 
        </Background>
    ); }