How to put text inside of circle border

I am currently working on a mobile application. The homepage has a title and subtext and a circular border around it. It should look like this:

However, I have done the border of images but cant put the text inside of it. I keep getting errors saying "TEXT strins must be rendered within a text componenent".

My code is this:

import { StatusBar } from 'expo-status-bar';
import { Dimensions, StyleSheet, Text, View, ImageBackground, Image} from 'react-native';
import React, { Component } from 'react';
class App extends Component{
render(){
  const localImage = require('./assets/WallpaperDog-996754.jpg');
    return(
      <ImageBackground source={localImage }style={styles.container}>
        <Text style={styles.title}>Astrology</Text>
//       <Text style={styles.subheader}>Click on your star sign to get your daily horoscope</Text>
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
     <View
        style = {{
          borderRadius: Math.round(Dimensions.get('window').width   Dimensions.get('window').height) / 2,
          width: Dimensions.get('window').width * 0.8,
          height: Dimensions.get('window').width * 0.8,
          borderWidth:5,
          borderColor:"transparent",
          justifyContent: 'center',
          alignItems: 'center'
        }}
        underlayColor = '#ccc'
      >
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.7}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,right: 20}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,left: 20}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.7}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,right: 20}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,left: 20}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,left:-20}} />
               <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,right:-20}} />
      </View>
        </View>
        </ImageBackground>
    )
}
}
export default App;



const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
  },
  title: {
      color: 'white',
      fontWeight: 'bold',
      fontSize: 60,
  },
  header: {
      color: "red",
      fontWeight: "bold",
      fontSize: 20,
  },
  subheader: {
      color: "white",
      fontWeight: "bold",
      fontSize: 16,
  },
  text: {
      color: "black",
      fontSize: 14,
  }

});

Any advice would be so helpful, I think it is the positioning of the text componenet that is causing issues.

CodePudding user response：

The issue is on this line:

//       <Text style={styles.subheader}>Click on your star sign to get your daily horoscope</Text>

Comments are done differently in JSX than they are in regular Javascript. Right now, the double slash is being interpreted as text, but it's not within a Text component. Like the error message says, you can't do this in React Native.

Inside JSX, you have to write comments like this:

{/*       <Text style={styles.subheader}>Click on your star sign to get your daily horoscope</Text> */}

I.e. enclosed on both sides, with {/* */}.

CodePudding user response：

Probably you are doing this:

<Text> some text </Text>

instead of

<View>
 <Text> some text </Text>
</View>

A string/text must be wrapped around by a View component