can't write on my textInput inside my flatlist - reactjs

I try to do a profil update with a flatlist to catch all my value and attribute. but when i want to write something new is not working. i tried to take off my placeholder and my default value with my actual value, then write something but i have the same problem.
const Item = ({ attribute, value, item }) => {
return (
<View
key={item}
style={{
flex: 1,
flexDirection: "column",
marginBottom: 20,
paddingLeft: 10,
}}>
<View
style={{
flexDirection: "row",
flex: 1,
alignItems: "center",
marginBottom: 5,
}}>
<View style={{ marginRight: 10 }}>
<Feather
onPress={() => {
setOnEdit(true);
}}
name="edit"
size={24}
color="#8E8E8E"
/>
</View>
<Text style={{ color: "#FF6B35", fontWeight: "bold" }}>
{attribute}
</Text>
</View>
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{onEdite ? (
<TextInput
defaultValue={value}
placeholder={value}
placeholderTextColor={"black"}
onChangeText={(text) => {
createHandler(text, attribute);
}}
/>
) : (
<Text style={{ color: "#8E8E8E" }}>{value}</Text>
)}
</View>
</View>
</View>
)
);
};
this is also my createHandler method of all my textInput
const createHandler = (text, fieldName) => {
console.log(text, fieldName);
setForm((oldValue) => {
return {
...oldValue,
[fieldName]: text,
};
});
};

Related

React Native Custom Drawer Navigation (navigation.closeDrawer())

I'm new to react native i've been trying to create a custom drawer. Inside i wanted to add a button that would close the drawer however i've been getting the error TypeError: undefined is not an object (evaluating 'navigation.closeDrawer') this is my code:
import React, { useState } from "react";
import {DrawerActions} from '#react-navigation/native';
import Logo from '../assets/images/Logo.png'
import {
View,
Text,
Image,
TouchableOpacity,
ScrollView
} from 'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
} from '#react-navigation/drawer';
import { MainLayout } from "../screens";
import {
COLORS,
FONTS,
SIZES,
constants,
icons,
dummyData,
} from '../constants';
import Animated from "react-native-reanimated";
const Drawer = createDrawerNavigator()
const CustomDrawerItem = ({label, icon}) => {
return (
<TouchableOpacity
style={{
flexDirection: 'row',
height: 40,
marginBottom: SIZES.base,
alignItems: 'center',
paddingLeft: SIZES.radius,
borderRadius: SIZES.base
}}
>
<Image
source={icon}
style={{
width: 20,
height: 20,
tintColor: COLORS.primary
}}/>
<Text
style={{
marginLeft: 15,
color: COLORS.primary,
...FONTS.h3
}}
>
{label}
</Text>
</TouchableOpacity>
)
}
const CustomDrawerContent = ({ navigation }) => {
return (
<DrawerContentScrollView
scrollEnbled={true}
contentContainerStyle={{ flex: 1}}
>
<ScrollView
style={{
flex: 1,
paddingHorizontal: SIZES.radius
}}
>
{/* Logo*/}
<TouchableOpacity
style = {{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center',
marginBottom: 20,
}}>
<Image style={{
flex: 1,
width: 80,
height: 80,
resizeMode: 'contain',
marginLeft: -60,
}}
source={Logo}/>
<View
style={{
marginLeft: SIZES.radius
}}
>
<View
style={{
alignItems: 'flex-end',
justifyContent: 'center'
}}
>
<TouchableOpacity
style={{
alignItems: 'center',
justifyContent: 'center',
tintColor: COLORS.black
}}
onPress={() => navigation.closeDrawer()}
>
<Image
source={icons.cross}
style={{
height: 25,
width: 25,
}}
/>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
{/* Profile */}
<TouchableOpacity
style = {{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center'
}}>
<View
style={{
marginLeft: SIZES.radius
}}
>
<CustomDrawerItem
icon={icons.profile}
label={constants.sideBarElements.guest}
/>
<View>
{dummyData.GuestData.map(
(item, index) => (
<Text
style={{
paddingLeft: 20,
paddingTop: 10,
color: COLORS.gray
}}>
{item.name}
</Text>
)
)}
</View>
</View>
</TouchableOpacity>
{/* Line devider
<View
style={{
height: 1,
marginVertical: SIZES.radius,
//marginLeft: SIZES.radius,
backgroundColor: COLORS.lightGray1
}}
/>*/}
{/* Drawer Items */}
<View
style={{
flex: 1,
marginTop: SIZES.padding,
marginLeft: SIZES.radius
}}
>
<CustomDrawerItem
icon={icons.cart}
label={constants.sideBarElements.store}
/>
<View>
{dummyData.storesData.map(
(item, index) => (
<Text
style={{
paddingLeft: 20,
paddingTop: 10,
color: COLORS.gray
}}>
{item.title}
</Text>
)
)}
</View>
</View>
<View
style={{
flex: 1,
marginTop: SIZES.padding,
marginLeft: SIZES.radius,
marginBottom: 50
}}
>
<CustomDrawerItem
icon={icons.cart}
label={constants.sideBarElements.categories}
/>
<View>
{dummyData.carouselData.map(
(item, index) => (
<Text
style={{
paddingLeft: 20,
paddingTop: 10,
color: COLORS.gray
}}>
{item.category}
</Text>
)
)}
</View>
</View>
</ScrollView>
</DrawerContentScrollView>
)
}
const CustomDrawer = () => {
const [progress, setProgress] = useState(new Animated.Value(0))
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8]
})
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 26]
})
const animatedStyles = {borderRadius, transform: [{scale}]}
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.primary
}}
>
<Drawer.Navigator
drawerType='slide'
overlayColor='transparent'
drawerStyle={{
flex: 1,
width: '65%',
paddingRight: 20,
backgroundColor: 'transparent'
}}
sceneContainerStyle={{
backgroundColor: 'transparent'
}}
initialRouteName='MainLayout'
drawerContent={props => {
setTimeout(()=> {
setProgress(props.progress)
}, 0)
return (
<CustomDrawerContent
navigration ={props.navigation}
/>
)
}}
>
<Drawer.Screen name='MainLayout'>
{props => <MainLayout {...props} drawerAnimationStyle={animatedStyles}/>}
</Drawer.Screen>
</Drawer.Navigator>
</View>
)
}
export default CustomDrawer;
i even tried it with dispatch but i get the same error i'm not sure what i'm doing wrong.
Try this
import {useNavigation} from '#react-navigation/native';
const navigation = useNavigation();
navigation.openDrawer();
navigation.closeDrawer();

Remove data/memory for particular week Day of array if data(Time) is empty for that index from double map

I am making Learn Reminder App for that I am mapping a static array of weeks and inside that map i am mapping another array(reminderData) which i am fetching it from database to compare both array and if the weekDay matches with the Parent Map that is weeks array than I am just showing the time. But due to my turnary Operator condition my data is mixed with Set Time and data present in database. How do I optimize my code to show time for that particular week if present in db or show set time instead.
const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
<View style={{ flex: 1, borderWidth: 1, borderRadius: 10, marginTop: "3%", height: "50%" }}>
{
weeks.length > 0 &&
weeks.map((week, index) => (
<View key={index}>
<View style={{ flexDirection: 'row', marginHorizontal: "5%", flexDirection: 'row' }}>
<Text style={{ flex: 1, paddingTop: 13, color: 'black', fontSize: 18, fontWeight: 'bold' }} >{week}</Text>
{
reminderData.map((data, index2) => (
<React.Fragment key={index2}>
{
(data.WeekDay == week) ?
<Pressable onPress={() => updateTimePicker(data, index)}>
<Text onPress={() => updateTimePicker(data, index)} key={index} style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18, }}>{moment(data.Time).format('hh:mm A')}</Text>
</Pressable> :
<Pressable onPress={() => openTimePicker(week, index)}>
<Text onPress={() => openTimePicker(week, index)} key={index} style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18, }}>Set Time</Text>
</Pressable>
}
</React.Fragment>
))
}
</View>
<View
style={{
marginTop: 8,
borderBottomColor: 'black',
borderBottomWidth: StyleSheet.hairlineWidth,
}}
/>
</View>
))
}
</View>
try this:
import React,{useState,useEffect} from 'react';
import moment from 'moment'
import { Text, View, StyleSheet,FlatList,Pressable,Image } from 'react-native';
const WeekComponent = ({ week,reminderData }) => {
const [data,setData]=useState({})
useEffect(()=>{
const foundData=reminderData.find(data=>data.weekDay ===week) //you can use filter if you want to return all data that have weekDay===week
setData(foundData)
},[reminderData,week])
return (
<View>
<View style={{ flexDirection: 'row', marginHorizontal: "5%", flexDirection: 'row' }}>
<Text style={{ flex: 1, paddingTop: 13, color: 'black',
fontSize: 18, fontWeight: 'bold' }} >
{week}
</Text>
{data ? (
<Pressable onPress={() => updateTimePicker(data)}>
<Text onPress={() => updateTimePicker(data)}
style={{ justifyContent: 'flex-end', paddingTop: 13,
color: 'black', fontSize: 18, }}>
{moment(data?.Time).format('hh:mm A')}
</Text>
</Pressable>
):(
<Pressable onPress={() => openTimePicker(week)}>
<Text onPress={() => openTimePicker(week)}
style={{ justifyContent: 'flex-end', paddingTop: 13,
color: 'black', fontSize: 18, }}>
Set Time
</Text>
</Pressable>
)}
</View>
</View>
);
};
export default function App() {
const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"];
const reminderData=[{weekDay:'',time:''},{weekDay:'',time:''},{weekDay:'',time:''}]
return (
<View >
<FlatList
data={weeks}
renderItem={({ item }) => <WeekComponent week={item} reminderData={reminderData}/> }
// keyExtractor={(item) => item.id}
/>
</View>
);
}

how can I animate show item inside a card in react native

I want the card to expand and shrink with duration
const renderNote = (item) => {
if (item.id === noteId) {
if (item.note) {
return (
<View>
<Title style={{ alignSelf: "center", paddingVertical: 10, color: colors.primary,fontSize:17 }}>Your Note</Title>
<Text style={{ paddingLeft: 10 ,backgroundColor:colors.background,paddingVertical:10,borderRadius:5}}>{item.note}</Text>
</View>
);
}
return (
<View>
<Title style={{ alignSelf: "center", paddingVertical: 10, color: colors.primary ,fontSize:17}}>Your Note</Title>
<Text style={{ paddingLeft: 10 ,backgroundColor:colors.background,paddingVertical:10,borderRadius:5}}>There is no note</Text>
</View>
);
}
};
return (
<View style={{ marginTop: 20 }}>
<Title style={{ alignSelf: "center" }}>{AppointmentTitle}</Title>
<ScrollView style={{ minHeight: 100 }}>
{Appointment.slice(0, 2).map((item) => {
return (
<View key={item.id}>
{item ? (
<TouchableWithoutFeedback
onPress={() => {
noteId === item.id ?
setNoteId(null):
setNoteId(item.id)
}}
>
<Card style={[{ margin: 10, borderRadius: 10 }, styles.shadow]}>
<Card.Content>
<Text style={{ fontSize: 16 }}>
You have an appontment with <Text style={{ color: colors.primary }}>{item.patinetName}</Text>
</Text>
{isTime ? renderFutureTime(item.dateTime) : renderTime(item.dateTime)}
{renderNote(item)}
when renderNote the card expand how to animation on this code
........................................................................................................

how to update state according to id?

I have a touchableopacity on each card where I want to setstate of expand to true, but I want to do it according to the id, so that state of only one changes, any idea how to do it using map()?
My code:
import React, {useState, useEffect} from 'react';
import {
SafeAreaView,
Text,
Image,
ScrollView,
TouchableOpacity,
View,
} from 'react-native';
import axios from 'axios';
import {ROOT} from '../../../../ApiUrl';
import Icon from 'react-native-vector-icons/FontAwesome';
export default function VaccinationListScreen(props) {
const [expand, setExpand] = useState(false);
const [data, setData] = useState('');
let id = props.route.params.id;
const getData = () => {
let url = `some url`;
console.log('bbb');
axios
.get(url)
.then(function (res) {
console.log(res.data.content);
setData(res.data.content);
})
.catch(function (err) {
console.log(err);
});
};
useEffect(() => {
getData();
}, []);
return (
<SafeAreaView>
<ScrollView>
<TouchableOpacity style={{padding: 10}} onPress={()=>setExpand(true)}>
{data != undefined &&
data != null &&
data.map((item) => {
return (
<View
style={{
padding: 10,
backgroundColor: '#fff',
elevation: 3,
margin: '2%',
borderRadius: 5,
}}
key={item.id}>
<View style={{alignItems: 'flex-end'}}>
<Text style={{color: 'grey', fontSize: 12}}>
{item.display_date}
</Text>
</View>
<View style={{flexDirection: 'row'}}>
<View>
<Image
source={require('../../assets/atbirth.jpg')}
style={{height: 40, width: 50}}
resizeMode="contain"
/>
</View>
<View style={{flex: 1}}>
<View style={{flexDirection: 'row', flex: 1}}>
<Text
key={item.id}
style={{
fontFamily: 'Roboto',
fontSize: 18,
fontWeight: 'bold',
}}>
{item.name}
</Text>
</View>
<View style={{flexDirection: 'row', width: '30%'}}>
{item.vaccine_list.map((i) => {
return (
<View style={{flexDirection: 'row'}}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{fontFamily: 'Roboto', fontSize: 15}}>
{i.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
<View style={{alignItems: 'flex-end', marginTop: '1%'}}>
<View style={{flexDirection: 'row'}}>
<Text
style={{
color: 'red',
fontSize: 14,
fontWeight: 'bold',
}}>
{item.child_vacc_status.text}
</Text>
<Icon
name="chevron-up"
color="red"
size={12}
style={{marginTop: '1%', marginLeft: '1%'}}
/>
</View>
</View>
</View>
);
})}
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
Any suggestions would be great, do let mw know if anything else is required for better understanding
As i review your code <TouchableOpacity> wraps all of your cards at once not on each card set. If you implement your code that way if it's not impossible it will be difficult for you to reference each cards id and set the state of expand to true according to cards id.
My suggestion is to include <TouchableOpacity> to map() function nest so that it will be easy to reference each cards function.
I reproduce this specific problem and implement a solution in which I was able to set the state of expand to true according to each cards id.
You may click the sandbox link to see a demonstration.
https://codesandbox.io/s/accordingtoid-4px1w
Code in Sandbox:
import React, { useState, useEffect } from "react";
import {
SafeAreaView,
Text,
Image,
TouchableOpacity,
View
} from "react-native";
// import axios from 'axios';
// import {ROOT} from '../../../../ApiUrl';
// import Icon from "react-native-vector-icons/FontAwesome";
export default function VaccinationListScreen(props) {
const [expand, setExpand] = useState({});
const [data, setData] = useState([]);
// let id = props.route.params.id;
// const getData = () => {
// let url = `some url`;
// console.log('bbb');
// axios
// .get(url)
// .then(function (res) {
// console.log(res.data.content);
// setData(res.data.content);
// })
// .catch(function (err) {
// console.log(err);
// });
// };
// useEffect(() => {
// getData();
// }, []);
useEffect(() => {
// In order to simulate and reproduce the problem
// Assume that these are the data that you fetch from an API
const dataContent = [
{
id: 1,
name: "At Birth",
display_date: "02 May - 08 May 16",
vaccine_list: [
{ name: "BCG" },
{ name: "Hepatitis B" },
{ name: "OPV 0" }
],
child_vacc_status: { text: "Missed" }
},
{
id: 2,
name: "At 6 Weeks",
display_date: "02 May - 08 May 16",
vaccine_list: [
{ name: "IPV" },
{ name: "PCV" },
{ name: "Hepatitis b" },
{ name: "DTP" },
{ name: "HiB" },
{ name: "Rotavirus" }
],
child_vacc_status: { text: "Missed" }
}
];
setData(dataContent);
}, []);
function handleOnPress(id) {
setExpand((prev) => {
let toggleId;
if (prev[id]) {
toggleId = { [id]: false };
} else {
toggleId = { [id]: true };
}
return { ...toggleId };
});
}
useEffect(() => {
console.log(expand); // check console to see the value
}, [expand]);
return (
<SafeAreaView>
{data !== undefined &&
data !== null &&
data.map((item) => {
return (
<TouchableOpacity
key={item.id}
style={{
padding: 10
}}
onPress={() => handleOnPress(item.id)}
>
<View
style={{
padding: 10,
backgroundColor: expand[item.id] ? "lightgrey" : "#fff",
elevation: 3,
margin: "2%",
borderRadius: 5
}}
>
<View style={{ alignItems: "flex-end" }}>
<Text style={{ color: "grey", fontSize: 12 }}>
{item.display_date}
</Text>
</View>
<View style={{ flexDirection: "row" }}>
<View>
<Image
// source={require('../../assets/atbirth.jpg')}
style={{ height: 40, width: 50 }}
resizeMode="contain"
/>
</View>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", flex: 1 }}>
<Text
key={item.id}
style={{
fontFamily: "Roboto",
fontSize: 18,
fontWeight: "bold"
}}
>
{item.name}
</Text>
</View>
<View style={{ flexDirection: "row", width: "30%" }}>
{item.vaccine_list.map((item, i) => {
return (
<View key={i} style={{ flexDirection: "row" }}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{ fontFamily: "Roboto", fontSize: 15 }}
>
{item.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
<View style={{ alignItems: "flex-end", marginTop: "1%" }}>
<View style={{ flexDirection: "row" }}>
<Text
style={{
color: "red",
fontSize: 14,
fontWeight: "bold"
}}
>
{item.child_vacc_status.text}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
})}
</SafeAreaView>
);
}
I haven't tested the code to work correctly, but you could try something similar. You could create a separate component for the items and set a status for each of them.
export default function VaccinationListScreen(props) {
const [expand, setExpand] = useState(false);
const [data, setData] = useState("");
const VaccinationListItem = (item) => {
const [expand, setExpand] = useState(false);
return (
<TouchableOpacity style={{ padding: 10 }} onPress={() => setExpand(true)}>
<View
style={{
padding: 10,
backgroundColor: "#fff",
elevation: 3,
margin: "2%",
borderRadius: 5,
}}
key={item.id}
>
<View style={{ alignItems: "flex-end" }}>
<Text style={{ color: "grey", fontSize: 12 }}>
{item.display_date}
</Text>
</View>
<View style={{ flexDirection: "row" }}>
<View>
<Image
source={require("../../assets/atbirth.jpg")}
style={{ height: 40, width: 50 }}
resizeMode="contain"
/>
</View>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", flex: 1 }}>
<Text
key={item.id}
style={{
fontFamily: "Roboto",
fontSize: 18,
fontWeight: "bold",
}}
>
{item.name}
</Text>
</View>
<View style={{ flexDirection: "row", width: "30%" }}>
{item.vaccine_list.map((i) => {
return (
<View style={{ flexDirection: "row" }}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{ fontFamily: "Roboto", fontSize: 15 }}
>
{i.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
<View style={{ alignItems: "flex-end", marginTop: "1%" }}>
<View style={{ flexDirection: "row" }}>
<Text
style={{
color: "red",
fontSize: 14,
fontWeight: "bold",
}}
>
{item.child_vacc_status.text}
</Text>
<Icon
name="chevron-up"
color="red"
size={12}
style={{ marginTop: "1%", marginLeft: "1%" }}
/>
</View>
</View>
</View>
</TouchableOpacity>
);
};
return (
<SafeAreaView>
<ScrollView>
{data != undefined &&
data != null &&
data.map((item) => {
VaccinationListItem(item);
})}
</ScrollView>
</SafeAreaView>
);
}
Generally if you want to toggle any single element you should store its id in expand (instead of a boolean), and simply check when rendering the array if any specific element's id matches, i.e. element.id === expand. When any new element is touched, pop its id in there, if the id is already there, set to null to collapse.
export default function VaccinationListScreen(props) {
const [expandId, setExpandId] = useState(null); // <-- stores null or id, initially null
...
// Create curried handler to set/toggle expand id
const expandHandler = (id) => () =>
setExpandId((oldId) => (oldId === id ? null : id));
return (
<SafeAreaView>
<ScrollView>
{data &&
data.map((item) => {
return (
<View
...
key={item.id}
>
<TouchableOpacity
style={{ padding: 10 }}
onPress={expandHandler(item.id)} // <-- attach callback and pass id
>
...
</TouchableOpacity>
{item.id === expandId && ( // <-- check if id match expand id
<ExpandComponent />
)}
</View>
);
})}
</ScrollView>
</SafeAreaView>
);
}

Display a Modal on a holding modal on react native

I was trying to display a modal on another model its visibility always set to true. I tried multiple ways but still I am unable to show that modal. I am printing here the code to make it a sense:
function Search({navigation}) {
const [number, setNumber] = useState('');
const [visible, setvisible] = useState(false);
return (
<View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.5)'}}>
<Modal
visible={true}
transparent={true}
style={{
elevation: 24,
borderRadius: 24,
marginTop: 60,
backgroundColor: '#fafcff',
}}>
<View
style={{
margin: 50,
padding: 10,
borderRadius: 35,
height: 40,
flexDirection: 'column',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.58,
shadowRadius: 16.0,
elevation: 24,
}}>
<TextInput
label="Enter a phone number"
value={textInput}
keyboardType="numeric"
maxLength={12}
mode="outlined"
dense={true}
// ref={textInput.current.clear()}
theme={{
colors: {
primary: '#00aaff',
},
}}
onChangeText={(text) => {
setNumber(text);
}}
/>
<Button
mode="contained"
theme={{
colors: {
primary: '#006aff',
},
}}
style={{
margin: 70,
marginTop: 10,
padding: 2,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6.27,
justifyContent: 'center',
elevation: 18,
borderRadius: 18,
textAlign: 'center',
}}
onPress={() => {
if (number === '') {
<Modal visible={!visible} transparent={true} animationType={'fade'}>
<View style={styles.mainOuterComponent}>
<View style={styles.mainContainer}>
{/* First ROw - Alert Icon and Title */}
<View style={styles.topPart}>
{true && (
<Image
source={require('../images/ic_notification.png')}
resizeMode={'contain'}
style={styles.alertIconStyle}
/>
)}
<Text style={styles.alertTitleTextStyle}>
{/* {`${alertTitleText}`} */} Here worked
</Text>
</View>
{/* Second Row - Alert Message Text */}
<View style={styles.middlePart}>
<Text style={styles.alertMessageTextStyle}>
{/* {`${alertMessageText}`} */} EMpty value
</Text>
</View>
{/* Third Row - Positive and Negative Button */}
<View style={styles.bottomPart}>
{true && (
<TouchableOpacity
// onPress={this.onPositiveButtonPress}
style={styles.alertMessageButtonStyle}>
<Text style={styles.alertMessageButtonTextStyle}>
{/* {positiveButtonText} */} Okay
</Text>
</TouchableOpacity>
)}
</View>
</View>
</View>
</Modal>
} else {
console.log('Do Nothing!');
}
}}>
<Text
style={{
fontSize: 25,
color: 'white',
textAlign: 'center',
}}>
{' '}
<MaterialCommunityIcons
name="database-search"
size={40}
color="yellow"
style={{
paddingRight: 5,
alignItems: 'center',
margin: 5,
}}></MaterialCommunityIcons>
Search
</Text>
</Button>
</Modal>
</View>
)
}
expected that when user clicks "search" while the input is empty, a modal showing empty value entered. I got nothing, no error. How can I solve this?
Make two components, then render it based on conditions inside one modal, I used this way for many components.
const ModalContent = ({toggleModal}) => {
const [defaultContent, setDefaultContent] = useState(true);
const conditionalRendering = ()=> {
if(defaultContent === true) return (
<View>
<TouchableOpacity onPress={()=> setDefaultContent(false)}>
<Text>First Content</Text>
</TouchableOpacity>
</View>
);
return (
<View>
<TouchableOpacity onPress={()=> setDefaultContent(true)}>
<Text>Second Content</Text>
</TouchableOpacity>
</View>
);
}
return (
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
{conditionalRendering()}
</View>
);
}
<Modal
useNativeDriver
onBackButtonPress={toggleModal}
isVisible={modalVisible}
style={{ padding: 0, margin: 0, justifyContent: 'center' }}
>
<ModalContent toggleModal={toggleModal} />
</Modal>

Resources