Get same effect as ...StyleSheet.absoluteFillObject without taking up more height - javascript

I have to add location from this stylesheet:
const mapStyles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
location: {
...StyleSheet.absoluteFillObject,
width: 400,
alignItems: 'center',
}
})
to my autocomplete (<Location />) so that on Android the autocomplete list will overflow the other components.
E.G.:
<Container style={mapStyles.location}>
<Location />
</Container>
However it seems to push the elements below the <Location /> down to about the device screen height below it (so there is a full blank screen under the <Location /> and then the other components appear. How do I get the same effect as ...StyleSheet.absoluteFillObject withought moving components below it further down the screen?

StyleSheet.absoluteFillObject will be replaced with this properties (source):
const absoluteFillObject = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
};
It works for your <Location /> component (it needs to be absolute to "overflow" the other elements), but not for your container.
Makes your container full height with flex: 1, the other element in your container and it should work.
const mapStyles = StyleSheet.create({
container: {
flex: 1,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
location: {
...StyleSheet.absoluteFillObject,
width: 400,
alignItems: 'center',
}
})

Related

move a horizontal line to the center in StyledSheets

I have drawn a horizontal line like this. However, it appears towards the left side of the screen. I don't want to increase the width. How else can I move it to the center? I tried wrapping it with another view along with alignContent: 'center' etc but it didn't work for me.
<View style={styles.horizontalLine}></View>
horizontalLine: {
marginTop: 25,
width: '80%',
height: 1,
//alignContent: 'center',
//width: 1,
backgroundColor: '#E0E0E0',
},
Add an alignSelf:'center' like below
horizontalLine: {
marginTop: 25,
width: '80%',
height: 1,
//alignContent: 'center',
//width: 1,
alignSelf: 'center',
backgroundColor: '#E0E0E0',
}
You can give horizontal margin: auto
horizontalLine: {
// ...
marginLeft: 'auto',
marginRight: 'auto',
// ...
},
Try this...
horizontalLine: {
margin: 'auto',
marginTop: 25,
width: '80%',
height: 1,
backgroundColor: '#E0E0E0',
}

React Native can you puts views, with other elements inside, inside a ScrollView

I am trying to create an application using React-Native the page i am working on takes data it is given from a web server to populate a list. i am trying to display 20 entries, this includes an image and a name. i would like to create 20 views that contain this information in a scroll-able view. When i put a view inside of the scroll view it disappears. I am having trouble figuring out how scroll views work exactly, could someone please explain how this is done?
Code:
<View style={commonStyle.container}>
{/* Scrollable View */}
<ScrollView style={toysListStyle.MainContent}>
<View style={toysListStyle.ToyEntry}>
<Image resizeMode="contain" style={toysListStyle.ToyPicture}
source={{uri: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'}}></Image>
<View style={toysListStyle.ToyNameView}>
<Text>Name</Text>
</View>
</View>
</ScrollView>
</View>
const toysListStyle = StyleSheet.create({
MainContent: {
position: "absolute",
left: "0%",
top: "33.5%",
width: "100%",
height: "60.5%",
backgroundColor: "rgba(0,0,0,0.05)",
flex: 1
},
ToyEntry: {
position: "absolute",
width: "100%",
height: "25%",
backgroundColor: "red",
flex: 1
},
ToyPicture: {
position: "absolute",
top: "5%",
left: "5%",
height: "90%",
width: "60%"
},
ToyNameView: {
position: "absolute",
top: "
right: "
height: "100%",
width: "
justifyContent: '
alignItems: 'center'
}
});
const commonStyle = StyleSheet.create({
container: {
position: "absolute",
bottom: 0,
left: 0,
height: windowHeight,
width: "100%",
backgroundColor: "white",
justifyContent: 'center',
alignItems: 'center',
},
I left out the information of the entire page because there is a lot but this is where i am having the problem. If i Change the ScrollView to a View then the View inside shows up, but in a ScrollView It doesn't appear. What am i missing?
You did all things right but...
ToyEntry: {
position: "absolute",
width: "100%",
height: "25%",// This will work if parent contain fixed height like device height or in points and it will divide those value in that ratio...
backgroundColor: "red",
flex: 1
}
So you can add fixed height to ToyEntry or you can add fixed height to
its parent...
I was able to view the content inside ScrollView with a bit change in ToyEntry style, just add height to absolute value instead of %
ToyEntry: {
position: "absolute",
width: "100%",
height: 250,
backgroundColor: "red",
flex: 1
}
Also, the image that you have shared, for some reason is not showing so I changed the image link also to see the result
<Image resizeMode="contain" style={styles.ToyPicture}
source={{uri: 'https://unsplash.it/400/400?image=1'}}
/>

React Native: How do I set a button to be at the level of 70% of the height of its parent?

Suppose I want to position a button 30% of the way the down its parent element (i.e. the whole page) in React Native. How do I do this using Flexbox or some other method?
For example, adding justifyContent: 'center' to the parent element would work if I wanted the button to be 50% of the way down the page.
Here is my React layout / stylesheet:
<View style={styles.container}>
<LinearGradient colors={['#e80ca3', '#e500ff', '#950ce8']} style={styles.linearGradient}>
<View style={styles.scanContainer}>
<View style={styles.scanButton} />
</View>
</LinearGradient>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
linearGradient: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'center', // What to put here to make `scanContainer` 30% instead of 50% of the way down?
},
scanContainer: {
alignSelf: 'center',
},
scanButton: {
width: 175,
height: 175,
borderRadius: 87.5,
backgroundColor: 'green',
},
});
Here's the solution using flex properties
linearGradient: {
flex: 1,
alignSelf: 'stretch', //... Remove justifyContent: 'center',
},
scanContainer: {
flex: 0.7,
justifyContent: 'flex-end', // 30 % from the bottom
alignSelf: 'center',
},
You can add an empty View with flex 0.7 above the button:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.7 }} />
<Button title="button" />
</View>
You can use absolute positioning for the button container.
scanContainer: {
alignSelf: 'center',
position: 'absolute',
bottom: '30%',
left: 0
}
Using flex:
<View style={[styles.scanContainer,{flex:1}]}>
<View style={{flex:1}} />
<View style={styles.scanButton} />
<View style={{flex:2}} />
</View>
Using Dimension:
import {Dimensions} from 'react-native';
<View style={[styles.scanButton,{marginTop:Dimensions.get('window').height * 0.3}]} />

React Native - how to catch touch events behind an absolute position component

I'm trying to have a popup dialog (created as a component with position: 'absolute') and to close it when user clicks outside of the popup.
I'm new to React Native so other things I did might be wrong, forgive me for that :)
This is a screenshot of the popup when it is open
This is some of the code:
From the Popup component:
render() {
if (!this.props.open) {
return <View />
}
return (
<View style={styles.container}>
<View style={styles.popupStyle}>
<View style={{flex:1, justifyContent: 'center', marginRight: 10}}>
<View style={styles.amountEnterStyle}>
<TextInput
keyboardType={'numeric'}
underlineColorAndroid='transparent'
autoCorrect={false}
style={styles.textInputStyle}
value={this.state.amount}
onChangeText={this._onAmountEnter.bind(this)} />
<Text style={styles.currencyTextStyle}>NIS</Text>
</View>
<View style={styles.separatorStyle} />
<View style={styles.categorySectionStyle}>
{this._renderCategoryDropdown()}
</View>
</View>
<View style={{justifyContent: 'center'}}>
<TouchableWithoutFeedback
onPress={this._onAddPaymentClicked.bind(this)} >
<View style={{width: 110, height:100, backgroundColor: "#ff0000"}} />
</TouchableWithoutFeedback>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
},
amountEnterStyle: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
textInputStyle: {
width: 100,
fontSize: 50,
fontWeight: 'bold',
height: 65,
flex: 1,
marginTop: -20,
paddingBottom: 0,
marginBottom: 0,
marginLeft:10,
textAlignVertical: 'center'
},
currencyTextStyle: {
fontSize: 50,
color: '#c0c0c0',
marginTop: -20,
textAlignVertical: 'center'
},
separatorStyle: {
height: 2,
marginTop: 0,
backgroundColor: '#c0c0c0',
},
categorySectionStyle: {
justifyContent: 'flex-start',
flexDirection: 'row',
alignItems: 'flex-start',
marginTop: 8
},
categoryColorDotStyle: {
width: 20,
height: 20,
borderRadius: 100/2,
marginLeft: 10,
marginTop: 5,
},
categoryTextStyle: {
fontSize: 24,
marginHorizontal: 4,
color: '#c0c0c0',
marginLeft: 10,
paddingRight: 10,
marginTop: -3
},
popupStyle: {
width: Dimensions.get('window').width - 60,
flexDirection: 'row',
justifyContent: 'space-between',
height: 150,
paddingRight:10,
paddingLeft:10,
borderRadius: 2,
margin: 20,
padding: 10,
opacity: 1,
borderRadius: 10,
backgroundColor: '#ffffff'
},
dropdownSeparator: {
height: 1,
backgroundColor: 'cornflowerblue'
},
And this is the hosting component:
render() {
var totalIncome = this.props.balance.totalIncome;
var totalExpanses = this.props.balance.totalExpanses;
return (
<View style={{flex:1, justifyContent: 'space-between'}}>
<Image pointerEvents='none' source={require('../../res/background.png')} style={styles.container} />
<MainScreenHeader onSettingPress={this._onBalanceSettingsPress.bind(this)}/>
<MainBalanceCounter totalCount={totalIncome} currentCount={totalIncome-totalExpanses} />
<View style={{justifyContent: 'center', alignItems: 'center', marginBottom: 150}}>
<AddPaymentButton onPress={this._onAddPaymentPress.bind(this)} />
<PaymentPopup
open={this.state.paymentPopupOpen}
onAddPaymentClicked={this._onPaymentPopupAddClicked.bind(this)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
},
innerContainer: {
justifyContent: 'space-around',
alignItems: 'center',
flex: 1,
backgroundColor: 'transparent'
},
});
I was trying man things to have a view that will catch clicks that happens outside of the popup, but no success.
Any help will be much appreciated,
Thanks,
Giora.
have you tried out react-native-modalbox? I use it in my applications and it works pretty great. If you have touch events behind the modal, it will close. Also, you can define how large you'd like the modal to be. It doesn't have to take up the whole screen.
Otherwise, you were on the right track. You'd need a TouchableWithoutFeedback component that covers the full width and height of the screen. Your popup would be alongside of this component with a higher zIndex. Let me know if you'd like to go this route and I can provide more advice. Cheers!

react native absolute positioning not working

My button in the code below is positioned absolutely but it isn't working. It is taking up space in its containing view and it is not allowing the image to be below it.
<View style={{
justifyContent: 'flex-end',
alignItems: 'center',
flexDirection: 'row',
flex: 0.5,
borderRadius: 8
}}>
<Image
style={mapStyles.avatar}
source={props.image} />
<Button
small
icon
style={{
positon: 'absolute',
right: -5,
top: -5,
width: 20,
height: 20,
zIndex: 50,
elevation: 10,
borderRadius: 10,
backgroundColor: '#FF3B3F',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 1
},
shadowRadius: 1,
shadowOpacity: 1.0
}}
onPress={() => props.updateImage(null)}>
<Icon style={locationStyle.deleteLocationButtonIcon}
name="close-o" size={22} color="#9E9E9E" />
</Button>
</View>
The button is the pink bit:
The button needs to be in the top right corner of the image, It is a cancel button. The image should be to the far right where the button is. I have experienced absolute positioning not working in react native before. Is this a bug or am I doing it wrong?
image styles:
avatar: {
width: 100,
height: 100
}
Try nesting your button inside of the Image like
<Image>
<Button />
</Image

Categories

Resources