We Keep Coding

How to display two icons side by side in React?

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>
)
}

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'
},

Switching Between Screens with React Native Navigation and importing JS

I'm struggling to figure out why my code doesn't work. I keep reading the tutorials and nothing helps. How can I switch between screens and have the screens in different JS files (as components)?
Currently, my code works for the first screen, but when I click on the button nothing shows up.
Please see the codes below:
App.js
import * as React from 'react';
import {Button, View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import TestScreen from './components/Test';
//HOME SCREEN
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Test"
onPress={() => navigation.navigate('Test',{myParam: '03',})}
/>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Test" component={TestScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Test.js
import React, { Component } from "react";
import { Text, View } from "react-native";
class Test extends Component {
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Test Screen</Text>
<Button
title="Test"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
}
export default Test;

It seems it was a very simple issue and I figured it out myself. The code in Test.js was missing 'Button' in the import statement. The correct way should be:
import { Button, Text, View } from "react-native";
It's a silly mistake, but it's not the first time this happens to me. I use Visual Studio Code, which highlights missing connections, but it seems that this doesn't work for some components. Not to mention it compiles (bundling) with no problems.
Nevertheless, the code works fine now.

First you have to import useNavigation in Test.js file.
Like this:
import { useNavigation } from "#react-navigation/core";
Then you have to use it and save it in a variable like:
const navigation = useNavigation();
Now use:
onPress={() => navigation.navigate('Home')};
This will navigate to the the other Screen.
Make sure you install every library you use in your project using npm or yarn.

Getting too much gap between two component react native

am new in react world, am trying to making a d-mart clone, my app is working fine but getting too much difference between two banner component , I don't want it , don't know why its getting. please try to fix my error.
You seem in special offer top and bottom difference is good but winter special top getting too much difference.
App.js
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Header from "./screens/Header";
import Banner from "./screens/Banner";
import Banner2 from "./screens/Banner2";
import { ScrollView } from "react-native";
function App() {
return (
<View style={styles.container}>
<ScrollView>
<Header />
<Banner />
<Banner2 name="Special Offer"/>
<Banner2 name="Winter Special"/>
<Banner2 name="New Year Special"/>
<Banner2 name="Festival Special"/>
</ScrollView>
<StatusBar style="auto" />
</View>
);
}
export default App;
Banner2.js
import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";
const Banner2 = ({ name }) => {
return (
<View style={{ marginHorizontal: 7 }}>
<Text style={styles.offer}>{name}</Text>
<Image
style={{
height: 300,
width: "100%",
marginTop: -30,
alignItems: "center",
resizeMode: "contain",
}}
source={require("../images/banner1.jpg")}
/>
</View>
);
};
const styles = StyleSheet.create({
offer: {
marginTop: 20,
fontWeight: "bold",
fontSize: 20,
marginLeft: 10,
},
});
export default Banner2;

React-Native : ScrollView not showing the full content

I'm building an app with React-Native and for my Home Page im using the ScrollView but it doesn't show the full content. I have e header on the top so that may be blocking the full content or i don't know.
The code :
import React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";
import Content from "../components/Content/content";
import Header from "../components/Header/header";
import Carousel1 from "../components/Carousel/index";
import Buttons from "../components/Buttons/buttons";
export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
let drawerLabel = "Home";
return { drawerLabel };
};
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView style={{flex:1}}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f9f9f9"
}
});
Any idea how to fix this?

Try it with react native Flatlist instead of ScrollView:
React-native Flatlist

Try using contentContainerStyle instead of style with ScrollView.
Since I don't have access to your Carousel1 , Content, and Buttons component to give you a certain answer, I suggest you try the following:
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView contentContainerStyle={{ flexDirection:"column" }}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
Report back with your results.

Remove style={{flex:1}} from ScrollView and see

Fontweight - Bold not working in react native page

I am new to React Native, now I want to make a sample project.
I see there is an option for making a text bold by using 'fontWeight'.
I am Using expo.
But even if I use this property for my <Text> tag, I can't see any changes.
Can you suggest me any possibilities and solutions?
Here is what i tried.
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { Image } from 'react-native';
import { FlatList, ActivityIndicator } from 'react-native';
export default class Screen1 extends Component {
//Screen1 Component
constructor(props){
super(props);
}
render() {
return(
<View style={{flex: 1, padding: 20}}>
<Text style={{ fontWeight: 'bold' }} >Bold Text</Text>
</View>
)
}
}

There isn't an issue with your style, your style is perfect as it is { fontWeight: 'bold' }, but your <Text/> component is not correctly.
<Text/>Bold Text</Text>
You have an extra '/' inside of your JSX component. It should be like this:
<Text>Bold Text</Text>
Want to see an example? https://snack.expo.io/#abranhe/bold-example
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontWeight: 'bold' }}>Bold Text</Text>
</View>
);
By the way, you are also missing React from your imports, and it is required.

the issue was solved by changing my mobile's system font.
I have changed my system font once. that was not accepting Bold. that was the issue.

your mistake in TEXT tag , try this
<Text style={{ fontWeight: 'bold' }} >Bold Text</Text>