I don't know why my card is not full width by using the FlatList
My current:
What I wish card should be full width
and here is my code
return (
<View style={styles.container}>
<View>
<Text style={{fontWeight: 'bold', fontSize: 20}}>Cateogories:</Text>
<FlatGrid
itemDimension={90}
items={items}
style={styles.gridView}
renderItem={({item, index}) => (
<TouchableOpacity>
<View
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Image style={styles.iconSize} source={item.picture} />
</View>
</TouchableOpacity>
)}
/>
</View>
<FlatList
data={DATA}
showsHorizontalScrollIndicator={false}
horizontal={false}
keyExtractor={item => item.id}
renderItem={({item}) => {
return (
<List>
<ListItem noBorder style={{flex: 1}}>
<View style={{flex: 1}}>
<Card style={{flex: 1}}>
<CardItem style={{flex: 1}}>
<Left>
<Thumbnail
source={{
uri:
'https://www.foodbusinessafrica.com/wp-content/uploads/2019/04/milled-rice.jpg',
}}
/>
<Body>
<Text>NativeBase</Text>
<Text note>GeekyAnts</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
source={{
uri:
'https://www.foodbusinessafrica.com/wp-content/uploads/2019/04/milled-rice.jpg',
}}
style={{height: 200, width: null, flex: 1}}
/>
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>12 Likes</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>4 Comments</Text>
</Button>
</Body>
<Right>
<Text>11h ago</Text>
</Right>
</CardItem>
</Card>
</View>
</ListItem>
</List>
);
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
alignSelf: 'flex-end',
color: '#638A37',
fontSize: 15,
},
rowItem: {
flexDirection: 'row',
},
itemContainer: {
borderRadius: 10,
padding: 10,
height: 128,
borderWidth: 1,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: {width: 0, height: 5},
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 10,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
},
itemName: {
// color: '#5E782F',
fontSize: 22,
},
iconSize: {
alignSelf: 'flex-end',
marginTop: 27,
paddingLeft: 20,
width: 56,
height: 56,
},
});
Full-width card view util:
import 'react-native-gesture-handler';
import React from 'react';
import {Dimensions} from 'react-native';
import {Card} from 'react-native-elements';
const FullWidthCard = ({
gap = {horizontal: 0},
borderRadius = {topLeft: 0, topRight: 0},
children,
}) => {
return (
<Card
containerStyle={{
width: Dimensions.get('window').width - gap.horizontal,
borderTopLeftRadius: borderRadius.topLeft,
borderTopRightRadius: borderRadius.topRight,
children,
}}>
{children}
</Card>
);
};
export {FullWidthCard};
from UI component:
<FullWidthCard
gap={{horizontal: 0}}
borderRadius={{topLeft: 50, topRight: 50}}>
<ProfileContent navigation={navigation}></ProfileContent>
</FullWidthCard>
Related
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();
Lessonlist in the app component displays a list of lessons, if there are a lot of them, scrolling works but does not show all the elements. That is, some element remains at the bottom and is only half visible. When the height of the lessonlist changes, the height of the dataslider component also changes.
App
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View style={styles.today}>
<Moment element={Text} style={styles.today_day} format='D'></Moment>
<View style={styles.today_column}>
<Moment element={Text} style={styles.today_day_week} format='dddd'></Moment>
<Moment element={Text} style={styles.today_month_year} format='MMMM YYYY'></Moment>
</View>
</View>
<View>
<DateSlider data={Lessons} index={index} setIndex={setIndex} />
<LessonList data={Lessons} index={index} setIndex={setIndex} />
</View>
</View>
);
LessonList
import React from 'react';
import { StyleSheet, Text, View, FlatList, Dimensions, ScrollView } from 'react-native'
import AntDesign from '#expo/vector-icons/AntDesign';
const { width, height } = Dimensions.get('screen');
const LessonList = ({ data, index, setIndex }) => {
const lessonsRef = React.useRef<FlatList>();
React.useEffect(() => {
lessonsRef.current?.scrollToOffset({
offset: index * width,
animated: true,
});
}, [index]);
return (
<FlatList
ref={lessonsRef}
initialNumToRender={1}
initialScrollIndex={index}
data={data.days}
maxToRenderPerBatch={3}
keyExtractor={(item) => item.date}
getItemLayout={(data, index) => ({
length: width,
offset: width * index,
index,
})}
onMomentumScrollEnd={(ev) => {
setIndex(Math.floor(Math.floor(ev.nativeEvent.contentOffset.x) / Math.floor(width)));
}}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => {
return (
<FlatList
data={item.lessons}
keyExtractor={(item) => item.id}
showsVerticalScrollIndicator={false}
scrollEnabled={true}
style={styles.lessons_scrollview}
renderItem={({ item }) => {
return (
<View style={styles.lessons}>
<View style={styles.lesson_time}>
<Text style={styles.lesson_time_list_text}>
{item.starttime}
</Text>
<Text style={styles.lesson_time_end_list_text}>
{item.endtime}
</Text>
</View>
<View style={styles.lesson_card}>
<Text style={styles.lesson_card_name}>{item.name}</Text>
<Text style={styles.lesson_card_description}>
{item.description}
</Text>
<Text style={styles.lesson_card_locate}>
<AntDesign name="enviromento" size={16} color="white" />
{item.location}
</Text>
<Text style={styles.lesson_card_teacher}>
<AntDesign name="user" size={16} color="white" />
{item.teacher}
</Text>
</View>
</View>
);
}}
/>
);
}}
/>
);
};
const styles = StyleSheet.create({
lessons_scrollview: {
paddingHorizontal: 15,
paddingTop: 5,
width: width,
},
lessons: {
flexDirection: "row",
},
lesson_time_text: {
fontFamily: "eUkraineBold",
fontSize: 9,
paddingRight: 30,
color: "#BCC1CD",
},
lesson_time: {
flexDirection: "column",
paddingRight: 9,
borderRightWidth: 1,
borderRightColor: "#FAF9F9",
},
lessons_text: {
fontFamily: "eUkraineBold",
fontSize: 9,
color: "#BCC1CD",
},
lesson_time_list: {
flexDirection: "column",
paddingTop: 14,
},
lesson_time_list_text: {
fontFamily: "eUkraineMedium",
fontSize: 14,
},
lesson_time_end_list_text: {
fontFamily: "eUkraineMedium",
fontSize: 14,
color: "#BCC1CD",
},
lesson_card: {
flexDirection: "column",
marginLeft: 16,
backgroundColor: "#4DC591",
borderRadius: 16,
paddingTop: 16,
paddingLeft: 16,
paddingBottom: 17,
flex: 1,
marginBottom: 16,
},
lesson_card_name: {
fontFamily: "eUkraineBold",
fontSize: 13,
color: "#ffff",
},
lesson_card_description: {
fontFamily: "eUkraineMedium",
fontSize: 10,
paddingTop: 4,
color: "#ffff",
},
lesson_card_locate_img: {
height: 16,
width: 16,
marginRight: 50,
tintColor: "#FFFFFF",
},
lesson_card_locate: {
fontFamily: "eUkraineRegular",
fontSize: 10,
paddingTop: 15,
color: "#ffff",
},
lesson_card_teacher: {
fontFamily: "eUkraineRegular",
fontSize: 10,
paddingTop: 3,
color: "#ffff",
},
});
export default LessonList
I have a map() data each of which has touchableopacity that should set the state of modal visible to true, but am unable to do it.
Could anyone let me know a way to set the state according to id?
ParentComponent:
export default function ExpandedVaccineComponent(props) {
const {navigation} = props;
const [note, setNote] = useState({});
const [addNoteText, setAddNoteText] = useState('');
const [modalVisible, setModalVisible] = useState(false);
const [selectedItem,setSelectedItem]=useState(null);
const [demo, setDemo] = useState(false);
let id = props.id;
return (
<View
style={{
backgroundColor: '#fff',
elevation: 3,
margin: '2%',
borderRadius: 5,
}}>
<View style={{marginTop: '2%'}}>
{props.item.vaccine_list.map((i) => {
return (
<View style={{flex: 1}}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => setModalVisible(true)}>
<Icon name="calendar" size={15} />
</TouchableOpacity>
<View>
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
}}>
<CalenderModal
item={props.item}
modalVisible={modalVisible}
item={i}
id={id}
/>
<View
style={{
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
width: '72%',
}}>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderRightColor: '#C0C0C0',
borderRightWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => setModalVisible(!modalVisible)}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#2D7AFA',
}}>
Cancel
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderLeftColor: '#C0C0C0',
borderLeftWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#2D7AFA',
}}>
Save
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View style={{marginLeft: '10%', width: '30%'}}>
<View>
<View style={{flexDirection: 'row'}}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 14,
color: '#000',
}}>
{i.name}
</Text>
<Text
style={{
fontFamily: 'Roboto',
color: '#000',
opacity: 0.5,
}}>
(Dose{i.dose}/3)
</Text>
</View>
<Text
numberOfLines={2}
ellipsizeMode="tail"
style={{
fontFamily: 'Roboto',
fontSize: 14,
lineHeight: 14,
color: '#000',
opacity: 0.5,
}}>
{i.protects_against}
</Text>
</View>
</View>
<View style={{marginLeft: '30%'}}>
<Text>{i.child_vacc_status.text}</Text>
<Text>16 Aug,2020</Text>
</View>
</View>
</View>
);
})}
</View>
</View>
);
}
CalenderModal component:
import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import DatePicker from 'react-native-datepicker';
import axios from 'axios';
import {ROOT} from '../../../ApiUrl';
export default function CalenderModal(props) {
const [date, setDate] = useState('2016-05-15');
const [vaccinatedOn, setVaccinatedOn] = useState(null);
const [reminder, setReminder] = useState(1);
const [toggle, setToggle] = useState(null);
const [modalVisible, setModalVisible] = useState(null);
const reminderSet = () => {
setReminder(6);
setToggle(6);
};
const vaccinationSet = () => {
setVaccinatedOn(1);
setToggle(1);
};
const data = props.item;
const id = props.id;
const SaveData = () => {
let url = `some url`;
axios({
method: 'POST',
url: url,
data: {
child_id: id,
event_date: date,
status: toggle,
vaccine_id: data.id,
},
headers: {
'content-type': 'application/json',
},
})
.then(function (res) {
console.log('RES', res);
if (res.data.code == 200) {
navigation.navigate('consultationHome', {res: res});
}
})
.catch(function (err) {
console.log('ERR', err);
});
};
return (
<View>
<View style={styles.modalView}>
<Text>{props.item.name}</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '5%',
}}>
{reminder == 6 && toggle == 6 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Icon
name="circle"
size={17}
color="pink"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Set reminder
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => reminderSet()}>
<Icon
name="circle-o"
size={17}
color="#000"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Set reminder
</Text>
</TouchableOpacity>
)}
{vaccinatedOn == 1 && toggle == 1 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Icon
name="circle"
size={17}
color="pink"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => vaccinationSet()}>
<Icon
name="circle-o"
size={17}
color="#000"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
)}
</View>
<DatePicker
style={{width: 200, marginTop: '5%'}}
date={date}
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0,
},
dateInput: {
marginLeft: 36,
},
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {
setDate(date);
}}
/>
{console.log('DATE', date)}
</View>
</View>
);
}
const styles = StyleSheet.create({
modalView: {
backgroundColor: 'white',
padding: 20,
},
});
Any suggestion would be great, please let me know if anything else is required for better understanding.
you might want to try setting up your onPress similar to the RN documentation for TouchableOpacity (https://reactnative.dev/docs/touchableopacity.html you also may want to consider switching to Pressable for future proofing purposes). You can do
const onPress = () => setModalVisible(true);
<TouchableOpacity onPress={onPress}>
Hi, I am using react-native-image-crop-picker to overcome the above-shown module to select images from the gallery and display it in react native app, but I also want to click on add photo and again select images from the gallery and append them to the previous array of photos, am unable to figure that out.
This is the exact code that I have written to achieve the above-shown behavior, what should I change or add to perform the append feature?
import React, {useEffect, useState} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Image,
TouchableOpacity,
Dimensions,
FlatList,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-crop-picker';
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const App = () => {
const [photos, setAddPhotos] = useState(null);
const [photo, setAddphoto] = useState(null);
const handleChoosePhoto = () => {
ImagePicker.openPicker({
multiple: true,
waitAnimationEnd: false,
includeExif: true,
forceJpg: true,
})
.then((images) => {
setAddphoto(null);
setAddPhotos(
images.map((i) => {
console.log('recieved image', i);
return {
uri: i.path,
// width: i.width,
// height: i.height,
width: 185,
height: 128,
mime: i.mime,
};
}),
);
})
.catch((e) => alert(e));
};
const renderImage = (image) => {
return (
<Image
style={{
width: 185,
height: 128,
resizeMode: 'contain',
marginTop: 1,
}}
source={image}
/>
);
};
const renderAsset = (image) => {
return renderImage(image);
};
return (
<View style={{flex: 1}}>
{console.log('PHOTOS', photos)}
{photos === null ? (
<View style={{flex: 1}}>
<View style={Styles.headerWrapper}>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Icon name="angle-left" size={30} />
<TouchableOpacity style={{right: '10%', top: '2%'}}>
<Text style={{fontSize: 15, fontWeight: 'bold'}}>
SAVE AND EXIT
</Text>
</TouchableOpacity>
</View>
</View>
<ScrollView>
<Text style={Styles.headerText}>Add photos to your listing</Text>
<Text style={Styles.subHeader}>
Photos help guests imagine staying in your place. You can start
with one and add more after you publish.
</Text>
<View style={Styles.container}>
<TouchableOpacity onPress={() => handleChoosePhoto()}>
<View
style={{
backgroundColor: '#20B2AA',
width: 150,
height: 40,
borderRadius: 5,
justifyContent: 'center',
}}>
<Text
style={{
color: '#fff',
textAlign: 'center',
fontSize: 15,
fontWeight: 'bold',
}}>
Add photos
</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
<TouchableOpacity
style={{
alignSelf: 'flex-end',
right: '5%',
position: 'absolute',
bottom: 10,
}}>
<View
style={{
borderColor: '#20B2AA',
borderWidth: 1,
alignSelf: 'flex-end',
padding: 10,
}}>
<Text
style={{fontSize: 15, fontWeight: 'bold', color: '#20B2AA'}}>
Skip For Now
</Text>
</View>
</TouchableOpacity>
</View>
) : (
<>
<View style={{flex: 1}}>
<View style={Styles.headerWrapper}>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Icon name="angle-left" size={30} />
<TouchableOpacity style={{right: '10%', top: '2%'}}>
<Text style={{fontSize: 15, fontWeight: 'bold'}}>
SAVE AND EXIT
</Text>
</TouchableOpacity>
</View>
</View>
<ScrollView>
<View style={{flex: 1, flexWrap: 'wrap', flexDirection: 'row'}}>
{photos
? photos.map((i) => (
<View
style={{
// width: 185, height: 128,
// width:'50%',
flexBasis: '33.33%',
}}
key={i.uri}>
{renderAsset(i)}
</View>
))
: null}
</View>
</ScrollView>
<TouchableOpacity
style={{
alignSelf: 'flex-end',
right: '5%',
position: 'absolute',
bottom: 10,
}}>
<View
style={{
backgroundColor: '#20B2AA',
alignSelf: 'flex-end',
padding: 10,
}}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#FFF'}}>
NEXT
</Text>
</View>
</TouchableOpacity>
</View>
</>
)}
</View>
);
};
export default App;
const Styles = StyleSheet.create({
headerWrapper: {
width: deviceWidth,
paddingLeft: 24,
paddingTop: 10,
paddingBottom: 10,
},
headerText: {
fontWeight: 'bold',
fontSize: 28,
paddingLeft: 24,
},
container: {
padding: 24,
},
subHeader: {
paddingLeft: 24,
fontSize: 17,
paddingTop: 24,
paddingRight: 24,
},
});
Please let me know if anything else is required for better understanding, thank you.
You only need to take the prevState in setAddPhotos
setAddPhotos((lastPhotos) => {
const imagesMap = images.map((i) => {
return {
uri: i.path,
width: i.width,
height: i.height,
mime: i.mime,
};
});
return [...lastPhotos, ...imagesMap];
});
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>