I am currently learning to build a shopping app and working on the cart functionality of the react native application. I have made a separate shopping cart icon component which I am passing into the main application. However, when I try to display the number of items in the shopping cart icon using the length attribute, the length is not getting displayed. I am a beginner and any help will be appreciated.
ShoppingCartIcon.js
import React, { Component } from 'react';
import { View, Text, Picker,Button } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Actions } from 'react-native-router-flux';
goToNextScreen = () => {
Actions.cartScreen();
}
const ShoppingCartIcon = (props) => (
<View style={{position:'absolute', top:0,left:0,width: 40,height: 40,borderRadius: 40/2,paddingTop:3}}>
<View style={{
position: 'absolute', height: 20, width: 20, borderRadius: 10, backgroundColor: 'rgba(6,21,42,0.8)', top:0, left: 5, alignItems: 'center', justifyContent: 'center', zIndex: 2000
}}>
<Text style={{ color: 'white', fontWeight: 'bold',fontSize:10 }}>{props.cartItems.length}</Text>
</View>
<Icon onPress={() => this.goToNextScreen()} name="shopping-cart" style ={{fontSize:30, position:'absolute', top:0,padding:7, left:0, color:'#fe003a'}} />
</View>
)
const mapStateToProps = (state) => {
return {
cartItems: state
}
}
export default connect(mapStateToProps)(ShoppingCartIcon);
Output:
The image of the shopping cart icon
In the mapStateToProps function, you set cartItems: state, but maybe you'd have to do cartItems: state.YourReducerName.yourArrayName. Could you post the reducer code as well?
Related
I m very new in react native and I m getting this error. Please help!
navigation.navigate is not a function. (In 'navigation.navigate("HomeScreen")', 'navigation.navigate' is undefined)
import { View, Text,Button,StyleSheet, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'
import { NavigationContainer,CommonActions, useNavigation } from '#react-navigation/native';
const GetOtpButton = (navigation) => {
return (
<View >
<TouchableOpacity style = {styles.button} onPress={() => navigation.navigate("HomeScreen") } >
<Text style = {styles.text}>Log in</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
button: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "white",
width: "100%",
height: 50,
borderColor: "#E13C72",
backgroundColor: "#E13C72",
borderWidth: 0.1,
borderRadius: 80,
// marginBottom: 40,
// marginVertical: 5,
// marginTop: 10,
},
text: {
justifyContent: 'center',
textAlign: 'center',
color: "white",
fontWeight: 'bold'
}
});
export default GetOtpButton
---------------------App.js------------------
import react from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
import SigninScreen from "./src/SigninScreen/SigninScreen";
import HomeScreen from "./src/HomeScreen/HomeScreen";
import { NavigationContainer, StackActions } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="SigninScreen" options={{headerShown: false}}>
<Stack.Screen name = 'SigninScreen' component={SigninScreen} options={{headerShown: false}}/>
<Stack.Screen name = 'HomeScreen' component={HomeScreen} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
root: {},
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#FFFFFF",
},
});
The component GetOptButton is not defined as a screen in the navigator, thus the navigation object will not be passed to it automatically by the navigation framework. Thus, you have multiple choices here.
Define it as a screen inside the navigator
<Stack.Screen name = 'GetOpt' component={GetOptButton} />
The framework will now pass the navigation object to the GetOptButton component. You can access it as follows.
const GetOtpButton = ({navigation}) => { ... }
Now, since GetOptButton seems to be a component rather than a screen to which you will navigate, it might not make much sense to define it inside the navigator.
Pass the navigation object from a screen which is defined in the navigator that uses the GetOptButton component
// this works, since `Homescreen` is defined as a screen in your navigator
const HomeScreen = ({navigation}) => {
return (
<GetOptButton navigation={navigation} />
)
}
Destructure the navigation object inside GetOptButton as shown above.
Use the useNavigation hook
For some components it might not make sense to pass the navigation object from its parent, e.g. if the component is deeply nested. For this cases you can use the useNavigation hook.
const GetOptButton = () => {
const navigation = useNavigation()
}
You are not showing how GetOtpButton is used but guessing that navigation is passed as prop to GetOtpButton you need to get to navigation like this
const GetOtpButton = ({navigation}) => {
return (
<View >
<TouchableOpacity style = {styles.button} onPress={() => navigation.navigate("HomeScreen") } >
<Text style = {styles.text}>Log in</Text>
</TouchableOpacity>
</View>
)
}
See that the difference is that navigation is surrounded by curly brackets, so later you get the parameter navigation inside the props
I am creating simple countdown component with React-Native and using this package react-native-countdown-component, I want to destroy this Timer component or stop its execution when the focused screen changes, for Bottom navigation I am using React-Native Tab navigation, what is best solution to achieve this result?
import { MaterialCommunityIcons } from "#expo/vector-icons";
import React, { useEffect, useState } from "react";
import { View } from "react-native";
import CountDown from "react-native-countdown-component";
const Timer: React.FC<{ expirationDate: number }> = ({ expirationDate }) => {
const [timer, setCurrentTime] = useState<number>(expirationDate);
const [inactive, setIncative] = useState(false);
return (
<View
style={{
backgroundColor: timer < 300 || inactive ? "#edbcbc" : "#cee5f4",
width: 70,
borderRadius: 7,
paddingVertical: 6,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
position: "relative",
}}
>
<View style={{ position: "relative", left: 4 }}>
<MaterialCommunityIcons name="timer-outline" size={13} color={timer < 300 || inactive ? "#f54c4c" : "#004978"} />
</View>
<CountDown
until={timer}
timeToShow={["M", "S"]}
timeLabels={false}
digitStyle={{ backgroundColor: "#f5f5f500" }}
separatorStyle={{ color: "#004978", fontSize: 10 }}
digitTxtStyle={{ color: timer < 300 || inactive ? "#f54c4c" : "#004978" }}
onFinish={() => setIncative(true)}
size={9}
running={timer ? true : false}
showSeparator
/>
</View>
);
};
export default Timer;
The CountDown component manages the timer itself and the library author manage to clear the timer when the component unmount https://github.com/talalmajali/react-native-countdown-component/blob/master/index.js#L58
the useEffect function allows you to return a function that gets called when a component unmounts. you could use that or call something when the tab changes.
please read this link:
https://github.com/talalmajali/react-native-countdown-component/blob/master/index.js#L58
if you have any question you can ask it
I'm developing a react native app with redux as a state management and trying the following implementation:
Fetching data from Server (Firebase) before rendering the app. I have a loading screen, which is working fine, but i cant dispatch my function in it for fetching the data from server and write directly to the current state. I dont see that the state is changed, but when I saving the code (as it is) again the state is updated as I expected. So i think my code is fetching the data after the first rendering is done.
I cant figure out the the problem. Cause i put my code for dispatching in the "useeffect" hook as i should or not?
import React, {useEffect} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {Images, useTheme} from '#config';
import {Image, Text} from '#components';
import styles from './styles';
import {ApplicationActions} from '#actions';
import { store } from '/Users/user1/KitaList/app/store/index.js'
export default function Loading({navigation}) {
const {colors} = useTheme();
const onProcess = () => {
setTimeout(() => {
navigation.replace('Main');
}, 2500);
};
useEffect(() => {
store.dispatch(ApplicationActions.ongetKitadata()); //Executing dispatchting getting data
onProcess();
}, []);
return (
<View style={styles.container}>
<View style={{alignItems: 'center'}}>
<Image source={Images.logo} style={styles.logo} resizeMode="contain" />
<Text title1 style={{marginTop: 10}}>
MyApp
</Text>
<Text headline primaryColor style={{marginTop: 10}}>
MyApp DIRECTORY
</Text>
</View>
<ActivityIndicator
size="large"
color={colors.text}
style={{
position: 'absolute',
top: 260,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
}}
/>
</View>
);
}
I have an ItemForm component in a react-native expo app I would like to use for both Creates and Updates. It is a functional component which I am trying to pass a handler from a parent component to either create a new item or update an existing item. I am having trouble understanding how to pass the onPress handler down from the parent Class Component down to the functional child form Component.
Parent Component:
import React, { Component } from "react";
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import ItemForm from './components/ItemForm';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends Component {
handleSubmit = ({ name }) => {
alert(name);
// todo: get form data and create or update database
}
render() {
return (
<View style={styles.container}>
<Card>
<ItemForm onSubmit={() => this.handleSubmit}/>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
ItemForm.js
import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Button, Card, Icon, Input } from "react-native-elements";
export default function ItemForm({ onSubmit }) {
const [name, setName] = useState("");
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Add an Item</Text>
</View>
<Card
containerStyle={{
height: "80%",
margin: 0,
elevation: 1,
borderWidth: 0,
shadowOpacity: 0,
shadowRadius: 0,
}}
>
<Input
label="Item Name"
labelStyle={styles.itemText}
placeholder="Name Here"
onChangeText={(name) => setName(name)}
/>
<Button
icon={
<Icon
name="check-circle"
size={20}
style={{ paddingRight: 10 }}
onPress={onSubmit({name: name})}
/>
}
title="Save Item"
/>
</Card>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
header: {
alignItems: "center",
paddingTop: 40,
},
headerText: {
fontSize: 32,
},
itemText: {
fontSize: 25,
}
});
This is currently throwing:
onSubmit is not a function. (In 'onSubmit({name: name})', 'onSubmit' is undefined)
I've tried various different syntaxes of passing or calling the function by reading the docs here but I run into a lot of errors like Please attach a method to this component and I can't seem to get past this?
onPress should be a function that calls onSubmit, not the return value of calling onSubmit (onPress={onSubmit({name: name})}).
onPress needs to be on the Button.
You need to pass down this.handleSubmit from the parent component, and not a function that returns this.handleSubmit (onSubmit={() => this.handleSubmit}):
So in App:
<ItemForm onSubmit={this.handleSubmit}/>
In ItemForm:
<Button
onPress={() => onSubmit({name: name})}
icon={
<Icon
name="check-circle"
size={20}
style={{ paddingRight: 10 }}
/>
}
title="Save Item"
/>
demo
I am trying to add a stateless component to my button.
const button = ({onButtonPress, buttonText}) => {
return (
<TouchableHighlight
onPress={() => onButtonPress()}>
<ButtonContent text={buttonText}/>
</TouchableHighlight>
)
};
and get this error:
Warning: Stateless function components cannot be given refs (See ref "childRef"
in StatelessComponent created by TouchableHighlight).
Attempts to access this ref will fail.
I have read up on the issue but I am still new to javascript and RN and have not found a solution. Any help would be appreciated.
full code:
GlossaryButtonContent:
import React from 'react';
import {
View,
Text,
Image,
StyleSheet
} from 'react-native';
import Colours from '../constants/Colours';
import {
arrowForwardDark,
starDarkFill
} from '../assets/icons';
type Props = {
text: string,
showFavButton?: boolean
}
export default ({text, showFavButton} : Props) => {
return (
<View style={styles.container}>
{showFavButton &&
<Image
style={styles.star}
source={starDarkFill}/>}
<Text style={[styles.text, showFavButton && styles.favButton]}>
{showFavButton ? 'Favourites' : text}
</Text>
<Image
style={styles.image}
source={arrowForwardDark}
opacity={showFavButton ? .5 : 1}/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
favButton: {
marginLeft: 10,
color: Colours.darkTextHalf
},
text: {
flex: 1,
paddingTop: 5,
marginLeft: 20,
fontFamily: 'Bariol-Bold',
fontSize: 24,
color: Colours.darkText
},
image: {
marginRight: 20
},
star: {
marginLeft: 10
}
});
GlossaryButton:
import React from 'react';
import {
TouchableHighlight,
StyleSheet
} from 'react-native';
import Colours from '../constants/Colours';
import ShadowedBox from './ShadowedBox';
import GlossaryButtonContent from './GlossaryButtonContent';
type Props = {
buttonText: string,
onButtonPress: Function,
rowID: number,
sectionID?: string,
showFavButton?: boolean
}
export default ({buttonText, onButtonPress, rowID, sectionID, showFavButton} : Props) => {
return (
<ShadowedBox
style={styles.container}
backColor={showFavButton && Colours.yellow}>
<TouchableHighlight
style={styles.button}
underlayColor={Colours.green}
onPress={() => onButtonPress(rowID, sectionID)}>
<GlossaryButtonContent
text={buttonText}
showFavButton={showFavButton}/>
</TouchableHighlight>
</ShadowedBox>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
height: 60,
marginBottom: 10,
borderRadius: 5
},
button: {
flex: 1,
borderRadius: 5
}
});
Basically, Stateless components cannot have refs.
So, having a stateless component in the middle of the render tree will create a void in the ref chain, meaning you cannot access lower-down components.
So, the problem comes from trying to do this:
let Stateless = (props) => (
<div />
);
let Wrapper = React.createClass({
render() {
return <Stateless ref="stateeee" />
}
});
TouchableHighlight needs to give a ref to its child. And this triggers that warning.
Answer:
You can't actually make a stateless component a child of TouchableHighlight
Solution:
Use createClass or class to create the child of TouchableHighlight, that is GlossaryButtonContent.
See this github issue for more info and this one