Is there any way to make Modal appear from left to right?
Right now I have this and its only sliding from bottom to top:
<Modal animationType={'slide'} visible={showModal}>
<View
style={{
backgroundColor: 'blue',
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
}}>
<TouchableOpacity onPress={() => setShowModal(false)}>
<Feather name="menu" size={40} color="red" />
</TouchableOpacity>
</View>
</Modal>
You can use npm i react-native-modal to get your desired result.
<Modal
animationIn="slideInLeft"
animationOut="slideOutRight"
animationInTiming={500}
animationOutTiming={750}
isVisible={showModal}
useNativeDriver={true}
onBackButtonPress={() => {
setShowModal(!showModal);
}}>
<View
style={{
backgroundColor: 'blue',
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
}}>
<TouchableOpacity onPress={() => setShowModal(false)}>
<Feather name="menu" size={40} color="red" />
</TouchableOpacity>
</View>
</Modal>
Related
i have implemented react-native-maps inside carousel view to show floor plans of a 2-floor building, and everything is working fine.
Now when i try to call a function to re-centre the floor-plan image, first slide is not getting responsive to the function whereas the second slide works fine and as expected.
if(Platform.OS === 'ios'){
console.log("mapview" ,mapView);
return (
<View style={styles.container} key={index}>
<MapView
style={{
height:Dimensions.get('window').height,
width:Dimensions.get('window').width
}}
ref={mapView}
provider={PROVIDER_GOOGLE}
mapType= "none"
minZoomLevel = {16}
maxZoomLevel = {18}
initialRegion={{
latitude:mapcenterlat,
latitudeDelta: 0.009,
longitude:mapcenterlng,
longitudeDelta:0.0315,
}}>
<Overlay
bounds={[
[coord_topleft_lat, coord_topleft_lng],
[coord_bottomright_lat, coord_bottomright_lng]
]}
image= {item.floorplan_image}
/>
{item.locations.map((polygon,index) =>
(<MapView.Polygon
key={polygon.index}
coordinates={polygon.coordinates}
fillColor={polygon.fillcolor}
fillOpacity={2}
strokeColor={polygon.strokecolor}
tappable = {true}
strokeOpacity= {1}
strokeWeight={1}
onPress={() => createBooking(polygon.id,polygon.name,polygon.is_reserved,polygon.assets)}
/>),
)}
</MapView>
<View style={{position: 'absolute',flexDirection:'row',padding:70,marginVertical:-50}}>
<Text style={{fontWeight: 'bold', fontSize: 20}}>
{item.floor_name}
</Text>
<Pagination
dotsLength={floorlist.length}
activeDotIndex={activeSlide}
carouselRef={isCarousel}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 0,
backgroundColor: 'rgba(0, 0, 0, 0.92)'
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
tappableDots={true}
activeOpacity= {1}
/>
</View>
<View style={{position: 'absolute',flexDirection:'column',top:hp('33%'),marginHorizontal:10}}>
<TouchableOpacity onPress={() => _carousel.snapToPrev()}><AntDesign name="left" size={24} color="black" /></TouchableOpacity>
<TouchableOpacity onPress={() => _carousel.snapToNext()}><AntDesign name="right" size={24} color="black" /></TouchableOpacity>
)
}
hello I am new to react native I am facing an abnormal behavior on navigation which happens between two modal screens first modal screen as shown in the picture on navigate it goes into next screen works fine
here is second modal picture on navigate
problem comes when I press on div upload cnic picture front and back then screens getting merged both are different component , previous screen modal appear as you seen in photo I marked in the screen with two modal screens
here is my CNIC upload screen code
<TouchableWithoutFeedback
onPress={() => {
displayModal(!modalVisible);
}}>
<View style={styles.container}>
<Modal
onBackdropPress={() => setModalVisible(false)}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['down']}
useNativeDriverForBackdrop
style={{margin: 0}}
isVisible={modalVisible}>
<View
style={{
flex: 1,
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
marginTop:
steper === 'step' ? deviceHeight * 0.1 : deviceHeight * 0.2,
backgroundColor: 'white',
alignItems: 'center',
}}>
<View
style={{
width: '100%',
height: '100%',
// alignItems: 'center',
marginTop: 3,
justifyContent: 'space-evenly',
}}>
<View style={{width: '100%', alignItems: 'center'}}>
<PopupBorder />
</View>
{/* first half */}
<View
style={{
width: '100%',
alignItems: 'center',
height: '18%',
justifyContent: 'flex-end',
}}>
<View style={styles.subContainer}>
<Image
style={{width: '40%', height: '50%', resizeMode: 'contain'}}
source={require('../assests/finger-print.png')}
/>
<Text style={{fontSize: 18}}>Verify your account </Text>
<SubTitle
amount
color="#636363"
title="We require CNIC and Selfie for the verification"
/>
</View>
</View>
{/* steper */}
<View
style={{
height: '10%',
justifyContent: 'center',
}}>
<DocumentSteper step={steper} />
</View>
{/* steper */}
{/* second half */}
<View
style={{
width: '100%',
height: '70%',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={styles.subContainer}>
<TouchableOpacity
style={{
width: '100%',
height: '80%',
alignItems: 'center',
}}>
{steper === 'step' ? (
<>
<TouchableOpacity
activeOpacity={0.6}
onPress={takeFrontPhotoFromCamera}
style={styles.imageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={
frontImage === null ? null : {uri: frontImage}
}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
onPress={takeBackFrontPhotoFromCamera}
style={styles.imageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={
backImage === null ? null : {uri: backImage}
}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
</>
) : (
<TouchableOpacity
onPress={takeSelfie}
style={styles.singleimageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={selfie === null ? null : {uri: selfie}}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
)}
</TouchableOpacity>
<View
style={{
width: '100%',
height: '20%',
justifyContent: 'flex-end',
}}>
<Button
click={verify}
title={
steper === 'step' ? ' Verify CNIC' : 'Verify SELFIE'
}
backgroundColor="white"
marginBottom={15}
color="#06B2BC"
/>
</View>
</View>
</View>
</View>
</View>
</Modal>
<TouchableWithoutFeedback onPress={() => !modalVisible}>
<TouchableOpacity style={styles.map}>
<Image source={require('../assests/map.png')} />
</TouchableOpacity>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
We can't see from your code sample where you are calling the second step "upload cnic picture". It seems that you are calling another modal on top of the first one.
If you have planned to have a full process within this modal, it is probably best to integrate a proper navigator rather than "navigate" between modals.
ListHeaderComponent inside flatlist doesn't work. It won't render nothing in header (above flatlist). If I however put some custom component it does work but it doesn't with my renderHeader function. I tried making a custom component with the same view as in renderHeader but when I used that nothing rendered so I don't know
My flatlist along with whole render:
render() {
const { height } = Dimensions.get("window");
return (
<View style={{flex: 1,
backgroundColor: "#EBECF4"}}>
{/* <Text>
Connection Status :{" "}
{this.state.connection_status ? "Connected" : "Disconnected"}
</Text> */}
{/* <Loader loading={this.state.loading} /> */}
<StatusBar backgroundColor="#63003d" barStyle="light-content" />
<SafeAreaView>
<ModernHeader
backgroundColor="#63003d"
height={50}
text="Eleph"
textStyle={{
color: "white",
fontFamily: "Lobster-Regular",
//fontWeight: "bold",
fontSize: 25,
}}
leftIconComponent={
<TouchableOpacity
style={{ marginRight: 0, margin: 0 }}
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
>
<FontAwesome5 name="bars" size={22} color="white" />
</TouchableOpacity>
}
rightIconComponent={
<TouchableOpacity
style={{ marginLeft: 0, margin: 0 }}
onPress={() => this.props.navigation.navigate("Profile")}
>
{/* <MaterialCommunityIcons
name="chart-areaspline"
size={24}
color="#639dff"
/> */}
<Foundation name="graph-bar" size={24} color="white" />
{/* <FontAwesome name="bar-chart" size={24} color="white" /> */}
</TouchableOpacity>
}
/>
</SafeAreaView>
<FlatList
//contentInset={{ top: HEADER_HEIGHT }}
//contentOffset={{ y: -HEADER_HEIGHT }}
data={this.state.post}
extraData={this.state.post}
keyExtractor={(item) => item.id.toString()}
style={{
marginHorizontal: 0,
marginVertical: 6,
}}
renderItem={({ item }) => this.renderPost(item)}
ListFooterComponent={this.renderFooter}
ListHeaderComponent={this.renderHeader}
refreshControl={
<RefreshControl
style={{ color: "#639dff" }}
tintColor="#639dff"
titleColor="#fff"
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
/>
}
initialNumToRender={7}
onEndReachedThreshold={0.1}
showsVerticalScrollIndicator={false}
onEndReached={() => {
if (
!this.onEndReachedCalledDuringMomentum &&
!this.state.isMoreLoading
) {
this.getMore();
}
}}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y);
}}
></FlatList>
{/* <View style={styles.footer}>
<TouchableOpacity
activeOpacity={0.9}
onPress={this.getMore}
style={styles.loadMoreBtn}
>
<Text style={styles.btnText}>See more moods</Text>
{this.state.loading ? (
<ActivityIndicator color="white" style={{ marginLeft:8 }} />
) : null}
</TouchableOpacity>
</View> */}
</SafeAreaView>
</View>
My renderHeader function:
renderHeader = () => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
backgroundColor: "#ffffff",
//width: "100%",
padding: 11,
alignItems: "center",
position: "absolute",
justifyContent: "center",
//top: 50,
//bottom: 0,
//left: 0,
//elevation: 4,
//right: 0,
//height: 50,
}}
//flexDirection: "row",
//backgroundColor: "#ffffff",
//width: "100%",
//padding: 11,
//alignItems: "center",
>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Post")}
>
<Text
style={{ alignItems: "center", color: "#C4C6CE" }}
//placeholder={How are you feeling right now ${this.state.user.name}?}
multiline
>{Tell us how are you feeling right now ${this.state.user.name}?}</Text>
</TouchableOpacity>
{/* <View style={styles.divider}></View> */}
</View>
);
}
Why for example renderFooter works??
renderFooter = () => {
if (!this.state.isMoreLoading) return true;
return (
<ActivityIndicator
size="large"
color={"#D83E64"}
style={{ marginBottom: 10 }}
/>
);
};
Use ListHeaderComponentStyle to style the ListHeaderComponent.
I created a simple snack for you, check if this helps. Your code looks okay but not sure about the whole screen design. Here is my snack link.
https://snack.expo.io/#saad-bashar/excited-fudge
It might be related to the other components inside your screen. So first check only with flatlist, remove all other components. Hope you can sort it out :)
The solution is to remove the "absolute" style in the header for flatlist. The question is mine im just answering with different account but this is the solution that worked.
I have 2 texts which i want to navigate to different pages with but i need an image in between them...but the text thats above the image (in this case "wc collar") does not navigate and is not clickable but when i remove the image it works...i even tried removing the touchable opacity and just adding the onpress to the text but it still produces the same result
<View>
<View style={styles.container}>
<View>
<TouchableOpacity
onPress={() => navigation.navigate('Collar')}
style={{ width: 90, height: 40 }}
>
<Text style={styles.textstyle}> WC COLLAR</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
onPress={() => navigation.navigate('Circlet')}
style={{ width: 90, height: 40 }}
>
<Text style={styles.textstyle2}> WC CIRCLET</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.container}>
<Image
source={require('../images/portlog.png')}
style={{ width: 1366, height: 650, position: 'absolute', top: 200 }}
/>
<StatusBar style="auto" />
</View>
</View>
I want to place a text and a toggle button in such a manner that the Text should be there at flex-start and the toggle would be there at the flex end. I have come up with the following code :
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
<View pointerEvents="none" style={{justifyContent: "flex-end"}}>
<Switch value={true} />
</View>
</View>
</TouchableRipple>
But the view is coming as follows:
How can I put the same at the end ?
Any help would be appritiated.
Here try this
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<View style={{flex:1}}> //wrap Text inside view with flex 1
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
</View>
<View pointerEvents="none" style={{flex:1,justifyContent: "flex-end"}}> //add flex 1 here
<Switch value={true} />
</View>
</View>
</TouchableRipple>