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>
Related
I'm trying to fit my background image to cover the whole app but its not, even though i've tested most of similar threads here so any help is appreciated.
I've made some changes to the original source and added an arrow towards the left edge of the image that i was hoping to have at the edge when i open up the EXPO app on my phone, but i only see a few pixels of the arrow at the left edge.
**app.js**
function HomeScreen() {
return (
<ImageBackground source={require('./assets/bgImage.jpg')} style={styles.bgImage}>
<View>
<Text>Home Screen</Text>
</View>
</ImageBackground>
);
}
bgImage: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover',
justifyContent: 'center',
alignItems: "center"
}
try this :-
import React from 'react';
import { ImageBackground, View, Text } from 'react-native';
const HomeScreen = () => {
return (
<ImageBackground source={require('../assets/apple.jpg')}
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
flex: 1,
alignItems: "center"
}}>
<View style={{
width: '90%',
height: 200,
backgroundColor: "red",
justifyContent: "center",
alignItems: "center",
}}>
<Text>Home Screen</Text>
</View>
</ImageBackground>
);
}
export default HomeScreen;
It is working fine.
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 was creating a view using react native where the following should be the outcome.
But it's coming as follows :
The corresponding code is as follows :
<View style={{marginBottom: 40, marginHorizontal: 30, marginTop: 16, alignItems: "center"}}>
<View>
<View style={{flexDirection:"row"}}>
<FontAwesome5 name='wallet' size={24}/>
<Text style={{fontSize: 18, marginLeft: 16}}>Wallet</Text>
</View>
<Text style={{fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4}}>{`Available Balance \u20B9 200`}</Text>
</View>
<View style={{marginTop: 10}}>
<View style={{flexDirection:"row"}}>
<FontAwesome5 name='credit-card' size={24}/>
<Text style={{fontSize: 18, marginLeft: 16}}>Card</Text>
</View>
<Text style={{fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4}}>XXXXXX 1235</Text>
</View>
</View>
I ma just copy pasting the 1st child view to make to second in the main View. Why then the positioning is incorrect in this scenario ? Any help would be appreciated.
This issue is because of not giving the fixed width to the view and the due to the text length.
<View style={{ marginBottom: 40, marginHorizontal: 30, marginTop: 16, alignItems: "center" }}>
<View style={{ backgroundColor: 'red' }}>
<View style={{ flexDirection: "row" }}>
<Icon name='wallet' size={24} />
<Text style={{ fontSize: 18, marginLeft: 16 }}>Wallet</Text>
</View>
<Text style={{ fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4 }}>{`Available Balance \u20B9 200`}</Text>
</View>
<View style={{ marginTop: 10, backgroundColor: 'red' }}>
<View style={{ flexDirection: "row" }}>
<Icon name='wallet' size={24} />
<Text style={{ fontSize: 18, marginLeft: 16 }}>Card</Text>
</View>
<Text style={{ fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4 }}>XXXXXX 1235 dfasdfasdfas</Text>
</View>
</View>
This will be the output of the above code I write more text.
Answer:
So if you give the fixed width to the view like:
<View style={{ marginBottom: 40, marginHorizontal: 30, marginTop: 16, alignItems: "center" }}>
<View style={{ width:'50%' }}>
<View style={{ flexDirection: "row" }}>
<Icon name='wallet' size={24} />
<Text style={{ fontSize: 18, marginLeft: 16 }}>Wallet</Text>
</View>
<Text style={{ fontSize: 12, marginLeft: 16, alignSelf: "center", marginTop: 4 }}>{`Available Balance \u20B9 200`}</Text>
</View>
<View style={{ marginTop: 10, width:'50%' }}>
<View style={{ flexDirection: "row" }}>
<Icon name='wallet' size={24} />
<Text style={{ fontSize: 18, marginLeft: 16 }}>Card</Text>
</View>
<Text style={{ fontSize: 12, marginLeft: 16, alignSelf: "center", marginTop: 4 }}>XXXXXX 1235</Text>
</View>
</View>
The Output will be this:
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 trying to make a slider animation, like the one you get when you power off iOS on iPhones. This is what I have so far and it is self-contained.
import {PanResponder, View, Text, Dimension} from 'react-native';
const {width} = Dimension.get('window');
const TOTAL_WIDTH = width - 50;
class slider extends React.Component {
t = <Text>Slide to Export & Delete</Text>;
state = {
button_translate_x: 0
};
move_right(event, dx) {
if (dx > 0 && event.nativeEvent.pageX <= TOTAL_WIDTH) {
if (dx === width - 50) {
this.setState({button_translate_x: 0});
} else {
this.setState({button_translate_x: dx});
}
}
}
release_handler(e, gs) {
const diff = Math.abs(e.nativeEvent.pageX - TOTAL_WIDTH);
if (diff <= 5) {
this.setState({button_translate_x: gs.dx});
} else {
this.setState({button_translate_x: 0});
}
}
pan_responder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
this.move_right(evt, gestureState.dx);
},
onPanResponderRelease: (evt, gestureState) => {
this.release_handler(evt, gestureState);
}
});
smoothing_margin() {
if (this.state.button_translate_x <= 25)
return Math.abs(this.state.button_translate_x - 20);
else return 0;
}
render() {
return (
<View style={{alignItems: 'center'}}>
<View
style={{
alignItems: 'center',
borderRadius: 25,
width: TOTAL_WIDTH,
backgroundColor: 'orange'
}}>
<View
style={{
width: this.state.button_translate_x,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
backgroundColor: 'blue',
borderRadius: 25,
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
marginVertical: this.smoothing_margin()
}}
/>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -2
}}>
{this.t}
</View>
<View
style={{
alignSelf: 'flex-start',
width: 50,
transform: [{translateX: this.state.button_translate_x}],
height: 50,
borderRadius: 25,
backgroundColor: 'red'
}}
{...this.pan_responder.panHandlers}
/>
</View>
</View>
);
}
}
But this is wrong though because the initial slide has the blue coming out of the rounded bounds of the orange view. I have tried to be clever with this with marginVertical but not sure if that is the correct way to go about it.
Sliding all the way to the right is incorrect because the blue should be covering at least to the middle of the circle but as currently written only goes up to the left side.
Help appreciated.
Figured it out!
import {PanResponder} from 'react-native';
const TOTAL_WIDTH = width - 50;
class slider extends React.Component {
t = <Text>Slide to Export & Delete</Text>;
state = {button_translate_x: 0};
pan_responder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, {dx}) => {
if (dx > 0 && TOTAL_WIDTH - 50 >= dx) {
this.setState({button_translate_x: dx});
}
},
onPanResponderRelease: ({nativeEvent: {pageX}}, {dx}) => {
if (TOTAL_WIDTH - 50 - dx <= 5) {
console.log('Success zone');
} else {
this.setState({button_translate_x: 0});
}
}
});
render() {
return (
<View style={{alignItems: 'center'}}>
<View
style={{
alignItems: 'center',
borderRadius: 25,
width: TOTAL_WIDTH,
backgroundColor: 'orange'
}}>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -2
}}>
{this.t}
</View>
<View
style={{
alignSelf: 'flex-start',
width: 50,
transform: [{translateX: this.state.button_translate_x}],
height: 50,
borderRadius: 25,
backgroundColor: 'red'
}}
{...this.pan_responder.panHandlers}
/>
<View
style={{
borderRadius: 25,
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: 'blue',
height: 50,
width: this.state.button_translate_x + 50,
zIndex: -1
}}
/>
</View>
</View>
);
}
}