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),
},
});
Related
I had created bottom sheet using this [plugin][1]
Below is the code
[1]: https://github.com/gorhom/react-native-bottom-sheet
Issue is transparent overlay create opacity for bottomsheet also.
Is there any way i can create full screen transparent overlay and then proper bottomsheet without any opacity or tranparency.
const BottomSheet: React.FC<Props> = props => {
// ref
const bottomSheetRef = useRef<BottomSheet>(null);
const styles = StyleSheet.create({
overlay: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
opacity: 0.6,
elevation: 24,
zIndex: 24,
backgroundColor: 'black',
justifyContent: 'center',
},
container: {
flex: 1,
flexDirection: 'column',
width: '100%',
backgroundColor: 'red',
},
contentContainer: {
alignItems: 'center',
height: '100%',
overflow: 'visible',
},
imageContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
bodyContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
buttonContainer: {
height: 88,
width: '100%',
alignItems: 'center',
},
backgroundContainer: {
backgroundColor: 'green',
},
});
return (
<View style={styles.overlay}>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={['50%', '50%']}
backgroundStyle={styles.backgroundContainer}
containerStyle={{
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
}}
onChange={handleSheetChanges}>
<View style={styles.imageContainer}>
<Image source={props.imageSource} style={styles.largeImage} />
</View>
<View style={styles.bodyContainer}>{props.body}</View>
<View style={styles.buttonContainer}>
<Divider style={styles.divider} />
<View style={styles.buttonRow}>
<TouchableOpacity
style={styles.bodyContainer}
onPress={() => {
props.onCancelAction();
}}>
<Text style={styles.cancelButtonText}>
{props.cancelText ? props.cancelText : 'Cancel'}
</Text>
</TouchableOpacity>
<Divider style={styles.verticalDivider} />
</View>
</View>
</BottomSheet>
</View>
);
};
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,
},
});
Please do not mark this as duplicate.It is not. I haven't found any working solution for me.
So basically, I have been browsing stackoverflow and GitHub and I could get nothing working for me. If I set the behavior of KeyboardAvoidingView to padding nothing happens. However, position or height works fine, just as intended. Anyone has any ideea why? I need padding here, specifically. It doesn't matter where I put my KeyboardAvoidingView tag or what I wrap with it, it won't work.
Basically I am trying to get the <RichToolbar> to get pushed up when i open the keyboard. Seems easy, lost a day on it :(
I also tried the package containing KeyboardAwareScrollView, no luck.
I am currently using
react-native-cli: 2.0.1
react-native: 0.61.2
My code:
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="position">
<View style={styles.container}>
<ScrollView scrollEnabled={false} contentContainerStyle={styles.textEditorContainer}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<>
<TextInput
autoCorrect={false}
style={styles.title}
placeholder={Strings.screen.edit.titlePlaceholder}
onChangeText={this.onTitleValueChange}
value={titleValue}
/>
{divider}
<RichEditor
ref={this.setEditorRef}
initialContentHTML={this.props.initialEditorValue.content}
style={styles.textEditor}
/>
</>
</TouchableWithoutFeedback>
{this.renderCornerAnimation()}
<View style={styles.toolbarContainer}>
<RichToolbar
style={styles.toolbar}
getEditor={() => this.richText}
iconTint={'#000033'}
selectedIconTint={'#2095F2'}
selectedButtonStyle={{ backgroundColor: 'transparent' }}
/>
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
);
}
}
interface Style {
container: ViewStyle;
textEditorContainer: ViewStyle;
textEditor: ViewStyle;
title: TextStyle;
toolbarContainer: ViewStyle;
toolbar: ViewStyle;
toolbarButton: TextStyle;
lottieView: ViewStyle;
divider: ViewStyle;
iconSetContainerStyle: ViewStyle;
textInput: ViewStyle;
}
function createStyleSheet(colorScheme: ColorScheme): Style {
return StyleSheet.create<Style>({
container: {
flex: 1,
width: '100%',
height: '100%',
paddingTop: getStatusBarHeight(true),
backgroundColor: color[colorScheme].background,
alignItems: 'center',
},
textEditorContainer: {
width: screenWidth / 1.2,
backgroundColor: palette.white[1],
borderRadius: 40,
},
textEditor: {
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
width: '100%',
backgroundColor: palette.white[1],
},
title: {
backgroundColor: palette.white[1],
width: '100%',
padding: 5,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
fontWeight: '700',
fontSize: 20,
},
toolbarContainer: {
flex: 1,
minHeight: 35,
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: color[colorScheme].background,
paddingBottom: getBottomSpace(),
},
toolbar: {
height: 35,
backgroundColor: color[colorScheme].background,
},
toolbarButton: {
fontSize: 12,
textAlign: 'center',
},
lottieView: {
position: 'absolute',
top: 0,
right: 0,
width: 20,
height: 20,
},
divider: {
width: '10%',
borderRadius: 4,
marginLeft: 8,
borderBottomWidth: 6,
},
iconSetContainerStyle: {
flexGrow: 1,
justifyContent: 'space-evenly',
alignItems: 'center',
},
textInput: {
color: color[colorScheme].text,
},
});
}
I am not a pro developer but try this hack....!
<View
style={{ flex: 1, }}>
<Modal
visible={state}
transparent={true}
>
<View style={{ flexDirection: 'column-reverse', flex: 1 }}>
<TextInput placeholder='wexneweyxuyfwwyfunwfyw' />
</View>
</Modal>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ flex: 1, backgroundColor: color.rebeccapurple }}>
<Text>Touch</Text>
</TouchableOpacity>
</View>
</View>
This will auto align textInput on top of keyBoard Thanks ..
also run the fucntion easy .....
I have a modal Component that I am trying to put in the center of the screen.
In my view tag with style={styles.containerStyle} the way it currently is written the modal is vertically in the middle but horizontally to the left. If I add flexDirection: 'row' to the containerStyle it moves it to the middle horizontally but to the top vertically.
This is my modal component:
class ItemInformationModal extends Component {
onNotesChange(text) {
this.props.notesChanged(text);
}
render() {
return (
<Modal
transparent
animationType='fade'
visible={this.props.itemModalVisible}
>
<View style={styles.containerStyle}>
<View style={styles.modalContainer}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styles.itemTitle}>{this.props.currItem.text}</Text>
<View style={{ padding: 5 }}>
<DatePickerIOS />
</View>
</View>
<View style={{ padding: 5 }}>
<Feather
name="x-square"
size={35}
color={'#db5461'}
onPress={() => this.props.closeItemModal()}
/>
</View>
</View>
<View style={{ padding: 5 }}>
<TextInput
placeholder={'Add notes'}
value={this.props.currItem.notes}
multiline
style={styles.notesInput}
onChangeText={this.onNotesChange.bind(this)}
/>
</View>
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
alignSelf: 'baseline',
},
notesInput: {
height: 130,
borderWidth: 1,
borderRadius: 10,
borderColor: '#28313b',
padding: 10,
color: '#28313b'
},
itemTitle: {
fontSize: 20,
color: '#28313b',
padding: 10
}
});
You can remove alignSelf
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems:"center"
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
}
I am working on a little map application using react-native-maps. I am trying to render a floating action button on top of the map, but while I do see it flashing for a second, as soon as the map renders, it sits right on top of the button. I will paste my render code and styles below:
render() {
return (
<View style={{flex:1, backgroundColor: '#f3f3f3'}}>
<MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange}>
<MapView.Marker coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}>
<View style={styles.radius}>
<View style={styles.marker} />
</View>
</MapView.Marker>
</MapView>
<ActionButton buttonColor="rgba(231,76,60,1)" style={styles.actionButton}>
<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
width: width,
height: height,
zIndex: 998
},
radius: {
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(0, 122, 255, 0.1)',
borderWidth: 1,
borderColor: 'rgba(0, 122, 255, 0.3)',
alignItems: 'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: 'white',
borderRadius: 20 / 2,
overflow: 'hidden',
backgroundColor: '#007AFF'
},
actionButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: 10,
zIndex: 999
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white'
}
});
I had the same problem. I solved it by giving the map a negative z-index. Also, I used flex: 1, instead of width and height, but that shouldn't make a difference.
Like:
map: {
width: width,
height: height,
zIndex: -1
},
actionButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: 10,
zIndex: 10
},
<Pressable style={{
zIndex: 5
flex: 1,
flexDirection:'row',
padding: 10,
position:'absolute',
bottom:"25%",
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: '#4DDB81',
borderWidth: 0.5,
borderRadius: 10,
}}>
<Text style={{
fontSize: 30,
color: "#383838"
}}>Pressable
it is a long shot but try to add position: 'absolute' to your map styles and set its coordinates and see what happens