如何在 React 中并排显示两个图标？

Question

I'm developing an app for a school project and i've been trying to show two icons side by side for a screen (i've been using React for 5 months but i'm still a noob at it)

But they display one over the other, i even tried using Bootstrap columns to make it show them the way i want but i just couldn't do it

Here's the code

import { View } from 'react-native';
// import Button from '@mui/material/Button';
import CheckCircle from '@mui/icons-material/CheckCircle'
import styles from '../../App';
import { GiBroom } from 'react-icons/gi';
import { borderRadius } from "@mui/system";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function LimpiarCurso(){
    return (
        <Container style={styles.container}>
      <Row>
      <Col><CheckCircle sx={{ fontSize: 200, color: 'white', backgroundColor:'green', display:'inline-block'}} style={{float: 'right'}}/></Col>
      <Col><GiBroom size={200} style={{float: 'right', display: 'inline-block'}}/></Col>
      </Row>
      </Container> 
    )
}

Answer 1

First of all greetings.These are all basic mistakes that were made by freshers.Don't worry. Try putting those Icons inside a {View} tag. And give some styles for View as below. This works for me.

 import { Image, StyleSheet, Text, View,TouchableOpacity,ScrollView} from 'react-native' import React from 'react'; import { MaterialCommunityIcons,Ionicons,FontAwesome5 } from '@expo/vector-icons'; <View style={{flexDirection:'row',justifyContent:'space-evenly'}}> <TouchableOpacity style={styles.button}> <MaterialCommunityIcons name='message-alert' size={50} color={'#BACAFF'} /> <Text>New Complaint</Text> </TouchableOpacity> <TouchableOpacity style={styles.button}> <MaterialCommunityIcons name='message-alert' size={50} color={'#BACAFF'} /> <Text>Track a Complaint</Text> </TouchableOpacity> </View> The styles for button is button:{ padding:20, backgroundColor:'#fff', elevation:10, shadowColor:'#000', borderRadius:10, alignContent:'center', alignItems:'center' },