Trying to use put space-between and stretch out the buttons that appear in the overlay pop-up screen using flexbox. This is a child view of the main view of the screen. Nothing but alignItems: 'center' seems to be working to align these buttons.
Any help to get the other flexbox properties to work on this child view would be much appreciated
<View style={{ flex: 1 }}>
<ImageBackground
style={{ width: Dimensions.get("window").width, height: 300 }}
source={require("../../resources/img/image.jpeg")}
/>
<View style={{ marginTop: -20, paddingLeft: 20, paddingRight: 20 }}>
<MainButton onPress={this.openOverlay} size={MainButtonSize.medium}>
{this.bookButton}
</MainButton>
</View>
<Overlay
visible={this.state.modalVisible}
onClose={this.onClose}
closeOnTouchOutside
animationType="zoomIn"
containerStyle={{ backgroundColor: "rgba(255, 255, 255, 0.78)" }}
childrenWrapperStyle={{ backgroundColor: "red" }}
animationDuration={350}
>
{(hideModal, overlayState) => (
<View style={{ alignItems: "center" }}>. <== THIS VIEW
<MainButton size={MainButtonSize.large} onPress={this.onStaffPress}>
{this.staffButton}
</MainButton>
<MainButton size={MainButtonSize.large} onPress={this.onServicesPress}>
{this.serviceButton}
</MainButton>
<MainButton size={MainButtonSize.small} onPress={this.onClose}>
{this.closeButton}
</MainButton>
</View>
)}
</Overlay>
</View>
Please try to set flex: 1 in the View tag
Related
I am trying to create a TouchableOpacity after a FlatList in react native. Although it's coming under the view but there is a huge gap between the list and the button.
Following is the corresponding code :
<FlatList keyExtractor={(payment) => payment.iconFont} style={{ alignSelf: "center" }} data={payments} renderItem={({ item }) => {
return <View style={{ width: '100%', marginTop: 32 }}>
<View style={{ flexDirection: "row" }}>
<View>
<FontAwesome5 name={item.iconFont} size={32} />
</View>
<View>
<Text style={{ fontSize: 18, marginLeft: 16 }}>{item.mainText}</Text>
<Text style={{ fontSize: 12, marginLeft: 12 }}>{item.SubText}</Text>
</View>
</View>
</View>
}} />
<TouchableOpacity style={styles.button}>
<Text style={{ color: "#FFF", fontWeight: "500", fontSize: 20 }}>PAY</Text>
</TouchableOpacity>
I am doing something wrong over here ?
P.S. => Although FlatList is working fine
the corresponding styles :
button: {
backgroundColor: "#000000",
height: 40,
alignItems: "center",
justifyContent: "center",
borderRadius: 20
}
Move the Touchable Opacity into Flatlist's listfootercomponent prop. Like this:
<FlatList
ListFooterComponent={<TouchableOpacity> .... </TouchableOpacity>}
/>
This should solve the spacing problem. And place the TouchableOpacity component always at the bottom of the FlatList.
Change the rectangular view into quadrilateral view through style
I need to have the quadrilateral background in the view. If it can be done through style, it will be great. Otherwise I've use the image as its background. I dont want to do it however since it wil increase app size as well.
<View>
<Image source={{uri: 'https://previews.123rf.com/images/jaboy/jaboy1706/jaboy170600065/79609763-new-green-light-scenery-background.jpg'}}
style={{width:200, height: 70 }} />
<View style={{ backgroundColor: 'red', padding: 10, paddingTop: 25 }}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
</View>
how it looks now
how I want it to look like
You can achieve this by using 2 views.
<View>
<View
style={{
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 200,
borderTopWidth: 30,
borderLeftColor: 'red',
borderTopColor: 'transparent',
}}
/>
<View style={{ height: 70, width: 200, backgroundColor: 'red' }}>
<Text>A</Text>
</View>
</View>
click to see design
I'm having a problem positioning the white floating button on top of the blue header. The button is a TouchableOpacity inside a View which has Header and a ScrollView. How do I position the button on top of the blue header and scrollview?
<View style={{ flex: 1 }}>
<Header headerText={'Events'} />
<TouchableOpacity
style={styles.addButtonContainerStyle}
onPress={ () => {Actions.addEventMain()} }
>
<Text style={styles.addButtonTextStyle}>+</Text>
</TouchableOpacity>
<EventList />
</View>
Below code would help. Absolute position of views sometimes becomes hard to maintain when code grows. You need to customise below code as per your need.
<View style={{ backgroundColor: "blue", flexDirection: "row-reverse" }}>
<TouchableOpacity style={{ alignSelf: "flex-end" }}>
<Text style={{ justifyContent: "center", fontSize: 20, textAlign: 'center' }}>
+
</Text>
</TouchableOpacity >
<View style={{ flex: 1 }}>
<Text style={{ alignSelf: "center", fontSize: 20, textAlign: 'center' }}>
Event
</Text>
</View>
</View >
I have been struggling to align two items in the following positions: the first one should be on the left side of the row and the second element needs to be in the center of the row.
The following code below does not fully center my second element:
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{paddingRight: 10 }}>
<Text>
CENTER
</Text>
</View>
{/* Empty view so that space-between works? */}
<View
style={{paddingRight: 10 }}>
</View>
</View>
This was the closest I could get to the result I wanted. However, it does not do the trick. Could anyone know the best way to implement this successfully?
You need to add flex: 1 to parent View and children Views (all children will have flex: 1 if you want them all to be of equal size, otherwise define width/flex for each child View individually).
Try this:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ flex: 1, paddingRight: 10 }}>
<Text style={{ textAlign:'center' }}>CENTER</Text>
</View>
<View
style={{ flex: 1, paddingRight: 10 }}>
</View>
</View>
Added style={{ textAlign:'center' }} to Text in center View child to give you an idea of its centered position. You can modify/remove it.
When I learned Android, I was told not to use too many 'layers' of components. In that philosophy, I decided to use 'absolute' property to the left element to achieve a simpler result. In this scheme, the 'left' item is almost stick to the left wall.
<View
style={{
height: 50,
flexDirection: 'row', // a must
alignItems: 'center', // to make items center vertically.
justifyContent: 'center' // to make the second item center horizontally.
}}
>
<MaterialIcons
style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
name='arrow-back'
onPress={() => {
navigation.goBack();
}}
/>
<Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: 50, height: 50}}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ width: 50, height: 50}}>
<Text>CENTER</Text>
</View>
<View style={{ width: 50, height: 50}}/>
</View>
I have added a dropdown and when I open it, the dropdown menu is hidden behind the views that have been added afterwards. How can I bring the dropdown view to front in react-native. I have now used an overlay and it brings the view to front but the view is not set in its normal location, instead it is displaying as the top most element.
In main render I have a listView:
<ListView ref='listView'
style = {{ backgroundColor: '#EAEAEC'}}
dataSource={this.state.dataSource}
automaticallyAdjustContentInsets={false}
renderRow={this.renderRow}/>
In render row of listView:
return (
<View style={{backgroundColor: '#FFF', marginBottom:5, shadowColor : '#BCBCBC', shadowOffset: {width: 0, height: 0}, shadowOpacity: 0.7, height:150}} >
<View style={{flex:1, flexDirection:'row',justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', height:100}}>
<Overlay isVisible={true}><List /></Overlay>
</View>
<View style={{flex:5, flexDirection:'row',justifyContent: 'flex-end', alignItems: 'center', paddingTop:17, marginBottom:10}}>
<View style={{flex:1}}/>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_new_u.imageset/audit_new_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_inProcess_u.imageset/audit_inProcess_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_complete_s.imageset/audit_complete_s.png')} /></View>
<View style={{flex:1}}/>
</View>
</View>
);
Now the dropdown which is actually the List tag in render row which I have placed in overlay tags is now placed on top of the screen.
Add {zIndex: 999}
<View style={{zIndex: 999}}>
{...anything}
</View>
You have to make sure all the sub views inside your main view have a zIndex style property.
Like so:
const [myIndex, setMyIndex] = useState(1)
<View>
<View style={{zIndex: 3}}></View>
<View style={{zIndex: myIndex}}>
<Button onPress={() => setMyIndex(4)} title='Press to show above the other' />
</View>
<View style={{zIndex: 2}}></View>
</View>
Just add zIndex: -1 in the style of the view, you want to go behind in the hierarchy.
appActivityIndicatorOverlay: {
height: '100%',
width: '100%',
opacity: 0.8,
position: 'absolute',
elevation: (Platform.OS === 'android') ? 50 : 0,
backgroundColor: 'white',
color: theme.colors.brand.primary,
zIndex: 100
},