Create React Native component which renders title of component by destructuring 'props' ar-CodePudding

I am looking to make a button component which allows the consumer of the component to input the title of the button. I have seen this work before but am now getting an error when I try to run the code.

Error message: 'Text strings must be rendered within a component.

AppButton code:

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

function AppButton({title}) {
    return (
        <View style={styles.button}>
            <Text style={styles.text}>{title}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: "dodgerblue",
        borderRadius: 25,
        justifyContent: "center",
        alignItems: "center",
        padding: 15,
        width: '100%',
    },
    text: {
        color: "white",
        fontSize: 18,
        textTransform: 'uppercase',
        fontWeight: 'bold',
    }
})

export default AppButton;

Output code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import AppButton from './components/AppButton';

export default function App() {
  return (
    <View style={styles.container}>
      <AppButton title = "Push Me"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CodePudding user response：

Import from 'react-native' instead of 'react-native-web'.