I want to opactiy my imagebackground not text over image
Anyone help me?
<ImageBackground
imageStyle={{ borderRadius: 100 / 4}}
style={styles.image}
source={{ uri: "example.com/" + itemData.item.image}}
>
<View style={styles.includetitle}>
<Text style={styles.title}>
{itemData.item.title}
</Text>
</View>
</ImageBackground>
I tried like this but my text made transparent too...
image: {
width: '100%',
height: '100%',
opacity: 0.5
},
Just use Image instead of ImageBackground and wrap with a View
<View style={style.container}>
<Image style={[StyleSheet.absoluteFill, {resizeMode: 'cover', opacity: 0.5}]}/>
<View style={styles.includetitle}>
<Text style={styles.title}>
{itemData.item.title}
</Text>
</View>
</View>
You can use this:
<ImageBackground
borderRadius={15}
fadeDuration={1}
source={{
uri: image
? image
: "https://bitsofco.de/content/images/2018/12/Screenshot-2018-12-16-at 21.06.29.png",
}}
style={styles.imgcontainer}
>
<Text style={styles.name}>{restro.name}</Text>
</ImageBackground>
Styles for imgContainer and name
imgcontainer: {
justifyContent: "flex-end",
height: 220,
width: 330,
padding: 20,
marginRight: 20,
marginVertical: 10,
shadowColor: "#000",
shadowOffset: {
height: 5,
},
shadowOpacity: 0.5,
shadowRadius: 10,
elevation: 10,
opacity:0.5
},
name: {
color: "white",
fontSize: 22,
fontWeight: "bold",
letterSpacing: 2,
textShadowColor: "#000",
textShadowOffset: {
width: 2,
height: 1,
},
textShadowRadius: 5,
opacity:1
},
Just pass opacity through imageStyle props
<ImageBackground
imageStyle={{ borderRadius: 100 / 4}}
style={styles.image}
imageStyle={{opacity:0.5}}
source={{ uri: "example.com/" + itemData.item.image}}
>
<View style={styles.includetitle}>
<Text style={styles.title}>
{itemData.item.title}
</Text>
</View>
</ImageBackground>
Remove opacity from image obejct of stylesheet
Related
I'm creating a react native app i have a item - a plus button(shown in image)
I want this to the bottom of my page onto footer -
but the problem is that when i place this button on bottom with position: 'absolute', bottom: 0 it's only going to the bottom of the hero section & not to the footer
Code -
<View style={styles.main}>
<View style={styles.hero}>
<View style={styles.flex}>
<View style={styles.container}>
</View>
</View>
<View style={styles.flex2}>
</TouchableOpacity>
</View>
<View style={styles.container12}>
</View>
</View>
</View>
<TouchableOpacity>
<View style={styles.container33}>
<EntypoIcon name="plus" style={styles.icon28}></EntypoIcon>
</View>
</TouchableOpacity>
Main Styles -
main: {
width: '100%',
height: '100%',
},
hero: {
alignSelf: 'stretch',
height: 250,
backgroundColor: '#fff',
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
},
container33: {
width: 50,
height: 50,
backgroundColor: '#1DA6FA',
// flex: 1,
borderRadius: 50,
position: 'absolute',
bottom: 0,
right: 10,
alignItems: 'center',
justifyContent: 'center'
},
The problem si that you are applying the absolute css position to the View inside the TouchableOpacity and not to the TouchableOpacity itself.
To achieve what you want to do, you should write something like:
<View style={styles.absoluteOpacity}>
<TouchableOpacity>
<View style={styles.container33}>
<EntypoIcon name="plus" style={styles.icon28}></EntypoIcon>
</View>
</TouchableOpacity>
</View>
And then the css:
container33: {
width: 50,
height: 50,
backgroundColor: '#1DA6FA',
// flex: 1,
borderRadius: 50,
right: 10,
alignItems: 'center',
justifyContent: 'center'
},
absoluteOpacity: {
position: 'absolute',
bottom: 0,
}
here is the code that is causing the issue
<ScrollView style={styles.scrollView}>
<TouchableHighlight
onPress={() => this.props.navigation.navigate("ACompose")}
>
<View
style={{
top: 1,
width: 300,
height: 50,
borderRadius: 20,
backgroundColor: 'white',
alignSelf: "center",
borderWidth: 5,
borderColor: 'rgb(14,59,88)',
}}>
<Text style={{ color: 'black', fontSize: 20, letterSpacing: 0, alignSelf: "center", top: 6, left: -15 }}>
New Announcement
</Text>
<Image
style={{ width: 30, height: 30, left: 222, bottom: 20 }}
source={
require('../assets/PLUS.png')
}>
</Image>
</View>
</TouchableHighlight>
</ScrollView>
I am new to JS and react native so if Im doing anything wrong let me know
You should try optional chaining if your preset supports it:
<TouchableHighlight
onPress={() => this.props.navigation.navigate("ACompose")}>
Otherwise, you need to check step by step:
<TouchableHighlight
onPress={() => this.props && this.props.navigation && this.props.navigation.navigate && this.props.navigation.navigate("ACompose")}>
class Newsfeed extends React.Component{
state = {
text: ''
};
render(){
return (
<View>
<Text style={{fontSize: 50}}>Junior Facebook</Text>
<View style={{flex: 1, flexDirection: "column"}} />
<View style={{top: 20, marginLeft: 0, width: 300, height: 180, backgroundColor: "lightblue"}}>
<TextInput
style={{
height: 150,
borderStyle: "solid",
borderWidth: 2,
fontSize: 30
}}
placeholder="New Post"
/>
<TouchableOpacity
style={{ backgroundColor: "green", marginLeft: 220, width: 80, height: 40 }}
>
<Text style={{fontSize: 24}}>Enter</Text>
</TouchableOpacity>
</View>
<View style={{marginTop: 30, marginLeft: 0, width: 300, height: 180, backgroundColor: "pink"}} >
<TouchableOpacity style={{width: 65, height: 45, marginLeft: 260}}><Text>Share</Text></TouchableOpacity>
<TouchableOpacity style={{width: 65, height: 45, marginLeft: 220, marginTop: -45}}><Text>Like</Text></TouchableOpacity>
</View>
<View style={{marginTop: 10, marginLeft: 0, width: 300, height: 130, backgroundColor: "yellow"}} >
</View>
</View>
)
}
}
The above is my current code. When I type in an image link in TextInput, I want the image to appear on the yellow View Component below. I have tried many different ways but it still does not work. How can I do so?
Thank you
#高鵬翔 answer is perfect, but said that you want to display image after clicking on 'enter' button. So here is my solution :
...
...
import { View, Text, Image } from "react-native";
...
...
//state
this.state = {
link: "",
enteredImageUri: "",
};
render() {
return (
<View>
...
...
<View
style={{
top: 20,
marginLeft: 0,
width: 300,
height: 180,
backgroundColor: "lightblue",
}}
>
<TextInput
style={{
height: 150,
borderStyle: "solid",
borderWidth: 2,
fontSize: 30,
}}
placeholder="New Post"
value={this.state.link}
onChangeText={(link) => this.setState({ link })}
/>
<TouchableOpacity
style={{
backgroundColor: "green",
marginLeft: 220,
width: 80,
height: 40,
}}
onPress={() => {
this.setState({
enteredImageUri: this.state.link,
});
}}
>
<Text style={{ fontSize: 24 }}>Enter</Text>
</TouchableOpacity>
</View>
<View>
{/* Image View */}
{this.state.enteredImageUri === "" ? (
<Text>No Image link entered</Text>
) : (
<Image
source={{ uri: this.state.enteredImageUri }}
style={{ width: 400, height: 400 }}
/>
)}
</View>
...
...
</View>
);
}
As you can see I have just assigned textinput text into the another state variable enteredImageUri, which will be used to display image.
You have to use Image Tag to show image.
Like this:
import {Image} from 'react-native';
...
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
style={{width: 400, height: 400}} />
And you have to store the text input as a state to control Image as #Will said.
So you have to add a state and the text input should like this:
constructor(props) {
super(props);
this.state = { text: '' };
}
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
And see how you want to control Image view to show something like this, but this may be error if the uri haven't finish? Based on when you pass the correct uri to let it show, but it's an another question:
import {Image} from 'react-native';
...
<Image source={{uri: this.state.text}}
style={{width: 400, height: 400}} />
I am using react-native-snap-carousel.
How can I have the text on the image?
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.illustration }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.35}
{...parallaxProps}
/>
</View>
<View style={styles.textContainer}>
<Text styke={styles.title}>{item.title}</Text>
<Text style={styles.subtitle}>{item.subtitle}</Text>
</View>
Styles:
const styles = StyleSheet.create({
item: {
width: screenWidth - 60,
height: screenWidth - 250
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderTopLeftRadius: 5,
borderTopRightRadius: 5
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover'
},
textContainer: {
justifyContent: 'center',
paddingTop: 20 - 8,
paddingBottom: 20,
paddingHorizontal: 16,
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5,
backgroundColor: colors.gray3
},
title: {
color: colors.black,
fontSize: 13,
fontWeight: 'bold',
letterSpacing: 0.5
},
subtitle: {
marginTop: 6,
color: colors.gray,
fontSize: 12,
fontStyle: 'italic'
}
});
Add a bottom of a value such as
return (
<View style={styles.item}>
<ParallaxImage
source={item.thumbnail}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<View style={{bottom: 40}}>
<Text style={{color:'white', fontSize: scale(20), }}>
{item.title}
</Text>
</View>
</View>
Could you try this?
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.illustration }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.35}
{...parallaxProps}
/>
<Text styke={styles.title}>{item.title}</Text>
<Text style={styles.subtitle}>{item.subtitle}</Text>
</View>
....
<Carousel
...
itemWidth={screenWidth - 60}
/>
...
item: {
width: screenWidth - 60,
height: screenWidth - 60
}
I want to put some words in the 4 corners of the phone but tried everything and i haven't succeeded , i'm beginner in React Native .
state = {
fontLoaded: false
}
async componentDidMount () {
await this._loadAssets()
}
async _loadAssets () {
await Font.loadAsync({
'aga-arabesque': require('./assets/fonts/aga-arabesque.ttf'),
'Mistral': require('./assets/fonts/Mistral.ttf')
})
this.setState({fontLoaded: true})
}
this is all to load custom fonts .
and this is the code of all the screen
let text = null
if (this.state.fontLoaded) {
text = <View>
<View style={{flexDirection: 'row',flex: 1}}>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
a
</Text>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
h
</Text>
</View>
<Text style={{fontSize: 170, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
World
</Text>
<View style={{flexDirection: 'row',flex: 1,paddingBottom : "0%"}}>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
s
</Text>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "70%"}}>
g
</Text>
</View>
</View>
}
and here is the Style of the container
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-between'
},
and thank you very much for your help .
You can use these attributes: right: 0, top: 0, left: 0, bottom: 0 in your style.
right: 0, top: 0 will print your item on right-Top corner.
left: 0, top: 0 will print your item on left-Top corner. and so on....
Example:
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray', left: 0, Top: 0}}>
a
</Text>
just to help you I created working example
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row',flex: 1}}>
<Text style={{ position: 'absolute', fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
a
</Text>
<Text style={{ position: 'absolute', right: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
h
</Text>
</View>
<Text style={{ fontSize: 70, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
World
</Text>
<View style={{flexDirection: 'row',flex: 1}}>
<Text style={{ position: 'absolute', bottom: 0, left: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
s
</Text>
<Text style={{ position: 'absolute', fontSize: 60, bottom: 0, right: 0, fontFamily: 'aga-arabesque', color: 'gray'}}>
g
</Text>
</View>
</View>
);
}
}
position: absolute was missing earlier.