I want to add a border to the bottom of the <View> (like <hr>) for that reason i added that code to my style:
export default function Chat() {
return (
<View>
<View style={styles.inner}>
<CircleCard />
<CircleCard />
<CircleCard />
<CircleCard />
</View>
</View>
);
}
const styles = StyleSheet.create({
inner: {
width: "100%",
height: "85%",
flexDirection: "row",
flexWrap: "wrap",
flex: 1,
borderBottomColor: "black",
borderBottomWidth: 1,
},
});
But this code draw the border to top of the instead of Bottom.
Also The CircleCard component:
export default function CircleCard() {
return (
<View style={styles.container}>
<Image
style={styles.imageStyle}
source={require("../assets/games/Among-us.png")}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { width: 60, height: 60, margin: 5, marginTop: 10 },
imageStyle: {
width: "100%",
height: "100%",
overflow: "hidden",
resizeMode: "stretch",
borderRadius: 140,
},
});
How can I fix it?
Note: I added a negative marginTop to my styles.inner but than when i add a new component all page broken.
Here is what i want to make:
Working app : Expo Snack
import * as React from 'react';
import { View, StyleSheet, Image } from 'react-native';
export default function Chat() {
return (
<View>
<View style={styles.inner}>
<CircleCard />
<CircleCard />
<CircleCard />
<CircleCard />
</View>
</View>
);
}
function CircleCard() {
return (
<View style={styles.container}>
<Image
style={styles.imageStyle}
source={{
uri:
'https://www.graphicpie.com/wp-content/uploads/2020/11/red-among-us-png-1684x2048.png',
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: 60,
height: 60,
margin: 5,
marginTop: 10,
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: 30,
},
imageStyle: {
width: '100%',
height: '100%',
overflow: 'hidden',
resizeMode: 'stretch',
borderRadius: 140,
},
inner: {
width: '100%',
flexDirection: 'row',
flexWrap: 'wrap',
/**
* i guess "rgba(21,21,21,0.2)" looks better than then plain "black"
* borderBottomColor: "rgba(21,21,21,0.2)",
*/
borderBottomColor: 'black',
borderBottomWidth: 1,
},
});
Related
I want to add a clock to my component right-bottom here is my code :
import React from "react";
import { StyleSheet, View, Image, Text } from "react-native";
import CircleCard from "./CircleCard";
import { MaterialIcons } from "#expo/vector-icons";
export default function ChatCard() {
return (
<View style={styles.container}>
<View>
<CircleCard />{// my component}
</View>
<View
style={{
flexDirection: "row",
flex: 1,
flexWrap: "wrap",
flexShrink: 1,
}}
>
<Text style={{ color: "gray" }} numberOfLines={1}>{//For parsing }
SomeRandomLettersSomeRandomLettersSomeRandomLettersSomeRandomLetters {//The message part}
</Text>
<Text style={{ position: "absolute", bottom: 0, right: 0 }}>18:48</Text> {//The clock bottom right}
</View>
<View style={{ margin: 15 }}> {//For Icon}
<MaterialIcons
name="keyboard-arrow-right"
size={40}
color="black"
style={{ width: 30 }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: "100%",
height: 80,
margin: 5,
flexDirection: "row",
flexWrap: "wrap",
borderColor: "gray",
borderWidth: 1,
borderRadius: 20,
justifyContent: "space-between",
},
});
i added it at the end but now the First and Second Text overlaped.
Also an image for my goal:
Note2 : I read that the position absolute violate the flex-box but i do not find any style for moving the Text component to end. If there is an other way. i will be glad.
I don't know if it is what you want actually but here is my solution:
import React from "react";
import { StyleSheet, View, Image, Text, Dimensions } from "react-native";
import { MaterialIcons } from "#expo/vector-icons";
export default function ChatCard() {
return (
<View style={styles.container}>
<View style={styles.image}>
<Text style={{ fontSize: 34 }}>B</Text>
</View>
<View
style={styles.rowContent}
>
<Text style={styles.longText} ellipsizeMode='tail' numberOfLines={1}>
SomeRandomLettersSomeRandomLettersSomeRandomLettersSomeRandomLetters
</Text>
<Text style={styles.time}>18:48</Text>
</View>
<View style={{ margin: 15 }}>
<MaterialIcons
name="keyboard-arrow-right"
size={40}
color="black"
style={{ width: 30 }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginTop: 30,
width: '100%',
height: 80,
margin: 5,
flexDirection: "row",
borderColor: "gray",
borderWidth: 1,
borderRadius: 20,
},
image: {
alignItems: 'center',
justifyContent: "center",
width: 70,
padding: 10,
},
rowContent: {
justifyContent: "center",
alignItems: "center",
flexDirection: 'column',
flex: 1
},
longText: {
color: "gray",
alignSelf: 'stretch',
justifyContent: 'center'
},
time: { alignSelf: 'flex-end' }
});
I am trying to accomplish that the action button stays visible all the time. Once the user tabs on it, a modal appears and of course, the action button stays behind the modal.
I tried:
Using Portals
Create another button inside the modal (independent as the original one) but this causes problems depending on the device, and the user can see the transition from one button to another.
tried this pre-made one but can't seem to put it on tabbar correctly:actionbutton
My approach
MY CODE
import React, {useState} from 'react';
import {
Dimensions,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';
const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
: console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);
Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();
const TabBarAdvancedButton = ({bgColor, ...props}) => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<View style={styles.container} pointerEvents="box-none">
<TabBg color={'white'} style={styles.background} />
<TouchableOpacity
style={styles.button}
onPress={props.onPress}
activeOpacity={0.9}
onPress={() => setModalVisible(true)}>
<Entypo name="plus" style={styles.buttonIcon} />
</TouchableOpacity>
</View>
<Modal
backdropOpacity={0.8}
animationIn="fadeIn"
animationOut="fadeOut"
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}>
{/*close button */}
<View style={styles.content}>
<TouchableOpacity
style={{
position: 'absolute',
backgroundColor: 'red',
alignSelf: 'center',
}}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
marginBottom: height * 0.02,
}}>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
};
export default TabBarAdvancedButton;
const styles = StyleSheet.create({
container: {
position: 'relative',
width: 75,
alignItems: 'center',
},
background: {
position: 'absolute',
top: 0,
},
button: {
top: -22.5,
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 27,
backgroundColor: colors.PRIMARY_COLOR_DARK,
},
buttonIcon: {
fontSize: 16,
color: '#F6F7EB',
},
content: {
backgroundColor: 'transparent',
padding: 60,
justifyContent: 'space-evenly',
alignItems: 'center',
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: 'row',
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: 'flex-end',
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: '#468CFF',
borderWidth: 3.5,
backgroundColor: '#366ABF',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
},
});
I am trying to make an Action Button on the tapbar which deploys multiple items using Modal. The issue I have is that I want the action button to stay visible so the user can toggle between the modal.
Here you can see the action button visible
obviously disappears once the modal is activated.
Tried:
On the modal make another button, but on different device sizes the button moves.
Code
import React, {useState} from 'react';
import {
Dimensions,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';
const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
: console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);
Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();
const TabBarAdvancedButton = ({bgColor, ...props}) => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<View style={styles.container} pointerEvents="box-none">
<TabBg color={'white'} style={styles.background} />
<TouchableOpacity
style={styles.button}
onPress={props.onPress}
activeOpacity={0.9}
onPress={() => setModalVisible(true)}>
<Entypo name="plus" style={styles.buttonIcon} />
</TouchableOpacity>
</View>
<Modal
backdropOpacity={0.8}
animationIn="fadeIn"
animationOut="fadeOut"
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}>
{/*close button */}
<View style={styles.content}>
<TouchableOpacity
style={{
position: 'absolute',
backgroundColor: 'red',
alignSelf: 'center',
}}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
marginBottom: height * 0.02,
}}>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
};
export default TabBarAdvancedButton;
const styles = StyleSheet.create({
container: {
position: 'relative',
width: 75,
alignItems: 'center',
},
background: {
position: 'absolute',
top: 0,
},
button: {
top: -22.5,
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 27,
backgroundColor: colors.PRIMARY_COLOR_DARK,
},
buttonIcon: {
fontSize: 16,
color: '#F6F7EB',
},
content: {
backgroundColor: 'transparent',
padding: 60,
justifyContent: 'space-evenly',
alignItems: 'center',
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: 'row',
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: 'flex-end',
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: '#468CFF',
borderWidth: 3.5,
backgroundColor: '#366ABF',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
},
});
You can try the below code, you should be adding the action button inside the modal as well, so that will be displayed inside modal.
export default ActionButton = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
<View style={styles.container}>
<Modal
backdropOpacity={0.8}
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}
>
{/*close button */}
<View style={styles.content}>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "space-around",
}}
>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
style={[styles.buttonItem, { bottom: 130 }]}
>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
</View>
</View>
</Modal>
</View>
</>
);
};
const styles = StyleSheet.create({
content: {
backgroundColor: "transparent",
padding: 60,
justifyContent: "space-evenly",
alignItems: "center",
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: "row",
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: "flex-end",
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: "#468CFF",
borderWidth: 3.5,
backgroundColor: "#366ABF",
bottom: 50,
justifyContent: "center",
alignItems: "center",
},
});
*****I ran this react native code in expo .snack and the code ran flawlessly but when i run it in visual studio code to my iPhone it dosent seem to
work here is the error get is there anything i can do to get the code
to work.**
unexpected token 42:2
here is the code im running for the app***
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,ImageBackground,button,
TouchableOpacity, Dimensions,Button} from 'react-native';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default class App extends Component {
render() {
return (
<View style={{flexDirection: "row"}}>
<ImageBackground source={{uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576'}}
style={{width: width, height: height,flexDirection:'colum'}}>
<TouchableOpacity style={styles.spiderman}>
<Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
style={{width: 200, height:300,}} />
</TouchableOpacity>
<TouchableOpacity style={styles.hulk}>
<Image source={{uri:
'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
style={{width: 150, height: 80, position:'top',}} />
</TouchableOpacity>
<TouchableOpacity style={styles.blkwidow}>
<Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
style={{width: 200, height: 250}} />
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions.get('window').width -10,
zIndex: 10,
},
blkwidow: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions.get('window').width - 70,
zIndex: 10,
},
});
Your code needs to be reviewed. I have corrected the errors. See the code.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
ImageBackground,
//button - Not a component of react-native
TouchableOpacity,
Dimensions,
Button
} from 'react-native';
const width = Dimensions
.get('window')
.width;
const height = Dimensions
.get('window')
.height;
export default class App extends Component {
render() {
return (
<View style={{
flexDirection: "row"
}}>
<ImageBackground
source=
{ { uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576' } }
style={{
width: width,
height: height,
flexDirection: 'column'
}}>
<TouchableOpacity >
<Image
style={{
width: 200,
height: 200
}}
source={{
uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'
}}/>
</TouchableOpacity>
<TouchableOpacity >
<Image
style={{
width: 150,
height: 80,
//position: 'top' - position should be either absolute or relative
}}
source={{
uri: 'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'
}}/>
</TouchableOpacity>
<TouchableOpacity >
<Image
style={{
width: 200,
height: 250
}}
source={{
uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'
}}/>
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
flex: 1,
position: 'relative',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions
.get('window')
.width - 10,
zIndex: 10
},
blkwidow: {
flex: 1,
position: 'relative',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions
.get('window')
.width - 70,
zIndex: 10
}
});
you are improting button that is not true,you have to write Button and just once
I am using an image as the background for one of my pages. I'd like to add a backgroundColor with an opacity over the image. I'm not sure how I can achieve this with React Native.
render() {
return (
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
<Text>Hello</Text>
</Image>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
}
Here is how I'd achieve this on a web page: How to make in CSS an overlay over an image?
A cool thing you can do is drop an absolutely positioned view over it.
<View>
<Image source={require('./assets/climbing_mountain.jpeg')} style= {StyleSheet.absoluteFillObject}} resizeMode='cover'>
<Text>Hello</Text>
</Image>
<View style={styles.overlay} />
</View>
...
const styles = StyleSheet.create({
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)'
}
})
absoluteFillObject is the same as
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
If you want to be able to tap through your overlay, just set the pointerEvents prop on the view to none
docs: https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject
I was able to get this working thanks to #Kevin Velasco.
render() {
return (
<View style={styles.container}>
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
</Image>
<View style={styles.overlay} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
},
imageContainer: {
flex: 1,
width: null,
height: null,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(69,85,117,0.7)',
}
})
Here I use to solve my project, thansk to all:
<View>
<View
style = {{
//make overlay
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
//change this color to the other one which you want
backgroundColor: 'green',
}}
/>
<Image
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>
Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:
//Fetching the background image from online, you can use any image source of your choice.
const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };
// Setting the background image for the view:
<View style={styles.GoProBox}>
<ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
<View style={styles.overlayView}/>
<Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
<GoProButton />
</ImageBackground>
//Stylesheet
const styles = StyleSheet.create({
GoProBox: {
width: '95%',
height: 200,
margin: 5,
backgroundColor: '#00cc00',
borderRadius: 10,
alignSelf: 'center',
overflow: 'hidden'
},
goProBgImage: {
width: '100%', height: '100%',
},
goProText: {
textAlign: 'center',
fontSize: 20,
marginTop: 10,
fontWeight: 'bold',
padding: 10,
color: 'white'
},
GoProButton: {
height: 60,
width: 200,
backgroundColor: 'red',
borderRadius: 15,
alignSelf: 'center',
justifyContent: 'center',
top: 50
},
overlayView: {
height: "100%",
width: "100%",
position: 'absolute',
backgroundColor: 'rgba(0, 204, 0, 0.5)',
}
})
this is how i dit it to get it work for me
const visaCard = require('../Images/card_visa.png');
const [iscardBloqued, setIsCardBolqued] = useState(false);
const [hideInfos, setHideInfos] = useState(true);
Here is How the component looks like
<View style={styles.imageContainer}>
<ImageBackground
source={visaCard}
imageStyle={{ borderRadius: wp(3) }}
style={styles.imageStyle}
resizeMode="cover"
>
{hideInfos && (
<TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
<FText style={styles.whiteButtonText}>Afficher les infos</FText>
</TouchableOpacity>
)}
{iscardBloqued && (
<View style={styles.overlay}>
<TouchableOpacity
activeOpacity={0.7}
style={{ alignItems: 'center' }}
>
<Lock />
<FText style={styles.overlayText}>Carte bloqueé</FText>
</TouchableOpacity>
</View>
)}
</ImageBackground>
</View>
And her is my Style page: "i prefered to separate it from my component"
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
alignSelf: 'center',
marginTop: hp(3),
},
imageStyle: {
height: hp(25),
width: wp(85),
},
cardWhiteButton: {
marginHorizontal: wp(8),
backgroundColor: 'white',
marginTop: hp(17),
height: hp(5),
width: wp(32),
alignItems: 'center',
justifyContent: 'center',
borderRadius: wp(5),
},
whiteButtonText: {
fontSize: hp(1.4),
color: 'white',
fontFamily: 'Roboto',
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.89)',
justifyContent: 'center',
alignItems: 'center',
borderRadius: wp(3),
},
overlayText: {
color: 'white',
fontSize: hp(1.6),
fontFamily: 'Roboto',
marginTop: hp(2),
},
});