I am using this package to create a Swiper in React Native.
I used static data and it is working, but now I'm fetching data from server and save it in the state as an Array.
The problem is when mapping the data inside the swiper to create dynamic sliders, it is not showing anything, but if I do it outside of the Swiper it is rendering.
How can I solve this problem?
<Swiper
from={0}
minDistanceForAction={0.1}
controlsProps={{
dotsTouchable: true,
prevPos: 'left',
nextPos: 'right',
nextTitle: '',
prevTitle: '',
dotsWrapperStyle: { marginTop: ScaleHelpers.CalcHeight(8), width: ScaleHelpers.CalcWidth(7), height: ScaleHelpers.CalcHeight(7), borderRadius: ScaleHelpers.CalcWidth(7) },
dotActiveStyle: { width: ScaleHelpers.CalcWidth(7), height: ScaleHelpers.CalcHeight(7), borderRadius: ScaleHelpers.CalcWidth(7) },
}}
>
{
this.state.notifications.map((notif, index) => {
return (
<View style={[styless.slideContainer]}>
<Card transparent style={{
flex: 0,
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 1.0,
}}>
<CardItem
style={{ paddingTop: ScaleHelpers.CalcHeight(14), paddingLeft: ScaleHelpers.CalcWidth(14), paddingBottom: ScaleHelpers.CalcHeight(14) }}
>
<Left>
<View style={{
width: ScaleHelpers.CalcWidth(60),
height: ScaleHelpers.CalcHeight(60),
borderRadius: ScaleHelpers.CalcWidth(60) / 2,
margin: 0,
padding: 0,
justifyContent: 'center',
backgroundColor: '#FF004E',
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: ScaleHelpers.CalcHeight(2) },
shadowRadius: 1.0,
}}>
<Image source={bmwerror} style={{ alignSelf: 'center' }} />
</View>
<Body style={{ marginLeft: ScaleHelpers.CalcWidth(23) }}>
<Text style={styles.cardUpperText}>{notif.msg}</Text>
<Text style={styles.cardLowerText}>{notif.axle}{notif.side}</Text>
</Body>
</Left>
</CardItem>
</Card>
</View>
)
})
}
</Swiper>
From the documentation of the module:
Dynamic content
The Swiper will not be re-rendered if slides state or props have changed. Slides must control their condition.
This means that you have to manage state change on your own through your slides and not through Swiper component.
EDIT:
So, you can create a custom Slide module to handle those slides coming from server as:
class Slide extends React.Component {
constructor(props) {
super(props);
// your state for the slide component goes here....
}
render() {
const { msg, axle, side } = this.props.notification; // destructure your notification prop being passed from the map method of parent component
return (
<View style={[styless.slideContainer]}>
<Card transparent style={{
flex: 0,
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 1.0,
}}>
<CardItem
style={{ paddingTop: ScaleHelpers.CalcHeight(14), paddingLeft: ScaleHelpers.CalcWidth(14), paddingBottom: ScaleHelpers.CalcHeight(14) }}
>
<Left>
<View style={{
width: ScaleHelpers.CalcWidth(60),
height: ScaleHelpers.CalcHeight(60),
borderRadius: ScaleHelpers.CalcWidth(60) / 2,
margin: 0,
padding: 0,
justifyContent: 'center',
backgroundColor: '#FF004E',
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: ScaleHelpers.CalcHeight(2) },
shadowRadius: 1.0,
}}>
<Image source={bmwerror} style={{ alignSelf: 'center' }} />
</View>
<Body style={{ marginLeft: ScaleHelpers.CalcWidth(23) }}>
{/* use your destructure constants where required */}
<Text style={styles.cardUpperText}>{msg}</Text>
<Text style={styles.cardLowerText}>{axle}{side}</Text>
</Body>
</Left>
</CardItem>
</Card>
</View>
);
}
}export default Slide;
I have mentioned in comments how you can take the required information out of the notifications object.
Now comes the sending part, in your map function just call your newly created Slide component and pass the notification object as a prop like this:
<Slide notification={notif}/>
Notice here, in notification={notif} notification would serve as the name of the prop in Slide component and there you have to extract information from this.props.notification object as mentioned earlier.
Related
I'm trying to make these two Card components appear next to each other in a row as shown
here which seems to work when I wrap the component in a View, but appears like this with a bunch of unnecessary space in between when I try it with a TouchableOpacity.
Here is my code for the Card component (currently with TouchableOpacity on and the View wrapper commented out):
export const NavCard = ({
title,
height = 200,
onPress = null,
background = null,
}) => {
return (
<TouchableOpacity
onPress={onPress}
style={[
{ height: height },
background ? styles.cardImage : styles.noImage,
]}
>
{/* <View
style={[
{ height: height },
background ? styles.cardImage : styles.noImage,
]}
> */}
<Image
source={background}
resizeMode="cover"
style={{
height: height,
width: "100%",
borderRadius: 15,
position: "absolute",
top: 0,
right: 0,
}}
/>
<View style={{ padding: 15 }}>
<Text style={styles.title}>{title}</Text>
<Image
style={styles.arrow}
source={require("../assets/arrow-right.png")}
/>
</View>
{/* </View> */}
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
cardImage: {
flexGrow: 1,
margin: "2%",
borderRadius: 15,
},
noImage: {
flexGrow: 1,
margin: "2%",
borderRadius: 15,
backgroundColor: "#333436",
},
title: {
fontSize: 24,
color: "#E4E5EA",
fontWeight: "bold",
shadowColor: "#000000",
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 1,
shadowRadius: 4,
},
arrow: {
width: 15,
height: 15,
resizeMode: "contain",
position: "absolute",
top: 22,
right: 20,
},
});
Here is the code for the screen:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<View style={styles.rowContainer}>
<NavCard
title="Map"
height={180}
onPress={() => navigation.navigate("Map")}
background={require("../assets/pvdx1.png")}
></NavCard>
<NavCard
title="CAD"
height={180}
background={require("../assets/pvdx1.png")}
onPress={() => navigation.navigate("CADScreen")}
></NavCard>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 10,
padding: 4,
flex: 1,
},
rowContainer: {
flexDirection: "row",
justifyContent: "space-between",
},
body: {
paddingTop: 10,
fontSize: 16,
color: "#E4E5EA",
},
});
export default HomeScreen
Does anyone know why it's messing up the width of both components if the styles of the View and TouchableOpacity are exactly the same? I'm using React Native.
Edit: Have updated to use Image instead of ImageBackground (code now reflects this), but the result is the same.
I figured out the issue: I was importing TouchableOpacity from react-native-gesture-handler instead of react-native. Changed it and it works just fine.
Probably the problem is in your <ImageBackground /> , Because I replaced that with native <Image /> and it's working. here is how my Image looks, you can compare with your code:
<Image
style={{
height: height,
borderRadius: 15,
position: "absolute",
top: 0,
right: 0,
width: "100%"
}}
resizeMode="cover"
source={{ uri: "https://via.placeholder.com/250x150" }}
/>
Here you can check the working code
for me i had to also set the width on the TouchableOpacity (and the view within)
<TouchableOpacity
style={{flex: 1, width: '100%'}}
I am trying to give shadow to my custom card component but the shadow cuts down the view like this:
Here is my code
import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'
const { width } = Dimensions.get('window')
export default function CardCus() {
return (
<View style={{
justifyContent: 'center', alignItems: 'center', padding: 10
}}>
<View style={styles.container}>
<View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
<Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
</View>
<View style={{ margin: 10, padding: 5 }}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: width - 10,
},
title: {
fontWeight: 'bold'
}
}
)
I have tried many different style settings but none of them work. Is there a way to solve this issue? Thanks in advance.
So related to your question, it was hard to understand at first.
I just added the properties zIndex and backgroundColor to the container style and increased the value of the elevation and now it looks better. Also improved the readability.
See the comments in the improved code below:
import React from 'react';
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native';
export default function CardCus() {
const imgUri =
'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940';
return (
<View style={styles.main}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: imgUri }} />
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 10, // changed to a greater value
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: Dimensions.get('window').width - 10,
zIndex: 99, // added zIndex
backgroundColor: 'white', // added a background color
},
title: {
fontWeight: 'bold',
},
imageContainer: {
width: 110,
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
backgroundColor: 'white',
},
image: {
width: '100%',
height: '100%',
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
},
textContainer: {
margin: 10,
padding: 5,
backgroundColor: 'white',
},
main: {
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
});
You can adjust the values to make the shadow darker. And this is how it looks:
Alright, so this has got me busy for quite a few hours already. I am trying to create a login screen where the main components are rendered on the bottom, with the logo in the remaining space. This is kind of what I would like to achieve:
To support my textinputs, I use KeyboardAwareScrollView, as it works better for me as opposed to KeyboardAvoidingView. My code currently looks like this (I plan on using a background image with a 50% color overlay rather than the red background, so the ImageBackground has to stay in place too):
<ImageBackground
source={require('./assets/img/background-clouds.png')}
resizeMode="cover"
style={styles.backgroundImage}>
<View style={styles.backgroundOverlay} />
<View style={styles.dummyView}>
<Text>elloha</Text>
</View>
<Image
source={require('./assets/img/logo.png')}
style={styles.backgroundLogo}
resizeMode="contain"
/>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
keyboardOpeningTime={0}
alwaysBounceHorizontal={false}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="automatic"
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
automaticallyAdjustContentInsets={false}
extraScrollHeight={30}
enableOnAndroid>
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
hidden={false}
translucent
/>
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
accessible={false}>
<View style={styles.content}>
<View style={styles.backgroundContainer}>
<SafeAreaView style={{ flex: 0 }} />
<View style={styles.loginContainer}>
<View style={styles.loginScreen}>
// textinputs and buttons go here
</View>
<SafeAreaView style={{ backgroundColor: 'white' }} />
</View>
<View
style={{
backgroundColor: 'white',
height: Dimensions.get('window').height,
position: 'absolute',
width: Dimensions.get('window').width,
top: Dimensions.get('window').height,
}}
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
</ImageBackground>
Relevant styles:
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
},
content: {
flex: 1,
},
backgroundImage: {
flex: 1,
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
backgroundContainer: {
justifyContent: "flex-end",
flex: 1,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
backgroundOverlay: {
backgroundColor: "red",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
},
logoContainer: {
top: "10%",
width: "100%",
},
backgroundLogo: {
alignSelf: "center",
position: "absolute",
width: 126,
height: 96,
},
dummyView: {
backgroundColor: "red",
flex: 1,
},
loginContainer: {
borderTopEndRadius: 30,
borderTopStartRadius: 30,
width: "100%",
backgroundColor: "white",
height: 500,
alignItems: "center",
paddingTop: Dimensions.get("window").width * 0.1,
},
loginScreen: {
width: "80%",
backgroundColor: "white",
},
});
This yields the following result:
I can get it done by adding top: 160 to the backgroundLogo style, but that's a fixed value. I want it to be always in the center of the available space, but I'm unable to add a view between the background and the loginContainer, as all the logic for the keyboard and such is handled in between.
Is there a way to achieve what I want? Ideally, I should also be able to check the available height, and only show the logo if there is enough space (e.g. available height > 100, otherwise don't show logo).
Important:
I want the logo to stay fixed, so if the keyboard is shown, the logo should not move up. The loginContainer should go "over" the logo
EDIT:
Wrap Image inside a View with this style and give the loginContainer style height: '70%' :
...
<View style={styles.dummyView}>
<Text>elloha</Text>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
height: '30%',
position: 'absolute',
width: '100%',
}}>
<Image
source={require('./assets/img/logo.png')}
style={styles.backgroundLogo}
resizeMode="contain"
/>
</View>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
...
...
loginContainer: {
borderTopEndRadius: 30,
borderTopStartRadius: 30,
width: '100%',
backgroundColor: 'orange',
height: '70%',
alignItems: 'center',
paddingTop: Dimensions.get('window').width * 0.1,
},
...
hie! I think using Dimension to get a specific screen's height and deciding it has 70% of the screen covered via form sheet and rest is free for a logo to be in and we can ask it to be down a little using rest of height's 50% as margin-top ( the image will be in the center of that image )
here is a SNACK LINK to see your example working with my suggested solution.
here is the draft code:
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ImageBackground,TextInput,
Image, TouchableWithoutFeedback, Keyboard, SafeAreaView, StatusBar} from 'react-native';
import Constants from 'expo-constants';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
export default function App() {
return (
<ImageBackground
source={{
uri: 'https://cdn.pixabay.com/photo/2021/08/23/18/37/tea-6568547_960_720.jpg',
}}
resizeMode="cover"
style={styles.backgroundImage}>
<View style={styles.backgroundOverlay} />
<Image
source={require('./assets/snack-icon.png')}
style={styles.backgroundLogo}
resizeMode="contain"
/>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
keyboardOpeningTime={0}
alwaysBounceHorizontal={false}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="automatic"
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
automaticallyAdjustContentInsets={false}
extraScrollHeight={30}
enableOnAndroid>
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
hidden={false}
translucent
/>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={styles.content}>
<View style={styles.backgroundContainer}>
<SafeAreaView style={{flex: 0}} />
<View style={styles.loginContainer}>
<View style={styles.loginScreen}>
<TextInput value={'email'} style={{borderBottomWidth:1, padding:10}}/>
<TextInput value={'password'} style={{borderBottomWidth:1, padding:10}}/>
</View>
<SafeAreaView style={{backgroundColor: 'white'}} />
</View>
<View
style={{
backgroundColor: 'white',
height: Dimensions.get('window').height,
position: 'absolute',
width: Dimensions.get('window').width,
top: Dimensions.get('window').height,
}}
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
</ImageBackground>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
},
content: {
flex: 1,
},
backgroundImage: {
flex: 1,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
backgroundContainer: {
justifyContent: 'flex-end',
flex: 1,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
backgroundOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
logoContainer: {
top: '10%',
width: '100%',
},
backgroundLogo: {
alignSelf: 'center',
position: 'absolute',
marginTop: Dimensions.get('window').height/7, // top for rest of the screen to push logo down
width: 126,
height: 96,
},
dummyView: {
backgroundColor: 'red',
flex: 1,
},
loginContainer: {
borderTopEndRadius: 30,
borderTopStartRadius: 30,
width: '100%',
backgroundColor: 'white',
height: Dimensions.get('window').height/1.5, //container of form height
alignItems: 'center',
paddingTop: Dimensions.get('window').width * 0.1,
},
loginScreen: {
width: '80%',
backgroundColor: 'white',
},
});
Here is the output of code on android/ios:
I need to render rounded shadow on rounded button. Shadow should be render like given in image but some how i am not able to render like that.
But it is not render properly and display like below.
It looks like below
Style will be like this
const styles = StyleSheet.create({
buttonStyle : {
height: 60,
width: 60,
marginRight: 15,
shadowColor: "#4e4f72",
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0
},
borderRadius: 30,
elevation: 30,
},
})
View style
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<Image style={styles.buttonStyle} source={require('../images/google.png')} />
<Image style={styles.buttonStyle} source={require('../images/facebook.png')} />
<Image style={{ height: 60, width: 60, }} source={require('../images/instagram.png')} />
</View>
Can you try to place your image inside a View. Remove the shadow styling from the image and place it to the View. In my case this is working.
<View
style={{
height: 60,
width: 60,
marginRight: 15,
shadowColor: '#4e4f72',
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0,
},
borderRadius: 30,
elevation: 30,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image style={{ height: 60, width: 60, borderRadius: 30 }} />
</View>
Don't forget to add the require back to the Image component
I am trying to make my own tab navigation like Instagram has instagram example. I noticed that the items within the footer view I made does not stay within the bounds and moves to the top left of the screen. Images shown - What I am trying to achieve What happens frequently
Here is the most important part of my code. I have done inline styles temporarily to try and figure out the issue. Here is the part where the issue lays <View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} <TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity> </View>-
render() {
return (
<MapView style = {[style.container, style.map]}
region = {this.state.initialPosition}>
<MapView.Marker coordinate = {this.state.markerPosition}>
<View style = {style.radius}>
<View style = {style.marker}/>
</View>
</MapView.Marker>
<View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} >
<TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity>
</View>
</MapView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
//alignItems: 'center',
},
text: {
color: '#fff'
},
map: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
},
radius:{
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(1,213,106,0.3)',
borderWidth: 1,
borderColor: 'rgba(1,213,106,0.3)',
alignItems:'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: '#fff',
borderRadius: 20 / 2,
borderWidth: 3,
overflow: 'hidden',
backgroundColor: '#01D56A'
},
menuSection: {
backgroundColor: 'rgba(255, 255, 255, 0.7)',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height/3,
justifyContent: 'flex-end',
alignItems: 'center'
},
icon:{
width: 50,
height: 50,
backgroundColor: 'black'
}
})