Why isn't my Antdesign Icon appearing on screen? - react-native

Hello, I am having trouble with my AntDesign Icon appearing on the screen the only thing that does pop up is just an X I am using react-native-vector-icons/AntDesign. If somebody can please show me how I can have my Icons show up on my screen it would be greatly appreciated!
import React, { useContext, useRef, useState } from "react"; // we are importing the react library and the useContext hook from react and we are importing the Context from the global context file
import { Context } from "../globalContext/globalContext.js"
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Sound from 'react-native-sound';
import Video from 'react-native-video';
import { Button, Input, Image, Tile } from 'react-native-elements';
import LottieView from 'lottie-react-native';
import {
SafeAreaView,
StyleSheet,
Text,
View,
//Image,
ImageBackground,
Animated,
StatusBar,
TouchableOpacity,
Pressable,
Alert,
} from 'react-native';
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" />
<LottieView style={styles.lottie} source={require('C:/Users/Raffp/Desktop/React Native Projects/React_Native_FoodApp3/CheeseBurgerApp/assets/imgs/59677-fast-food.json')} autoPlay loop />
<View style={styles.header}>
<Text style={styles.text_header}>Pristine Burgers</Text><FontAwesome5 name="hotdog" size={50} color="gold" />
</View>
<View style={styles.footer}>
<Animated.View style={[styles.textWrapper, animatedStyles]}>
<Text style={styles.text_footer}>Take More Then Just Bite</Text>
</Animated.View>
<Pressable
style={styles.button}
onPress={() => {
textAnimation();
setTimeout(() => {
navigation.navigate('');
}, 1000);
}}
>
<Text style={styles.text_footer}>Yum!</Text>
<AntDesign name="arrowright" size={24} color="white" />
</Pressable>
</View>
</View>
);
}
X Appearing on the screen instead of
the icon?

I find that I run into issues like this when I miss a step when installing the package. You could try redoing the additional installation steps for your platform. See the documentation for iOS installation and Android installation.

Related

I am using Navigate to go to another page on React Native, I've tried with navigation & React Dom

I am using Navigate to go to another page on React Native, I've tried with navigation & react Dom. I want to go to Home.js. I've tried using NavigationContainer, & reateStackNavigator and also React Dom.
I can't seem to find a solution to either of the two and the YouTube videos aren't really helping.
import {
StyleSheet,
Text,
SafeAreaView,
Image,
View,
TouchableOpacity,
} from 'react-native';
import React,{ useState} from 'react';
import {Card} from 'react-native-shadow-cards';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {Route, BrowserRouter as Router, Switch, Link, Navigate, NavigationType} from 'react-router-dom';
export default function App() {
const handlePress = () => navigation.navigate('Home');
const [name,setName] = useState("");
const shadowstyle={
shadowOpacity:1
};
return (
<SafeAreaView style={styles.container}>
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
<Text style={styles.titleText} onPress={handlePress}>GTipz </Text>
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/GtipzLogo.png")} />
<View>
<Image
source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
</View>
<TouchableOpacity onPress={handlePress}>
<View style ={[styles.buttonContainer, styles.userImageWrapper]}>
<Text style={styles.buttonText}>Login</Text>
</View>
You need to import the useNavigation hook from react-navigation.
import { useNavigation } from '#react-navigation/native'
const navigation = useNavigation()
I also suggest you replace Text with TouchableOpacity where you call the handlePress function
Please refer to this doc for more information.

I'm not able to navigate to a screen

Home.js
this is the code for my Home.js screen
import React from "react";
import { StyleSheet, Text, View, Image, FlatList, TouchableOpacity, ImageBackground } from "react-native";
import colors from "../assets/Colors/colors";
import { ScrollView } from "react-native";
import { Entypo } from '#expo/vector-icons';
import activitiesData from "../assets/Data/activitiesData";
import discoverCategoriesData from "../assets/Data/discoverCategoriesData";
import discoverData from "../assets/Data/discoverData";
import learnMoredata from "../assets/Data/learnMoredata";
import { SafeAreaView } from "react-native-safe-area-context";
import Profile from "../assets/Images/person.png";
import { MaterialIcons } from '#expo/vector-icons';
import Details from "./Details";
import {
Lato_100Thin,
Lato_100Thin_Italic,
Lato_300Light,
Lato_300Light_Italic,
Lato_400Regular,
Lato_400Regular_Italic,
Lato_700Bold,
Lato_700Bold_Italic,
Lato_900Black,
Lato_900Black_Italic
} from '#expo-google-fonts/lato';
import { useFonts } from "#expo-google-fonts/lato";
import AppLoading from "expo-app-loading";
const Home = ({ navigation }) => {
const renderDiscoverItem = ({item}) => {
return (
<TouchableOpacity
onPress={() =>
navigation.navigate("Details")
}>
<ImageBackground
source={item.image}
style={[
styles.disoverItem,
{ marginLeft: item.id === "discover-1" ? 20 : 0 },
]}
imageStyle={styles.disoverItemImage}
>
<Text style={styles.discoverItemTitle}>{item.title}</Text>
<View style={styles.discoverItemLocationWrapper}>
<MaterialIcons name="location-pin" size={24} color="white" />
<Text style={styles.discoverItemLocationText}>{item.location}</Text>
</View>
</ImageBackground>
</TouchableOpacity>
)
}
Details.js
this is the code for my Details.js screen
import React from "react";
import { Text, View } from "react-native";
const Details = () => {
return (
<View>
<Text>
Details
</Text>
</View>
);
}
export default Details;
this is the code for my home and details screen I need to tap on the box then I should redirect on to the details screen
Look at this image
can you help me resolve this issue fast I need to complete my project
update this in your app.js
<NavigationContainer>
<AppStack.Navigator>
<AppStack.Screen name='Details' component={Details} />
</AppStack.Navigator>
</NavigationContainer>

how to go to another page in react native?

how to move from one page to another in react native, please help me I am new to react-native I want to move from this page to another by clicking a button but I don't know how to do this
this is splash screen JSON file
import React from 'react';
import { View, Text, Button, Dimensions, StyleSheet, Image, TouchableOpacity} from 'react-native';
//import { LinearGradient } from 'react-native-svg';
//import {LinearGradient} from 'react-native-linear-gradient';
//import { LinearGradient } from "react-native-svg";
//import {MaterialIcons} from 'react-native-vector-icons';
import * as Animatable from 'react-native-animatable';
//import { NavigationContainer } from '#react-navigation/native';
//import SignInScreen from './SignInScreen';
const SplashScreen = ({navigation}) => {
return (
<View style={styles.container}>
<View style={styles.header}>
<Animatable.Image animation="bounceIn" duraton="1500" source=
{require('../components/images/roz.jpg')} style={styles.logo} resizeMode='stretch'/>
</View>
<Animatable.View animation="fadeInUpBig" style={styles.footer}>
<Text style={styles.title}>Stay connected with everyone!</Text>
<Text style={styles.text}>Sign in with account</Text>
<View style={styles.button}>
<TouchableOpacity onPress={() => navigation.navigate('SignInScreen')} >
<Text style={styles.textSign}>Get Started</Text>
</TouchableOpacity>
</View>
</Animatable.View>
</View>
);
};
export default SplashScreen;
const {height} = Dimensions.get("screen");
const height_logo = height * 0.28;
you have to implement React Navigation library as described on official page
Navigating to a new screen
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}

How to get parameters in the reaction native

I want to pass parameters to a view. I followed some examples, but to no avail. How do I do it?
A part of my code:
Home:
import React from 'react';
import { MaterialIcons } from '#expo/vector-icons';
import { useNavigation } from '#react-navigation/native';
import { View, Text, Image, StyleSheet, ScrollView } from 'react-native';
import colors from '../../components/colors';
import Shoe from '../../components/home/shoe';
import Teste from '../teste';
import Detail from '../detail';
export default function Home(props) {
return(
<View style={styles.storeProducts_line}>
<Shoe
source={require('../../images/home/tenisAdidasFalconFeminino.jpg')}
title="Tênis Adidas Falcon Feminino"
price="200,00"
onClick={() => props.navigation.navigate('Detail', {
productId: 12,
productTitle: 'Tênis Adidas',
})}
/>
<Shoe
source={require('../../images/home/tenisAdidasYeezySalt.jpg')}
title="Tênis Adidas Yeezy Salt"
price="175,90"
onClick={() => navigation.navigate('Detail')}
/>
</View>
);
}
Detail:
import React from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
export default function Detail({props, navigation}) {
const productId = navigation.getParam('userId');
// const productId = props.navigation.getParam('userId');
return(
<View style={styles.container}>
<Image
/>
<Text>
Detail
</Text>
<Text>
{productId}
</Text>
</View>
);
}
All the examples I saw the structure of the view is different, do I have to change the structure to work? I'm new to react-native, bear with me. Thanks in advance for your attention.
You can also use route to access the passed data from parent component.
Example:
import React from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
export default function Detail({route, navigation}) {
const {productId} = route.params;
// const productId = props.navigation.getParam('userId');
return(
<View style={styles.container}>
<Image
/>
<Text>
Detail
</Text>
<Text>
{productId}
</Text>
</View>
);
}
For more please do read this doc: Passing parameters to routes

Expected Component class, got [object Object] - React-Native

I have encountered this problem on "Expected a Component class, Got [object Object]". I have lookup all the related problems on Stack, I have followed most of them by Capitalising my objects but the same errors occurred. Some great pointers would be appreciated.
this is my App.js file
import React from 'react';
import { StyleSheet, AppRegistry, Text, View } from 'react-native';
import Login from "./Login";
export default class App extends React.Component {
render() {
return (
<Login />
);
}
}
and my Login.js file
import React from 'react';
import{
StyleSheet,
View,
Text,
Image,
touchableOpacity,
TextInput,
KeyboardAvoidingView
} from 'react-native';
export default class Login extends React.Component{
render(){
return(
<KeyboardAvoidingView
behavior="padding"
style={styles.container}>
<View style={styles.logoContainer}>
</View>
<View style={styles.formContainer}>
<TextInput
underlineColor="transparent"
placeholder="Email"
returnKeyType="next"
keyboardType="email-address"
onSubmitEditing={()=> this.passwordInput.focus()}
style={styles.input}/>
<TextInput
underlineColor="transparent"
placeholder="Password"
secureTextEntry
returnKeyType="go"
ref={(input) => this.passwordInput = input}
style={styles.input}/>
<touchableOpacity
style={styles.buttonContainer}>
<Text style={styles.textButton}>Login</Text>
</touchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
It returns an error of Expected a component class, got [object Object]
Thanks in advance. It is either I'm too blind to see my mistake or I did it completely wrong.
Found the bug, I just need to capitalize my components. touchableOpacity --> TouchableOpacity
Thanks to Andrew Li