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 >
Related
With react-native for windows UWP I have the following JSX:
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1, flexDirection: 'column', margin: 5, alignItems: 'stretch' }}>
<View style={{ flexDirection: 'row' }}>
<Text selectable={true} style={{ textAlign: 'right', flex: 1 }}>Average:</Text>
<Text selectable={true} style={{ flex: 2 }} > {this.props.averageValue} C</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Text selectable={true} style={{ textAlign: 'right', flex: 1 }}>Last:</Text>
<Text selectable={true} style={{ flex: 2 }}> {this.props.lastValue} C</Text>
</View>
</View>
</View>
Which lays out the Average and Last text so they're aligned with the colons like so:
Visually this is what I want, but I can't select the text of an entire line at once. Only each individual text element is selectable. If I wrap the two text blocks with an outer text block like this:
<View style={{ flexDirection: 'row' }}>
<Text selectable={true}>
<Text style={{ textAlign: 'right', flex: 1 }}>Average:</Text>
<Text style={{ flex: 2 }} > {this.props.averageValue} C</Text>
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Text selectable={true}>
<Text style={{ textAlign: 'right', flex: 1 }}>Last:</Text>
<Text style={{ flex: 2 }}> {this.props.lastValue} C</Text>
</Text>
</View>
Then my text is selectable like I want, but the layout changes to this:
How can I get the layout I want and all of the text to be selectable? Do I have to use explicit widths or can this be done with flexbox?
This doesn't appear to be possible. The only way to make them all selectable is to wrap them in an outer Text element. However text boxes do not participate in Flexbox layout so the alignment I want cannot be achieved.
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.
I have a problem where the two materialicons / touchables in the view can't be clicked. (refer to the code section with the View and zIndex.
I may just be nesting the views wrongly.
When i add a zIndex, it fixes for IOS, but dosen't work for Android.
When i remove the ZIndex, it fixes for Android but dosen't work for IOS.
When i remove the whole it works on both, but i lose the
ability to do the space-between as i want to put the icons on the
opposite end of the row.
Would love some advice on why this is the case. Thank you.
<Modal
visible={props.showFilter}
backdropOpacity={0.3}
transparent={true}
animationType={'slide'}
>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center'}}>
<View style={{
backgroundColor:'white',
width: wp('100%'),
height: hp('80%')}}>
>>> <View style={{zIndex:10, flexDirection: 'row', justifyContent: 'space-between'}}>
<TouchableOpacity
onPress={()=> props.close()}
style={{ zIndex:10, paddingHorizontal: 10,top: hp('5%') }} >
<MaterialIcon
name="close"
size={30}
color="#828282"
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=> props.showHelp(true)}
style={{ zIndex:10, paddingHorizontal: 10,top: hp('5%') }} >
<MaterialIcon
name="help"
size={30}
color="#828282"
/>
</TouchableOpacity>
</View>
<View style={{flex:1, alignItems: 'center', paddingTop: 40,}}>
<Text style ={{ fontSize:wp('3.5%'),
fontFamily: 'Gilroy-Bold',
color: '#4F4F4F',
marginBottom: hp("2%"),}}>Filter</Text>
</View>
</View>
</View>
</Modal>
I took a crash course on flex and solved it using good flex skills then relying on Z-Index
https://medium.com/#ManningBooks/in-depth-styling-with-react-native-and-flexbox-ee1bda2c5b24
<View style={{flex:1}}>
<View style ={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<TouchableOpacity
onPress={()=> props.show(false)}
style={{ flex:1, paddingHorizontal: 10,top: hp('5%') }} >
<MaterialIcon
name="close"
size={30}
color="#828282"
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=> console.log("onpress")}
style={{ flex:0, paddingHorizontal: 10,top: hp('5%') }} >
<Text
style ={{
color: "#828282",
fontFamily: 'Gilroy-Regular',
textDecorationLine: 'underline',
fontSize:wp('3.5%')}}> Refresh </Text>
</TouchableOpacity>
</View>
<View style ={{flex:8, alignItems: 'center'}}>
<Text style ={{ fontSize:wp('3.5%'),
fontFamily: 'Gilroy-Bold',
color: '#4F4F4F',
marginBottom: hp("2%"),}}>Filter Tags</Text>
<Text style={{
marginBottom: hp("2%"),
color: "#828282",
fontFamily: 'Gilroy-Regular',
fontSize:wp('3.5%'),
width: '80%'
}}>
text
</Text>
</View>
</View>
I've had a problem with my ScrollView for a few days, it doesn't want to scroll all the way down. However when I remove the View above the ScrollView, there is no more problem, but that is not what I am trying to do. Using a paddingBottom in the contentContainerStyle doesn't seem like the best solution in my opinion. Do you know how to fix this? And also, the flex: 1 bottom everything disappears.
This is a base on my component
Demo: https://gyazo.com/9e1425b3ebf582112813b02b02750192
<View style={{}}>
<View style={{
paddingBottom: 23,
backgroundColor: '#b61414',
}}>
<SafeAreaView>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', marginLeft: 20, marginRight: 20 }}>
<View>
<View style={{ marginRight: 15 }}></View>
</View>
<View>
<Text maxFontSizeMultiplier={1} style={{ color: '#fff', fontWeight: '500', fontSize: 18 }}>{this.props.loggedIn.pseudonyme}</Text>
</View>
<View>
<TouchableOpacity style={{ paddingBottom: 10, marginTop: 12 }} onPress={() => this._actionProfile()}>
<Icon maxFontSizeMultiplier={1} color="#fff" type="ionicon" name="ios-more" />
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
</View>
<ScrollView>
</ScrollView>
</View>
Thank !
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>