I am working on a simple React Native e-commerce app and i ran into a issue. I am trying to add the option to change the language, and it has worked so far with the Redux but now i need to dynamically change the sidebar menu and I cant because it is hardcoded as a prop.The code for the menu is this.
const ShopNavigator = createDrawerNavigator(
{
Produktetee: ProductsNavigator,
Rezervimet: OrdersNavigator,
Postoni: AdminNavigator},
{
contentOptions: {
activeTintColor: MyColors.primary
},
contentComponent: props => {
const {log_out} = useSelector(state => state.language)
const dispatch = useDispatch();
return (
<View style={{ flex: 1, paddingTop: 50 }}>
<SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
<DrawerItems {...props} />
<Button
title={log_out}
color={MyColors.primary}
onPress={() => {
dispatch(authActions.logOut());
// props.navigation.navigate("Auth");
}}
/>
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10, marginTop: 5,}} >
<Button
title="English"
type="outline"
color={MyColors.primary}
onPress={()=>{
dispatch(index.selectLanguage(languages.english))
}}
/>
</View>
<View style={{flex:1, marginTop: 5,}} >
<Button
title="Shqip"
type="outline"
color={MyColors.primary}
onPress={()=>{
dispatch(index.selectLanguage(languages.albanian))
}}
/>
</View>
</View>
</SafeAreaView>
</View>
);
}
}
);
I am trying to use the hook, but I can't. If somebody could help me I would be very grateful.
Related
I am pretty new to React Native and I want to create a very simple passwordShow Button in the Textinput. The TouchableOpacity triggers the very simple showPassword function and changes the var passwordHidden to false. But sadly the reactTextInput isn't updating and the password keeps hidden. Any ideas why?
export function TextInput(props: Props) {
let passwordHidden = true
function showPassword() {
passwordHidden = false
}
return (
<View style={{marginBottom: props.marginBottomProp}}>
<FormComponentMargin>
<View style={styles.container}>
<View style={{width: 48, alignItems: 'center'}}>
<Icon
name={props.icon}
type={props.iconType ?? "font-awesome"}/>
</View>
<ReactTextInput
style={{...styles.textInput}}
placeholderTextColor={placeholderTextColor}
secureTextEntry={passwordHidden}
{...props}
/>
<TouchableOpacity onPress={showPassword}>
<View
style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
<Icon
name={"eye"}
type={props.iconType ?? "font-awesome"}
color={tintColor}
size={20}
/>
</View>
</TouchableOpacity>
</View>
</FormComponentMargin>
</View>
)
}
You need to re-render your component once you tapped the button, so handle the variable as a state.
Make use of useState hook -
import React, {useState} from 'react';
export function TextInput(props: Props) {
const [passwordHidden, setPasswordHidden] = useState(true);
function showPassword() {
setPasswordHidden(!passwordHidden);
}
return (
<View style={{marginBottom: props.marginBottomProp}}>
<FormComponentMargin>
<View style={styles.container}>
<View style={{width: 48, alignItems: 'center'}}>
<Icon
name={props.icon}
type={props.iconType ?? "font-awesome"}/>
</View>
<ReactTextInput
style={{...styles.textInput}}
placeholderTextColor={placeholderTextColor}
secureTextEntry={passwordHidden}
{...props}
/>
<TouchableOpacity onPress={showPassword}>
<View
style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
<Icon
name={"eye"}
type={props.iconType ?? "font-awesome"}
color={tintColor}
size={20}
/>
</View>
</TouchableOpacity>
</View>
</FormComponentMargin>
</View>
)
}
As title says, I need to create a modal popup for every list item for the selected sizes to be displayed. I'm using the react-native-popup-dialog but without results. Could you help me? Here's my code:
step1 = () => {
return (
<View style={{ flex: 8}}>
<Text h3 style={{ ...styles.title, marginVertical: 10.0 }}>{this.state.user=="User"?"Size":"CargoSize"}</Text>
<ScrollView>
<View style={{ marginHorizontal: 16.0 }}>{
this.state.size.map((l, i) => (
<ListItem key={i} onPress={() => this.setState({sizeSelected: i, sizeName: l.title, sizeId: l.id})} underlayColor='transparent'
containerStyle={{backgroundColor: this.state.sizeSelected==i?'#F76858':'white', borderWidth: 1.0,
borderColor: '#707070', marginBottom: 10.0, paddingVertical: 5.0, paddingHorizontal: 40.0}}>
<ListItem.Content>
<View style={{
flexDirection: 'row', alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={styles.textSize}>{l.title}</Text>
<Text style={{ fontSize: 16 }}>{l.example}</Text>
</View>
</ListItem.Content>
</ListItem>
))
}</View>
</ScrollView>
</View>
);
}
I believe you can declare a single modal in your list component and show or hide the modal when the user presses the listItem. Also, make the pressed item active and pass the item to your modal so that the modal can show the details of the active item.
App.js
export default function App() {
const [modalVisible, setModalVisible] = React.useState(false);
const [activeItem, setActiveItem] = React.useState(null);
const onPress = (item) => {
setActiveItem(item)
setModalVisible(true)
}
const renderItem = ({ item }) => (
<TouchableOpacity onPress={()=>onPress(item)}>
<Item title={item.title} />
</TouchableOpacity>
);
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
<Popup modalVisible={modalVisible} setModalVisible={setModalVisible} activeItem={activeItem} />
</View>
);
}
Modal.js
export default function Popup({modalVisible, setModalVisible, activeItem}) {
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>{activeItem?.title}</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
onPress={() => {
setModalVisible(!modalVisible);
}}>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
Here is a working demo for you.
I made something similar in my react-native project and do this:
Made with {useState} the variables i need in my modal, example, the name of my component
Wrap the ListItem component in a Pressable component
Put the onPress={() => {//Put your code here}} function, inside you will put the SetVariable of the variable you want in the modal
The Pressable will update the variable with the wich you want in the modal
I have a problem like picture below:
Text
As you guy can see I have info on every item: name and stock. Now I want to update stock on single item by type a number to text Input But when I type 3 into 1 Text Input, it fills 3 in all the remaining Text Input. This is my render Item:
renderItem = ({item}) => {
return (
<View style={styles.card}>
<TouchableOpacity
onPress={() => {
setCreateAt(item.WarehouseProduct.createdAt);
setNote(item.note);
setShowModal(true);
}}>
<Image
style={styles.tinyLogo}
source={require('../assets/images/fish.jpg')}
/>
</TouchableOpacity>
<View
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 5,
height: 75,
width: 160,
}}>
<Text numberOfLines={2} style={styles.text}>
{item.name}
</Text>
<Text style={styles.text}>
{item.WarehouseProduct.stock.toString()}
</Text>
</View>
<View style={styles.iconcontainer}>
<Button title="clear" onPress={() => console.log(text)} />
</View>
<View
style={{
alignSelf: 'center',
marginLeft: 20,
borderWidth: 1,
borderRadius: 10,
}}>
<TextInput
style={{height: 40, width: 50}}
keyboardType="numeric"
onChangeText={(income) => setText(income)}
value={text}
/>
</View>
</View>
);
};
Can anyone help me solve this problem? Just give me an idea. Thanks all!
anything you put in renderitem will be rendered as much as your data in flatlist
<Flatlist
data={containtmultipledata}
renderItem={
....
<TextInput
style={{height: 40, width: 50}}
keyboardType="numeric"
onChangeText={(income) => setText(income)}
value={text}
/>
....
}
>
but you asign it to single value
you can change data you put in flatlist directly by index in item
<TextInput
style={{height: 40, width: 50}}
keyboardType="numeric"
onChangeText={(txt) => containMultipledata[index].yourObjectName = txt}
value={item.yourObjectName}
/>
Try this way
const [data, setData] = useState([... flat list data here default]);
const onTextChanged = (index, value) => {
const data = [...data];
data[index].availableStock = value; <-- "availableStock" is example key for showing way out of this -->
setData(data);
}
renderItem = ({item, index}) => {
return (
<View style={styles.card}>
......
<TextInput
...
onChangeText={(income) => onTextChanged(index, income)}
value={item.availableStock || 0}
/>
</View>
);
};
I have a list of cards,
when pressed to any of them, I want to Increase hight for that card,
So I use layoutAnimation to handle this case because when I use Animated API from RN, I got an error when setNativeDrive "height"
Anyway,
In my case, it increases height for every card in the list,
So how can I solve it?
Code snippet
Live Demo
const OpenedAppointments = ({slideWidth}) => {
const [currentIndex, setCurrentIndex] = React.useState(null);
const [cardHeight, setCardHeight] = useState(140);
const collapseCard = (cardIndex) => {
setCurrentIndex(cardIndex);
currentIndex === cardIndex
? (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
Animated.spring(),
setCardHeight(200))
: (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
Animated.spring(),
setCardHeight(140));
};
const renderItems = (item, index) => {
return (
<TouchableOpacity
delayPressIn={0}
onPress={() => collapseCard(index)}
key={item.id}>
<Animated.View
style={[
styles.itemContainer,
{
height: cardHeight,
},
]}>
<View style={styles.headerContainer}>
<View style={styles.imgContainer}>
<Image
resizeMode="cover"
style={styles.img}
source={{uri: item.vendorInfo.vendorImg}}
/>
</View>
<View style={{width: '80%'}}>
<View style={styles.titleContainer}>
<Text numberOfLines={1} style={styles.vendorName}>
{item.vendorInfo.name}
</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={styles.rateText}>{item.vendorInfo.rate}</Text>
<AntDesign name="star" size={18} color="#262626" />
</View>
</View>
<View style={styles.socialContainer}>
<View
style={{
width: 32,
height: 32,
backgroundColor: '#000',
borderRadius: 5,
}}
/>
</View>
</View>
</View>
<View style={styles.footer}>
<Text style={styles.serviceName}>
{item.serviceName}
</Text>
<Text style={styles.price}>
{item.price}
</Text>
</View>
// this will appeared when pressed to card "Footer Card"
<View>
<View style={styles.line} />
<View style={styles.editFooter}>
<View style={styles.dateContainer}>
<MemoCalender
style={styles.calenderIcon}
size={26}
color="#000"
/>
<View style={styles.dateBox}>
<Text style={styles.dateText}>{item.date}</Text>
<Text style={styles.dateText}>{item.time}</Text>
</View>
</View>
</View>
</View>
</Animated.View>
</TouchableOpacity>
);
};
return(
<>
{Data.opened.map((item, index) => renderItems(item, index))}
</>
);
}
Change this:
<Animated.View
style={[
styles.itemContainer,
{
height: cardHeight,
},
]
>
{...}
</Animated.View>
by
<Animated.View
style={[
styles.itemContainer,
{
height: currentIndex === index ? cardHeight : 140,
},
]
>
{...}
</Animated.View>
If you want to be more efficient, the default height of your card, define it in a constant (ex: const = DEFAULT_CARD_HEIGHT = 140) and use this constant wherever you use 140 as card height
in my program write in react native i have this snippet:
getCompanyFunction() {
const { enterprises, navigation } = this.props;
return (
<ScrollView horizontal>
<View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
{ enterprises.map((enterprise) => {
return (
<Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
<ListItem
title={enterprise.name}
subtitle={(
<View>
<Text style={{ color: theme.text.default }}>
{enterprise.fonction}
</Text>
<Text style={{ color: theme.palette.text.default }}>
{enterprise.location || ''}
</Text>
</View>
)}
onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
/>
</Card>
);
})}
</View>
</ScrollView>
);
}
for my example i have three enterprise but only the first is apparent in the result. However the map function should iterate my array?
thank!
The map function returns a new array with the results of its operation.
MDN docs:
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
You could use a FlatList component to render the resulting array from your map function.
Here's an example on how you could do it (assuming you don't need to alter enterprises data):
renderCard = (enterprise) => {
return (
<Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
<ListItem
title={enterprise.name}
subtitle={(
<View>
<Text style={{ color: theme.text.default }}>
{enterprise.fonction}
</Text>
<Text style={{ color: theme.palette.text.default }}>
{enterprise.location || ''}
</Text>
</View>
)}
onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
/>
</Card>
);
}
getCompanyFunction()
const { enterprises, navigation } = this.props;
return (
<ScrollView horizontal>
<View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
<FlatList
data={enterprises}
renderItem={({ item }) => renderCard(item)} />
</View>
</ScrollView>
);
}
You don't necessarily need to use a component to render a list of components, but it's usually the best course of action to do so.