I am using redux and I have an issue with dispatch request to firestore. When I query the data, I get the correct data and after one second it disappears.
this is the Home screen where I want to show the data queried from firestore.
in my data structure each product has a categories array which has the categories for this product. I want to show these data in three different places in my home screen. hopefully, I could clearly describe my issue
import { useSelector, useDispatch } from 'react-redux';
import { useNavigation } from '#react-navigation/native';
import * as productActions from '../store/actions/products';
import * as categoriesActions from '../store/actions/Categories';
import * as promotionActions from '../store/actions/promotions';
const Home = ()=>{
const dispatch = useDispatch();
const navigation = useNavigation();
useEffect(()=>{
dispatch(productActions.fetchproducts());
dispatch(categoriesActions.fetchCategories());
dispatch(promotionActions.fetchPromotionProducts());
},[])
const categoryObject = useSelector(state=>state.categories.availableCategory)
const promotionArr = useSelector(state=>state.promoionProducts.promotionProducts)
const categoryTitle = [];
const categoryId = []
for(const key in categoryObject){
categoryTitle.push(categoryObject[key].title)
categoryId.push(categoryObject[key].id)}
return(
<ScrollView>
<ImageCarasoul pro={promotionArr}/>
<View style={styles.catName}>
<Text style={styles.catText}>{categoryTitle[0]}</Text>
<TouchableOpacity onPress={()=>{navigation.navigate("ProductsList", {catId: categoryId[0] })}}>
<Text style={styles.showAllText}>عرض الكل</Text>
</TouchableOpacity>
</View>
<Card catId={categoryId[3]}/>
<CategoriesList />
<View style={styles.catName}>
<Text style={styles.catText}>{categoryTitle[1]}</Text>
<TouchableOpacity onPress={()=>{navigation.navigate("ProductsList", {catId: categoryId[1] })}}>
<Text style={styles.showAllText}>عرض الكل</Text>
</TouchableOpacity>
</View>
<Card catId={categoryId[1]}/>
<View style={styles.catName}>
<Text style={styles.catText}>{categoryTitle[2]}</Text>
<TouchableOpacity onPress={()=>{navigation.navigate("ProductsList", {catId:categoryId[2]})}}>
<Text style={styles.showAllText}>عرض الكل</Text>
</TouchableOpacity>
</View>
<Card catId={categoryId[2]}/>
<Brands />
</ScrollView>
)};
and this is the card compenent
import { useSelector,useDispatch } from "react-redux";
import * as cartActions from '../store/actions/cart';
import * as categoryProductsAction from '../store/actions/categoryProducts';
const Card = (catId)=>{
//receive categoryID and fetc
const catProducts = ()=>{
dispatch(categoryProductsAction.fetchCategoryProducts(catId))
}
useEffect(()=>{
catProducts();
},[catId]);
const categoryProductsArr = useSelector(state=>state.categoryProducts.availableCategoryProducts)
const dispatch = useDispatch()
const navigation = useNavigation()
return(
<View >
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={categoryProductsArr}
renderItem={({item})=>{
return(
<View>
<View style={styles.cardView}>
<TouchableOpacity onPress={()=>{navigation.navigate("ProductDetails", {itemId: item.id, catId: item.categoryId, productTitle: item.title})}} style={styles.imageView}>
<Image style={styles.image} source={{uri: item.image}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{navigation.navigate("ProductDetails", {itemId: item.id, catId: item.categoryId, productTitle: item.title})}} style={styles.priceView}>
<View>
<Text style={styles.price}> ج.م {item.price}</Text>
</View>
<View style={styles.priceView}>
<Text style={styles.description}>{item.description}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>{dispatch(cartActions.addToCart(item, 1)) }}
style={styles.addToCartView}>
<Text style={styles.renderAddToCart}>اضف للسلة</Text>
</TouchableOpacity>
</View>
</View>
)
}}
/>
</View>
)};
this is th action
export const SET_CATEGORYPRODUCTS = "SET_CATEGORYPRODUCTS";
import {collection, getDocs, query, where } from "firebase/firestore";
import { db } from '../../config';
export const fetchCategoryProducts = ({catId})=>{
return async dispatch=>{
const categoryProductsCollection = query(collection(db, "Product"), where("categories", "array-contains", catId))
const getCategoryProducts = getDocs(categoryProductsCollection);
const categoryProducts = (await getCategoryProducts).docs.map(item=>{
const data = item.data();
data.id = item.id;
return data
})
console.log(categoryProducts)
dispatch({type: SET_CATEGORYPRODUCTS, categoryProduct: categoryProducts})
}}
and thsis is the reducer
import { SET_CATEGORYPRODUCTS } from "../actions/categoryProducts";
const initialState = {
availableCategoryProducts: []
};
export default (state = initialState, action)=>{
switch (action.type){
case SET_CATEGORYPRODUCTS:
return{
availableCategoryProducts: action.categoryProduct
}
}
return state};
Related
help, so lets say i got a bunch of data from an API (in Homescreen.js), which then i send to a component called "Artikel.js", how should i send the data in each of these articles to a screen called "DetailScreen.js". please someone help me, i'd appreciate it very very much, thanks in advance and sorry for bad english
const Homescreen = () => {
const [articles, setArticles] = useState([]);
const getArticles = () => {
axios
.get(
"https://newsapi.org/v2/top-headlines?country=us&apiKey=API_KEY",
{
params: {
category: "technology",
},
}
)
.then((response) => {
setArticles(response.data.articles);
})
.catch(function (error) {
console.log(error);
})
.then(function () {});
};
useEffect(() => {
getArticles();
}, []);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={articles}
renderItem={({ item }) => (
<Artikel
urlToImage={item.urlToImage}
title={item.title}
description={item.description}
author={item.author}
publishedAt={item.publishedAt}
sourceName={item.source.name}
url={item.url}
/>
)}
keyExtractor={(item) => item.title}
/>
</SafeAreaView>
);
};
export default Homescreen;
Artikel.js
const Artikel = (props) => {
const navigation = useNavigation();
const goToDetail = () => {
navigation.navigate("Detail", {judul: 'Asu'});
};
// const goToSource = () => {
// WebBrowser.openBrowserAsync(props.url);
// };
return (
<SafeAreaView style={styles.container}>
<Pressable onPress={goToDetail}>
<Image
style={styles.image}
on
source={{
uri: props.urlToImage,
}}
/>
</Pressable>
<View style={{ paddingHorizontal: 20, paddingBottom: 10 }}>
<Text style={styles.title}>{props.title}</Text>
<Text style={styles.deskripsi} numberOfLines={3}>
{props.description}
</Text>
<View style={styles.data}>
<Text style={styles.h2}>
source:<Text style={styles.sumber}> {props.sourceName}</Text>
</Text>
<Text style={styles.tanggal}>
{moment(props.publishedAt).format("MMM Do YY")}
</Text>
</View>
</View>
</SafeAreaView>
);
};
export default Artikel;
"DetailScreen.js"
const DetailScreen = (props) => {
return (
<SafeAreaView style={styles.container}>
<Header />
<View style={styles.image}>
<Image
source={{
uri: props.thumbnail,
}}
style={styles.image}
/>
</View>
<View style={styles.bodyartikel}>
<Text style={styles.judul}>PROPS TITLE</Text>
<Text style={styles.artikel}>
PROPS.ARTICLE
</Text>
<View style={styles.footer}>
<Text style={styles.h1}>
By: <Text style={styles.sumber}>Salman</Text>
</Text>
<Text>12 Okt 2020</Text>
</View>
</View>
</SafeAreaView>
);
};
export default DetailScreen;
i tried to make a list of the datas i need in Artikel.js and made it into a list, but it didnt work
So in your Article.js you have called an method to navigate to DetailScreen.js. You have can do like this.
In Article.js:
<Pressable onPress={() => goToDetail(props)}> // pass props as argument
<Image
style={styles.image}
source={{
uri: props.urlToImage,
}}
/>
</Pressable>
now in your goToDetail method:
// Catch passed arguments as props
const goToDetail = (props) => {
navigation.navigate('Details', {
title: props.title,
description: props.description,
})
// As for now just passing title and description from props
};
Now to access Passed data in Detail.js:
import { useRoute } from '#react-navigation/native';
const DetailScreen = () => {
let route = useRoute(); // using route hooks
let {title, data} = route.params
return (
<YourComponent/>
);
};
In this way you can pass data from one screen to another. For more detail you always can visit react native navigation docs: https://reactnavigation.org/docs/params
I'm pretty new to React Native and don't have the most experience with javascript so although this may be very simple I have no idea what to do. I have a class Component which acts like a popup in my app. It pops up on press of a touchable opacity and displays a little menu. I am trying to get the id of the button that is pressed on that menu and send it back to the functional component main screen (where the touchable opacity to open the menu is). I can get the id of the button but I'm struggling to get this data out of the popup and back into my main screen(functional component)
Here is my Code for the Main Screen:
import { StyleSheet, Text, View, Image,TouchableOpacity} from 'react-native'
import React,{useState} from 'react'
import tw, { create } from 'twrnc';
import Map from "../components/Map"
import { SafeAreaView } from 'react-native-safe-area-context';
import { BottomPopup } from '../components/popup';
import { selectTrucks} from '../slices/navSlice';
import { useSelector } from 'react-redux';
const Logistics = () => {
const Trucks = useSelector(selectTrucks);
let popupRef = React.createRef()
const onShowPopup = () => {
popupRef.show()
}
const onClosePopup = () => {
popupRef.close()
}
return (
<View style={{flex:1,resizeMode:'contain'}}>
<View style={tw`h-12/16`}>
<Map/>
</View>
<TouchableOpacity onPress={onShowPopup} style={{top:'-68%'}}>
<Image
source = {{uri: "https://icon-library.com/images/app-menu-icon/app-menu-icon-21.jpg" }}
style = {{width:'20%', height:40,resizeMode:'contain'}}
/>
<Text style={{color:'black',paddingLeft:2,fontSize: 26,fontWeight:"bold",top:-37,left:70}}>Truck {}</Text>
</TouchableOpacity>
<BottomPopup
title = "Select Option"
ref = {(target)=> popupRef = target}
onTouchOutside={onClosePopup}
data={Trucks.TrucksInfo}
/>
<SafeAreaView style={{top:'-13%'}}>
<Text style={{color:'darkgreen',paddingLeft:2,fontSize: 36,fontWeight:"bold"}}>123 Elmo Street</Text>
<Text style={{color:'darkgreen',paddingLeft:2,fontSize: 24,fontWeight:"bold"}}>L4L 6L8, Mississauga, Ontario</Text>
<Text style={{color:'darkgreen',paddingLeft:2,fontSize: 18,fontWeight:"bold"}}>Phone Number: 416-749-6857{'\n'}Client: Bobby Jeff{'\n'}Order Number: 7187181{'\n'}Packing Slip Number: 882929</Text>
<Text style={{color:'black',fontSize: 18,paddingLeft:2}}>Customer Notified: Yes at 2:32 PM</Text>
</SafeAreaView>
</View>
)
}
export default Logistics
const styles = StyleSheet.create({})
And Here is the code for the class component popup:
import { Modal,Dimensions,TouchableWithoutFeedback,StyleSheet,View,Text,FlatList,TouchableOpacity} from "react-native";
import React from "react";
import { useNavigation } from '#react-navigation/native';
import Logistics from "../screens/Logistics";
const deviceHeight = Dimensions.get('window').height
export class BottomPopup extends React.Component {
constructor(props){
super(props)
this.state = {
show:false
}
}
show = () => {
this.setState({show:true})
}
close = () => {
this.setState({show:false})
}
renderOutsideTouchable(onTouch) {
const view = <View style = {{flex:1,width:'100%'}}/>
if (!onTouch) return view
return (
<TouchableWithoutFeedback onPress={onTouch} style={{flex:1,width:'100%'}}>
{view}
</TouchableWithoutFeedback>
)
}
renderTitle = () => {
const {title} = this.props
return (
<View style={{alignItems:'center'}}>
<Text style={{
color:'#182E44',
fontSize:25,
fontWeight:'500',
marginTop:15,
marginBottom:30,
}}>
{title}
</Text>
</View>
)
}
renderContent = () => {
const {data} = this.props
return (
<View>
<FlatList
style = {{marginBottom:130}}
showsVerticalScrollIndicator = {false}
data={data}
renderItem={this.renderItem}
extraData={data}
keyExtractor={(item,index)=>index.toString()}
ItemSeparatorComponent={this.renderSeparator}
contentContainerStyle={{
paddingBottom:40
}}
/>
</View>
)
}
renderItem = ({item}) => {
return(
<TouchableOpacity
onPress={() => {this.close(),console.log(item.id)}}
>
<View style = {{height:50,flex:1,alignItems:'flex-start',justifyContent:'center',marginLeft:20}}>
<Text style={{fontSize:18,fontWeight:'normal',color:"#182E44"}}>{item.name}</Text>
</View>
</TouchableOpacity>
)
}
renderSeparator = () => {
return(
<View
style={{
opacity:0.1,
backgroundColor:'#182E44',
height:1
}}
/>
)
}
render() {
let {show} = this.state
const {onTouchOutside,title} = this.props
return (
<Modal
animationType={"fade"}
transparent={true}
visible={show}
onRequestClose={this.close}
>
<View style={{flex:1, backgroundColor:"#000000AA",justifyContent:'flex-end'}}>
{this.renderOutsideTouchable(onTouchOutside)}
<View style={{
backgroundColor:'#FFFFFF',
width:'100%',
paddingHorizontal:10,
maxHeight:deviceHeight*0.4}}
>
{this.renderTitle()}
{this.renderContent()}
</View>
</View>
</Modal>
)
}
}
The console log in the render item function gets me the number i need i just need to get this number out and back into my logistics screen
What you can do is like onTouchOutside you can pass getId function as props which will return id.
I don`t have much experience with class component. So I have add sample code in functional component. You can refer this
const MainComponent = ()=>{
const getIdFunc = (id)=>{
//You will get id here
}
return(<View>
{/* pass function here */}
<PopUpComponent getIdFunc={getIdFunc}/>
</View>)
}
const PopUpComponent = (props)=>{
return(<TouchableOpacity
onPress={()=>{
//call function by passing id here
props.getIdFunc(id)
}}
>
</TouchableOpacity>)
}
Beginner question here, not sure exactly what this would be considered, but I'm trying to make a form where a user can add and remove input rows upon pressing a button. What do I need to change to render new components or remove components when the Add or Remove buttons are pressed? Right now, the Add and Remove button change the textInput array appropriately, but components are not actually being added or removed.
Here is my current code:
FormScreen.js
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Button, Caption } from 'react-native-paper';
import InputCard from '../components/InputCard';
const FormScreen = props => {
const textInput = [1,2,3];
const addTextInput = () => {
let currArr = textInput;
let lastNum = currArr[currArr.length -1]
let nextNum = lastNum + 1
console.log(currArr, lastNum, nextNum);
textInput.push(
nextNum
);
console.log(textInput);
};
const removeTextInput = () => {
textInput.pop();
console.log(textInput);
};
return (
<ScrollView>
<View style={styles.col}>
<View style={styles.row}>
<Caption>Favorite colors?</Caption>
</View>
<View style={styles.row}>
<View>
{textInput.map(key => {
return (
<InputCard key={key}/>
);
})}
</View>
</View>
<View>
<View style={styles.col}>
<Button title='Add' onPress={() => addTextInput()}>Add</Button>
</View>
<View style={styles.col}>
<Button title='Remove' onPress={() => removeTextInput()}>Remove</Button>
</View>
</View>
</View>
</ScrollView>
);
};
export default FormScreen;
InputCard.js
import React, { useState } from "react";
import { View, StyleSheet } from 'react-native';
import { Caption, Card, TextInput } from "react-native-paper";
const InputCard = (props) => {
const [input, setInput] = useState('');
return (
<View>
<Card>
<Card.Content>
<Caption>Item {props.key}</Caption>
<View style={styles.row}>
<View style={styles.half}>
<TextInput
label="Input"
value={input}
onChangeText={input => setInput(input)}
mode="outlined"
style={styles.textfield}
/>
</View>
</View>
</Card.Content>
</Card>
</View>
);
}
export default InputCard;
Instead of storing it in a array, try to do something like this, using 2 states.
const [totalTextInput, setTotalTextInput] = useState([])//initial state, set it to any data you want.
const [count, setCount] = useState(0);
const addTextInput = () => {
setCount((prevState) => prevState + 1);
setTotalTextInput((prevState) => {
const newTextInput = Array.from(prevState); // CREATING A NEW ARRAY OBJECT
newTextInput.push(count);
return newTextInput;
});
};
const removeTextInput = () => {
setTotalTextInput((prevState) => {
const newTextInput = Array.from(prevState); // CREATING A NEW ARRAY OBJECT
newTextInput.pop();
return newTextInput;
});
};
And in your code:
<View>
{totalTextInput.map(key => {
return (
<InputCard key={key}/>
);
})}
</View>
The data being fetched from the api is needed for other purposes in the modal. How do i pass data: {currency.data.prices[index].instrument} {currency.data.prices[index].closeoutAsk} {currency.data.prices[index].closeoutBid} that is in a component to a modal that is in the same component. Below is the code:
//HomeScreen
import React, {useContext, useState} from 'react'
import { Text, View, ScrollView, TouchableOpacity, Modal, TextInput } from 'react-native'
import {ListItem, Card, Button, Icon} from 'react-native-elements'
//import CurrencyPair from '../../CurrencyPair'
import {firebase} from '../../../firebase/config'
import {CurrencyContext} from '../../../context/Context'
import styles from '../LoginScreen/styles'
function HomeScreen() {
const currency = useContext(CurrencyContext);
const [modalopen, setModalOpen] = useState(false)
return (
<ScrollView>
<Modal
visible={modalopen}
animationType={"fade"}
>
<View style={styles.modal}>
<View>
<Text style={{textAlign: "center", fontWeight: "bold"}}>
CreateAlert
</Text>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
<Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
<Card>
<Text style={{textAlign: "center"}}>
Welcome
</Text>
<Button title="Sign Out" type="outline" onPress ={() => firebase.auth().signOut()}/>
<Button title="My Alerts" onPress ={() =>navigation.navigate("AlertScreen") }/>
</Card>
<View>
{currency.data.prices && currency.data.prices.map((prices, index) => {
return (
<ListItem
key={index}
onPress = {() => setModalOpen(true)}
bottomDivider>
<ListItem.Content>
<ListItem.Title>
{currency.data.prices[index].instrument} {currency.data.prices[index].closeoutAsk} {currency.data.prices[index].closeoutBid}
</ListItem.Title>
</ListItem.Content>
</ListItem>
)
})
}
</View>
</ScrollView>
)
}
export default HomeScreen
//Context
import React, {createContext, useState, useEffect}from 'react'
import {ActivityIndicator} from 'react-native'
import axios from '../utils/axios'
const CurrencyContext = createContext();
const CurrencyProvider =(props) => {
const [data, setData] = useState([])
const [isLoading, setIsloading] = useState(true)
useEffect(() => {
const interval = setInterval(() => {
const fetchpairs = async() => {
const results = await axios.get('/v3/accounts/101-004-14328428-002/pricing?instruments=AUD_CAD%2CAUD_CHF%2CAUD_JPY%2CAUD_NZD%2CAUD_USD%2CCAD_CHF%2CCAD_JPY%2CCHF_JPY%2CEUR_AUD%2CEUR_CAD%2CEUR_CHF%2CEUR_GBP%2CEUR_NOK%2CEUR_NZD%2CEUR_USD%2CGBP_AUD%2CGBP_CAD%2CGBP_CHF%2CGBP_USD%2CGBP_JPY%2CNZD_CAD%2CNZD_CHF%2CNZD_JPY%2CUSD_CAD%2CUSD_JPY%2CUSD_CHF%2CUSD_ZAR%2CUSD_MXN')
setData(results.data)
setIsloading(false)
}
fetchpairs()
},1000)
}, []);
if(isLoading) {
return (
<ActivityIndicator size="large"/>
)
}else
return (
<CurrencyContext.Provider
value={{
data,
setData,
isLoading,
setIsloading
}}>
{props.children}
</CurrencyContext.Provider>
)
}
export {CurrencyProvider, CurrencyContext}
you can create another state variable to store the clicked index.
const [clickedIndex, setClickedIndex] = useState(0);
then use that in the onPress event.
onPress = {() => {setModalOpen(true);setClickedIndex(index);}
then you can use this same index to display what you want in the modal.
<Modal
visible={modalopen}
animationType={"fade"}
>
<View style={styles.modal}>
<View>
<Text style={{textAlign: "center", fontWeight: "bold"}}>
{currency.data.prices[clickedIndex].instrument}
</Text>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
<Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
I just started to learn React-native. In this app I have a two buttons in header, first 'Todo', second 'Tags'. I want to chang content by press on these buttons. I think I need to change state.for clarityWhat I mean, when i tap on the button Tags, below I get TagScreen component, exactly the same for the button Todo. How to connect these components so that they work correctly?
app.js
import React, { useState } from 'react'
import { StyleSheet, View, FlatList } from 'react-native'
import { Navbar } from './src/Navbar'
import { TagScreen } from './src/screens/TagScreen'
import { TodoScreen } from './src/screens/TodoScreen'
export default function App() {
const [todos, setTodos] = useState([])
const [tags, setTags] = useState([])
const [appId, setAppId] = useState([])
const addTodo = title => {
setTodos(prev => [
...prev,
{
id: Date.now().toString(),
title
}
])
}
const addTags = title => {
setTags(prev => [
...prev,
{
id: Date.now().toString(),
title
}
])
}
const removeTags = id => {
setTags(prev => prev.filter(tag => tag.id !== id))
}
const removeTodo = id => {
setTodos(prev => prev.filter(todo => todo.id !== id))
}
return (
<View>
<Navbar title='Todo App!' />
<View style={styles.container}>
<TagScreen addTags={addTags} tags={tags} removeTags={removeTags}/>
{/* <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} /> */}
{/* HERE MUST CHANGED COMPONENTS */}
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 30,
paddingVertical: 20
}
})
navbar.js
import React from 'react'
import { View, Text, StyleSheet, Button, TouchableOpacity } from 'react-native'
export const Navbar = ({ title }) => {
return (
<View style={styles.padding}>
<View style={styles.navbar}>
<TouchableOpacity
style={styles.button}
>
<Text>Todo</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
>
<Text>Tags</Text>
</TouchableOpacity>
<Text style={styles.text}>{title}</Text>
</View>
</View>
)
}
well you need to track the visiblity of what is visible in your state,
in your App component, do this;
const [showTodos, setShowTodos] = useState(false);
const makeTodosInvisible= () => setShowTodos(false);
const makeTodosVisible = () => setShowTodos(true);
return (
<View>
<Navbar onTodoPress={makeTodosVisible } onTagPress={makeTodosInvisible} title='Todo App!' />
<View style={styles.container}>
{showTodos
? <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} />
: <TagScreen addTags={addTags} tags={tags} removeTags={removeTags}/>
}
{/* <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} /> */}
{/* HERE MUST CHANGED COMPONENTS */}
</View>
</View>
)
and in your navbar.js do this
export const Navbar = ({ title, onTodoPress, onTagPress}) => {
return (
<View style={styles.padding}>
<View style={styles.navbar}>
<TouchableOpacity
style={styles.button}
onPreesed={onTodoPress} // will hide Tags and show Todos
>
<Text>Todo</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPreesed={onTagPress} // will show Tags and hide Todos
>
<Text>Tags</Text>
</TouchableOpacity>
<Text style={styles.text}>{title}</Text>
</View>
</View>
)
}