i am new here and stuck because of this error. please help me to solve this error.
import React from "react";
import { View, Image, StyleSheet, Text, TouchableOpacity } from "react-native";
function ListItem({ image, title, subtitle }) {
return (
<TouchableOpacity>
<View style={styles.container}>
{image && <Image style={styles.img} source={image} />}
<View>
<Text>{title}</Text>
<Text>{subtitle}</Text>
</View>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row"
},
img: {
width: 70,
height: 70,
borderRadius: 35
}
});
export default ListItem;
and invoke it in other component with passing arguments
import * as React from "react";
import Icon from "./Components/Icon";
export default function App() {
return (
<SafeAreaView style={styles.screen}>
<ListItem
title="My title"
subtitle="subtitle"
imgComponent={<Icon name="email" />}
/>
</SafeAreaView>
);
}
and i am facing this error
Related
image errors
The error Cannot read property 'map' of undefined' is thrown when the map function in the Product component is executed.
I'm following the react Native tutorial, and I keep running into an issue when passing the value from the state of one component into another component.
I'm following the react Native tutorial, and I keep running into an issue when passing the value from the state of one component into another component.
i used axios to get the data
ProductScreen
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import MenuProduct from '../components/Product/MenuProduct';
import MainHeader from '../components/Header/MainHeader';
import {POPULAR, Top_Sell} from '../data';
import ProductItem from '../components/Product/ProductItem';
import instance from '../routes/instance';
const ProductScreen = () => {
const [product, setProduct] = useState([]);
useEffect(() => {
const fetchData = async () => {
const data = await instance('/api/products', {
method: 'GET',
});
setProduct(data);
};
fetchData();
}, []);
return (
<View style={{flex: 1}}>
<MainHeader />
<MenuProduct list={Top_Sell} />
<ProductItem list={product} />
</View>
);
};
export default ProductScreen;
ProductItem
import React from 'react';
import ProductCard from './ProductCard';
const ProductItem = ({product}) => {
return (
<>
{product.map((item, index) => {
return (
<ProductCard
id={item._id}
image={item.image}
title={item.title}
price={item.price}
item={item}
key={index}
/>
);
})}
</>
);
};
export default ProductItem;
ProductCard
import React from 'react';
import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native';
import {colors, sizes, spacing} from '../../constants/theme';
import AddItem from '../../utils/AddItem';
const CardHeight = 220;
const ProductCard = ({props}) => {
return (
<ScrollView>
return (
<View
style={{
marginLeft: spacing.l,
marginBottom: spacing.l,
marginRight: spacing.l,
}}>
<View>
<View
style={{
backgroundColor: colors.white,
borderRadius: sizes.radius,
shadowColor: colors.black,
shadowRadius: 4,
shadowOpacity: 0.1,
shadowOffset: {width: 0, height: 2},
}}>
<TouchableOpacity
style={{
borderRadius: sizes.radius,
overflow: 'hidden',
flexDirection: 'row',
}}>
<Image
style={{
borderRadius: sizes.radius,
width: 160,
height: CardHeight - 60,
resizeMode: 'cover',
}}
source={props.image}
/>
<View style={{marginTop: spacing.l}}>
<View style={{marginLeft: spacing.l, marginBottom: spacing.s}}>
<Text style={{fontSize: 16, color: '#FA4A0C'}}>
{props.title}
</Text>
</View>
<View style={{marginLeft: spacing.l}}>
<Text style={{fontSize: 14, color: '#8b8989'}}>
{props.price}
</Text>
</View>
<TouchableOpacity style={{marginLeft: 130}}>
<AddItem />
</TouchableOpacity>
</View>
</TouchableOpacity>
</View>
</View>
</View>
); })
</ScrollView>
);
};
export default ProductCard;
I have tried several ways on stackoverflow but I can't figure it out
It should be list in ProductItem component and use list.map because when you sending prop in ProductItem you are sending list
import React from 'react';
import ProductCard from './ProductCard';
const ProductItem = ({list}) => {
return (
<>
{list.length > 0 && list.map((item, index) => {
return (
<ProductCard
id={item._id}
image={item.image}
title={item.title}
price={item.price}
item={item}
key={index}
/>
);
})}
</>
);
};
export default ProductItem;
Check the below syntax for passing data from parent to child component.
<Child parentToChild={data}/>
Here, we are passing the data in the child component as data.
data is the data we have to pass, and parentToChild is the prop's name.
Next, it's time to capture the data in the child component. And it's very simple.
Here, there can be two cases.
Case 1: If you are using a functional component, simply catch the parentToChild in the parameters.
import React from 'react'
export default function Child({parentToChild}) {
return (
<div>
{parentToChild}
</div>
)
}
Case 2: If you have a class component, then just use this.props.parentToChild.
import React, { Component } from 'react'
export default class Child extends Component {
render() {
return (
<div>
{this.props.parentToChild}
</div>
)
}
}
import { StyleSheet, Text, View, ImageBackground, SafeAreaView } from 'react-native';
import react, {useState} from 'react';
import InputComponent from './sharedComponent/InputComponent';
import ButtonComponent from './sharedComponent/ButtonComponent';
export default function App() {
const[text, setText] = useState('');
const[todoList, setToDoList] = useState([]);
return (
<ImageBackground
source={require('./assets/todoimages.png')}
style={{width: '100%', height: '100%'}}
>
<SafeAreaView>
<View style={styles.container}>
<InputComponent onchangeValue={setText}
/>
<ButtonComponent
addItem={setToDoList}
itemToAdd={text}
/>
</View>
<View>
{todoList.length > 0 && todoList.map((value) => <Text>{value}</Text>)}
</View>
</SafeAreaView>
</ImageBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'baseline',
justifyContent: 'center',
paddingBottom:'10%'
},
});
I am getting the error :
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
can anyone tell me why I am getting the error and what is the solution for that?
below is the button component:
import {View,Button, StyleSheet} from 'react-native';
const ButtonComponent = (props) =>{
return(
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={props.addItem(prevArray=> [...prevArray, props.itemToAdd])}
title="ADD"
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
})
export default ButtonComponent;
below is the input component:
import { Text, TextInput, View } from 'react-native';
const InputComponent = (props)=>{
return(
<TextInput
style={{height: 40, backgroundColor:'white'}}
placeholder="add the item in to do list"
onChangeText={newText => props.onchangeValue(newText)}
/>
)
}
export default InputComponent;
You must use arrow-functions in the onPress method of your buttonComponent like this:
onPress={()=>props.addItem(...)}
I am developing an e-commerce application using React Native and I am trying to use useState in the drawerContent and it tells me this
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
Thank you in advance for your answers.
Here's the code
import React, { useState } from 'react'
import { View, Text, TouchableOpacity, FlatList, StyleSheet, StatusBar } from 'react-native'
import IonIcons from "react-native-vector-icons/Ionicons"
import { categories } from '../../../services/DataTest'
import DrawerSearch from './DrawerSearch'
import DrawerItem from './DrawerItem'
export default function DrawerContent (props) {
const [search, setSearch] = useState("");
return (
<View>
<TouchableOpacity
style={styles.customDrawerTouch}
>
<View style={styles.backButtonRow}>
<IonIcons
name="ios-arrow-back"
size={25}
style={styles.customDrawerIcon}
color="#666666"
/>
<Text style={{ color: '#666666' }}>Back to Components</Text>
</View>
</TouchableOpacity>
<DrawerSearch value={search} setValue={setSearch}/>
<FlatList
data={categories}
keyExtractor={(item, index) => index.toString()}
renderItem={DrawerItem}
/>
</View>
);
}
const styles = StyleSheet.create({
customDrawerTouch: {
marginTop: StatusBar.currentHeight,
paddingLeft: 13,
paddingTop: 15,
},
customDrawerIcon: {
paddingRight: 10
},
backButtonRow: {
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 17,
paddingLeft: 3,
borderBottomColor: '#F0F0F0',
borderBottomWidth: 1,
},
});
I'm using this component here
import * as React from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HeaderCategorie from '../../components/categories/index/HeaderCategorie';
import SearchBar from '../../components/home/index/SearchBar';
import DrawerContent from '../../components/categories/index/DrawerContent';
const Drawer = createDrawerNavigator();
function CategoriesScreen({ navigation }) {
return (
<View style={styles.container}>
<HeaderCategorie navigation={navigation}/>
<View style={styles.headerSearch}>
<SearchBar />
</View>
</View>
)
}
export default function Categories() {
return (
<Drawer.Navigator initialRouteName="Categories"
drawerContent={DrawerContent}
screenOptions={{headerShown:false}}
>
<Drawer.Screen name="Categories" component={CategoriesScreen} />
</Drawer.Navigator>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
marginTop: StatusBar.currentHeight,
},
headerSearch: {
marginVertical:10
},
headerSearchText: {
fontWeight:"bold",
fontSize:35,
marginLeft:20,
marginVertical:15,
}
});
Reason: By using drawerContent={DrawerContent}, you are actually passing the reference of the DrawerContent function, which ends up breaking rules of hooks.
So to resolve this, change the following line:
<Drawer.Navigator initialRouteName="Categories"
drawerContent={DrawerContent}
screenOptions={{headerShown:false}}
>
to this
<Drawer.Navigator initialRouteName="Categories"
drawerContent={(props)=> <DrawerContent {...props}/>} // here
screenOptions={{headerShown:false}}
>
demo snack
I'm trying to use Flex feature of Ant Design Mobile to position the buttons with flex direction of column. It seems like the Flex and Flex.Item are not working. The buttons positions are stacked together.
App.js
import React from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity, SafeAreaView} from 'react-native';
import {Provider, Button, WhiteSpace, Flex} from '#ant-design/react-native';
import customTheme from './src/styles/customTheme';
const App = () => {
return (
<Provider theme={customTheme}>
<SafeAreaView>
<View>
<Flex direction='column'>
<Flex.Item>
<TouchableOpacity style={styles.facebookLoginButton} activeOpacity={0.5}>
<Image
source={require('./img/facebookLoginButton.png')}
style={styles.img}
/>
</TouchableOpacity>
</Flex.Item>
<Flex.Item>
<TouchableOpacity style={styles.googleLoginButton} activeOpacity={0.5}>
<Image
source={require('./img/googleLoginButton.png')}
/>
</TouchableOpacity>
</Flex.Item>
</Flex>
</View>
</SafeAreaView>
</Provider>
);
};
export default App;
const styles = StyleSheet.create({
facebookLoginButton: {
width: 240,
height: 40
},
googleLoginButton: {
borderColor: '#D3D3D3',
borderWidth: 0.5,
width: 240,
height: 40
}
});
I'm trying to build an app and it was working but for some reason now everytime I try to export something it no longer works (stays greyed out).
I have copy and pasted a page and just change the file name and the export class still stays greyed out.
I have deleted the node folder, cleared the cache, and reinstall the cache. Still won't work
Created a new file in the screen and component folder, copy pasted a working page (screen file to a screen file & component file to component file). The export class still stays greyed out.
example of a button component
import React, { Component } from 'react';
import {View, StyleSheet, Dimensions} from 'react-native';
export default function Timer(props) {
return(
<View style={styles.Button}>
<View>
{ props.children }
</View>
</View>
)
}
const styles = StyleSheet.create({
Button: {
height:31,
width: 87,
borderRadius: 10,
backgroundColor: '#E0F7EF',
display: 'flex',
justifyContent: 'center', /* center items vertically, in this case */
alignItems: 'center', /* center items horizontally, in this case */
},
})
Example of a screen component
import React, {Component} from 'react';
import * as firebase from 'firebase';
import { NavigationActions, StackNavigator } from 'react-navigation';
import{ ImageBackground, Dimensions, View, ScrollView, SafeAreaView, TextInput, Picker } from 'react-native';
import { SimpleLineIcons } from '#expo/vector-icons';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
import { MaterialCommunityIcons, FontAwesome, MaterialIcons, Ionicons} from '#expo/vector-icons';
import Strings from '../utils/Strings';
var styles = require('../../assets/files/Styles');
var {height, width} = Dimensions.get('window');
//NAVIGATION AT TOP
export default class Cardio extends Component {
static navigationOptions = {
title: `${Strings.ST201}`,
};
navigateToScreen = (route) => () => {
const navigateAction = NavigationActions.navigate({
routeName: route,
});
this.props.navigation.dispatch(navigateAction);
}
render () {
return (
<Container style={styles.background_general}>
<ScrollView>
<View style={{flexDirection:'column', backgroundColor: '#000000', height: height * 0.25}}>
<ImageBackground
source={require('../../assets/images/header.jpg')}
style={{flex: 1, width: null, height: null}}>
</ImageBackground>
</View>
<View style={styles.cardslayout}>
<TextInput
style={styles.CommentBox}
placeholder = 'sets'
returnKeyType="done"
/>
<TextInput
style={styles.CommentBox}
placeholder = 'Reps'
returnKeyType="done"
/>
</View>
<View>
<TextInput />
</View>
<View style={styles.cardslayout}>
<Content horizontal={true}>
{/*Bike*/}
<Card>
<CardItem style={styles.card}>
<Text>
<MaterialIcons name="directions-bike" size={32} color="white"/>
</Text>
</CardItem>
</Card>
<Card>
<CardItem style={styles.card}>
<Text>
<MaterialCommunityIcons name="run-fast" size={32} color="white"/>
</Text>
</CardItem>
</Card>
<Card>
<CardItem style={styles.card}>
<Text>
<Ionicons name="ios-walk" size={32} color="white"/>
</Text>
</CardItem>
</Card>
</Content>
</View>
{/*END OF CUSTOM INPUT*/}
</ScrollView>
</Container>
)
}
}
This is what I mean by it being grayed out.
This is a custom button file in the component folder.
You can see the export default function working in the custom button file. Now am going to create a test file and copy and paste the same code into it and simply change the function name. Now before I change the function name the "export default function" turns grey but I change the name to reduce confusion here.