I am trying to add the image from Parse to React Native Project.
Everything is ok with adding text:
<Text style={{flex: 1, fontSize: 14, textAlign: 'justify', color: 'black', }}>
{this.props.tweet.get('username')}
</Text>
But I can not add an image:
<Image source={this.props.tweet.get('photo')}
style={{width: 50, height: 50}}/>
I am also trying
var photo = this.props.tweet.get('photoprofile');
....code
<Image source={{uri: {photo}}}
style={{width: 50, height: 50}}/>
And
var photo = this.props.tweet.get('photoprofile');
....code
<Image source={photo}
style={{width: 50, height: 50}}/>
It does not work.
Everything work!!!
var imageFile = this.props.tweet.get('photoprofile');
var imageURL = imageFile.url();
...code
<Image source= {{uri: imageURL}}
style={{width: 50, height: 50}} />
Related
I have to achieve Below output :
What I achieved
Here is My source code :
return (
<ImageBackground source={require('../../assets/images/home_bg.png')} style={{
height: 185,
width: '100%',
}}>
<Header style={{
backgroundColor: 'transparent'
}}
androidStatusBarColor={"#EB7D16"} >
<View style={{ flex: 0.5, alignItems: 'center', alignContent: 'center', alignSelf: 'center' }}>
<Left>{LeftIcon}</Left>
</View>
<View style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}>
<CustomSearchBar />
</View>
<View style={{ flex: 0.5, alignContent: 'center', alignItems: 'center' }}>
<Right>{RightIcon}</Right>
</View>
</Header>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Image resizeMode="contain" source={require('../../assets/icons/logo.png')} style={{ height: '50%', width: '50%', marginTop: 20 }}>
</Image>
</View>
</ImageBackground >
);
I used Image Background and then Set Header component on that module.
Here, I set ImageBackground height: 185, width: '100%', which is wrong way and it's not responsive for all devices. I also use windows.height and windows.width but it's also not working, Kindly share proper way for setting this background Image and How to achieve may targeted output.
Thank you in advance!
you need to make status bar "translucent" so that background image starts from top.
try this and add in your main render of screen
import { StatusBar } from "react-native";
...
<StatusBar translucent backgroundColor="transparent" />
I resolved it by my slef.. actually issue with background image.
Thank you all for time!
I Need to insert an image inside the text so, I do it with the most simple way:
const avatarurl = 'https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg'
<ScrollView>
<View style={styles.articleContent}>
<View style={styles.p}>
<Text style={{backgroundColor:'pink', width: 300, height: 100 }}>
<Image style={{width: 300, height: 50}} source={{uri: avatarurl}}/>
</Text>
</View>
</View>
</ScrollView>
const styles = {
articleContent: {
paddingTop: 50,
paddingLeft: 20,
paddingRight: 20,
borderColor: 'red',
},
p: {
paddingBottom: 15,
flex: 1,
},
textCaption: {
fontSize: 13,
color: 'black',
},
}
Here is the result:
I Don't know why the entire image is not inside the Text. So, I tried one more time with text:
<ScrollView>
<View style={styles.articleContent}>
<View style={styles.p}>
<Text style={{backgroundColor:'pink', width: 300, height: 200}}>
<Text style={styles.textCaption}>Well-known discrete probability distributions used in statistical modeling include</Text>
<Image style={{width: 30, height: 30}} source={{uri: avatarurl}}/>
<Text style={styles.textCaption}> the Poisson distribution, the Bernoulli distribution, the binomial distribution, </Text>
</Text>
<Text style={styles.text}>asdasd asd asd asd asd asdas das das d</Text>
</View>
</View>
</ScrollView>
Ok, the image is not fitting inside the line of the text. I tried some styles like: textAlign, lineHeight. But nothing helps. Is there a way to do this? The image needs to be inside the text:
Like this:
The image may not invade the space of the other line. And the words need to stay in the bottom of the line.
In order to put the image inside the text, you'll have to put the image itself in like this;
<View>
<Text> BIG TITLE </Text>
<Text><Text>Caption text bla bla ajdjj </Text><Image style={{width: 30, height: 30}} source={{uri: avatarurl}}/> More Text bla blah blah blah blahhhhh </Text>
</View>
The problem I'm having is that the image inside the image, is on top of the outside image, the outside image is a half transparent image so I want it to be ON TOP of the nested image, as an overlay image, what can I do?
<Image
style={it}
source={require('../../img/Rarities/red.png')}
>
<View>
{
item[2] != null ?
<View style={{ width: 15, height: 15, backgroundColor: item[2].Color }} />
: null
}
<Image
style={{height:'70%',width:'70%'}}
source={{ uri: item[1].base64 }}
/>
</View>
</Image>
I tried:
changing the zIndex of the images didn't work..
In React Native, components are rendered in the order they are defined - therefore it can be tricky to reverse the order and render a parent on top of a child.
Instead, you can render the images as siblings, and use a parent container component with a little position: absolute trickery to get the images to align on top of each other.
For the following view structure:
<View style={styles.imageContainer}>
<Image source={{uri: image1}} style={styles.bottom} />
<Image source={{uri: image2}} style={styles.top} />
</View>
You can achieve this effect with following styles. See inline comments for explanation:
const styles = StyleSheet.create({
// The container controls the top image size
imageContainer: {
width: 200,
height: 200
},
bottom: {
// horizontal margin: (100% -width) / 2
marginHorizontal: '15%',
// vertical margin: (100% - height) / 2
marginVertical: '15%',
width: '70%',
height: '70%'
},
top: {
// positioned absolutely
position: 'absolute',
opacity: 0.5,
// full width/height of imageContainer
width: '100%',
height: '100%'
},
});
You can see it in action in this Snack demo.
I'm not sure that i understand what are you meaning correctly but you can use the Image components like this if you want to have them inside each other:
<View>
<Image
style={{flex:1}}
source={require('./img/favicon.png')}
/>
<Image
style={{height:'30',width:'30', position:'absolute'}}
source={require('./img/favicon.png')}
/>
</View>
Note: the Image sources and the dimensions should be replaced.
I am adding a React Native Slider component to an existing app, and prefer to utilize its onValueChange prop so that as the user slides the knob left and right, a couple of Text components have their values updated in response to the Slider's current value.
On a first attempt this causes a significant amount of lag after letting go of the slider knob. StackOverflow isn't letting me embed the gif here so I'll leave the link instead: http://imgur.com/sEowpZt
When I comment out onValueChange and use onSlidingComplete instead, there is no lag at all, but the two text components will not have their values updated until the sliding stops, which reduces the effect. My suspicion is that the setState calls inside onValueChange are piling up at a faster rate than than at which they are being processed/completed and it has something to do with other parts of my app. To confirm this, I created a new react native app via react-native init, added that same _renderNameYourPriceModal() to the code, included a button on the screen to open it, and discovered there is no lag at all: http://imgur.com/iZnvDML
How can I determine what is slowing down the setState calls for my existing app? I discovered the React Perf tool and am using it like this to print in the Chrome dev console a summary table.
import Perf from 'react-native/Libraries/Renderer/shims/ReactPerf'
...
componentDidMount() {
setTimeout(() => {
Perf.start()
setTimeout(() => {
Perf.stop()
const measurements = Perf.getLastMeasurements()
Perf.printWasted(measurements)
}, 7000)
}, 1000)
}
According to the Perf docs for printWasted:
printWasted()
Perf.printWasted(measurements)
The most useful part of the profiler.
"Wasted" time is spent on components that didn't actually render
anything, e.g. the render stayed the same, so the DOM wasn't touched.
But I'm not sure how to interpret the results to make the necessary changes. For example, the first four rows of that table when running my app (which has 24 rows in total) looks like this:
I don't know which View the first line, "ItemDetailsScreen > View" inside the Owner > Component column, is referring to because there are 20+ Views on that screen alone. For further context, I'm using React-Navigation and this is a nested screen inside a StackNavigator, although I don't see how updates to this screen's state could cause re-renders in screens further up the hierarchy. Is it necessary to break this screen down further into more custom sub-components so that I override shouldComponentUpdate, or so that the printWasted results tell exactly which areas are at fault?
Here is the function I have for returning the Modal with the Slider inside:
_renderNameYourPriceModal() {
var likelihood = 'Possible'
var lowestVal = 5
var highestVal = 15
if (this.state.nypValue < 6) {
likelihood = 'Nearly Impossible'
} else if (this.state.nypValue < 8) {
likelihood = 'Highly Unlikely'
} else if (this.state.nypValue < 10) {
likelihood = 'Unlikely'
}
return (
<Modal
onRequestClose={() => { this.setState({nypModalVisible: false})}}
animationType={"fade"}
transparent={true}
visible={this.state.nypModalVisible}>
<View style={{paddingTop: 22, height: Dimensions.get('window').height, backgroundColor: 'rgba(252,84,102,0.9)', alignItems: 'center', justifyContent: 'center'}}>
<View
style={{
height: Dimensions.get('window').height * 0.5,
width: Dimensions.get('window').width * 0.9,
backgroundColor: 'white',
borderRadius: 10,
alignItems: 'center'
}}>
<View
style={{flex: 0.8, alignItems: 'center', justifyContent: 'center'}}>
<View style={{flex: 0.25, flexDirection: 'row', width: Dimensions.get('window').width * 0.97, top: -10, alignItems: 'flex-start', justifyContent: 'center'}}>
<View style={{flex: 0.1}}></View>
<View style={{flex: 0.8, alignSelf: 'center', alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 23}}>Name Your Price</Text>
</View>
<View style={{flex: 0.1, top: -5, height: 40, alignItems: 'flex-end', justifyContent: 'flex-end'}}>
<TouchableHighlight
underlayColor={'gray'}
style={{height: 40, width: 40, backgroundColor: 'gray', borderRadius: 20, alignItems: 'center', justifyContent: 'center'}}
onPress={() => {
// close
this.setState({nypModalVisible: false})
}}>
<Text style={{fontSize: 25, color: 'white'}}>X</Text>
</TouchableHighlight>
</View>
</View>
<View style={{flex: 0.25, width: Dimensions.get('window').width * 0.8, alignItems: 'center', justifyContent: 'flex-start'}}>
<View style={{flex: 0.5, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
<View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 19}}>${lowestVal.toFixed(2)}</Text>
</View>
<View style={{flex: 0.6, alignItems: 'center', justifyContent: 'center'}}>
<Slider
style={{width: Dimensions.get('window').width * 0.5}}
maximumValue={15}
minimumValue={5}
step={0.5}
value={this.state.nypValue}
// onSlidingComplete={(val) => {
// this.setState({nypValue: val})
// }}
onValueChange={(val) => {
// change value here
this.setState({nypValue: val})
}}
/>
</View>
<View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 19}}>${highestVal.toFixed(2)}</Text>
</View>
</View>
<Text>${this.state.nypValue.toFixed(2)}</Text>
<Text>Likelihood: {likelihood}</Text>
</View>
<View style={{flex: 0.5, paddingTop: 20, alignItems: 'center', justifyContent: 'flex-start', paddingHorizontal: 10}}>
<Text style={{textAlign: 'center', top: 25, fontSize: 18}}>Let us know the price you'd like to see this item drop to, and we'll let YOU know when it does!</Text>
</View>
</View>
<View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
<TouchableHighlight
style={{height: 50, width: Dimensions.get('window').width * 0.8, alignItems: 'center', justifyContent: 'center', backgroundColor: '#70a8ff', borderRadius: 5}}
underlayColor={'#70a8ff'}
onPress={() => { }}>
<Text style={{fontSize: 20, color: 'white'}}>Set Price Alert</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>
)
}
I'm developing an app with React-Native.
I want to put an icon on right-bottom corner of an image component, but it always stays on the left-top corner.
Any help? Thank you very much.
<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/>
You can use justifyContent: 'flex-end' to achieve this:
const withWatermark = (asset, logo) => (
<Image style={{ width: 200, height: 200, justifyContent: 'flex-end' }} source={asset}>
<Image style={{ width: 20, height: 20, alignSelf: 'flex-end' }} source={logo} />
</Image>
);
You can do something like this...
Use this : position: "absolute", bottom: 0, alignSelf: "flex-end"
<ImageBackground
source={require("../assets/homeAssets/3.jpg")}
style={{
height: 140,
width: 140,
resizeMode: "contain",
alignItems: "center"
}}
imageStyle={{ borderRadius: 70 }}
>
<View
style={{
height: 50,
width: 50,
borderRadius: 25,
backgroundColor: "#99AAAB",
alignItems: "center",
justifyContent: "center",
position: "absolute", //Here is the trick
bottom: 0,
alignSelf: "flex-end"
}}
>
<Entypo name="camera" size={25} color="#FFF" />
</View>
</ImageBackground>