<View style={{ width: "100%",
minHeight: 100,
paddingHorizontal: 17}}>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
flexWrap: "wrap",
boxSizing: "borderBox",
height: 56,
width: 312,
borderWidth: 1,
borderColor: "#FF6D00",
borderRadius: 2,
marginTop: 24,
paddingBottom: 10
}}
>
<SVGImg width={10} height={10} />
<Text h7 >
Feature is not there for this particular page.
<TouchableOpacity
onPress={() => this._onClickWhatisit()}
>
<Text h7>
What is it
</Text>
</TouchableOpacity>
</Text>
</View>
</View>
Output what i need should be in same line image then text and all in center and left aligned.That react native image should come before Feature text with some space.
Heres a full example of what I think you want (https://snack.expo.dev/#heytony01/great-waffles). Basically what I did was put two views next to each other as columns. Put the icon in one and the text in the other
Related
I have image background with "3 level circle shape" (see image)
I would like to set text "hello" into center of circles. Looks like its almost imposible for all devices.
How can I do it?
Mu current code is:
return (
<ImageBackground source={background} resizeMode="cover" style={{ width: '100%', height: '100%' }}>
</ImageBackground>
I tried to use absolute position, but it is bronek on second device. Is there any trick?
Original image size (in asset folder) is 1080x2400
Thank you.
Why not create the circles manually? That way centering can be taken care of automatically. Example (you'll have to tweak values/add circles):
<View style={{ flex: 1, backgroundColor: '#F9F3EE' }}>
<View
style={{
backgroundColor: '#F6EFF2',
top: -100,
width: 700,
height: 700,
left: -(700 - Dimensions.get('window').width) / 2,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 350,
}}
>
<View
style={{
backgroundColor: '#ECE4DD',
width: 500,
height: 500,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 250,
}}
>
<View
style={{
backgroundColor: '#E2D7D0',
width: 300,
height: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 150,
}}
>
<Text>Hi</Text>
</View>
</View>
</View>
</View>
I want to cut a little bit background color to let the text half with it.
I try to use marginBottom, but the text position will move with it.
return (
<View style={{ flex: 1, backgroundColor: 'pink' }>
<View style={{ felx: 1, backgroundColor: 'blue', marginBottom: 40, justifyContent: 'flex-end' }}>
<Text style={{ fontSize: 86, color: 'white' }}>Half</Text>
</View>
</View>
);
Is any simple way can achieve it ?
Thanks.
My idea is a bit different. Try to insert another View & give position: 'absolute' to that view as below,
<View style={{ flex: 1, backgroundColor: 'pink' }}>
<View style={{ flex: 1, backgroundColor: 'blue', marginBottom: 40, justifyContent: 'flex-end' }}>
<View style={{ bottom: -43, position: 'absolute' }}>
<Text style={{ fontSize: 86, color: 'white' }}>Half</Text>
</View>
</View>
</View>
When you assign value to bottommake sure to gave half of the font size.
Hope this helps you. Feel free for doubts.
In my screen, I need to split the text into column view and need to align the right side text with the left side text. also, need to show the whole text line by line. Tested with giving some height, width, position: absolute but didn't work. Any idea how to solve this?
I'll post my current code and screenshot for your ref.
Many thanks for your help
<View style={styles.twoCol}>
<View style={styles.leftField}>
<Text style={styles.leftFieldTitle}>Location:</Text>
</View>
<View style={styles.locationRightSide}>
<Text style={styles.rightFieldTitle}>{location}</Text>
</View>
</View>
const styles = StyleSheet.create({
twoCol: {
alignItems: 'center',
flexDirection: 'row',
marginTop: 25,
},
leftField: {
alignItems: 'flex-end',
width: '25%',
},
leftFieldTitle: {
fontWeight: '700',
color: 'black'
},
},
locationRightSide: {
width: '70%',
alignItems: 'flex-start',
paddingLeft: 10
},
rightFieldTitle: {
fontSize: RF(2.8),
color: 'black'
},
)}
Problem solved!!! Thanks everyone!
<View style={{
padding: 10,
flexDirection: "row",
marginLeft: 10,
marginRight: 5,
marginTop: 5,
marginBottom: 3,
justifyContent: "flex-start",
width: '95%',
}} >
<View style={{
position: 'absolute',
marginTop: 10
}}>
<Text style={styles.leftFieldTitle}>Location:</Text>
</View>
<View style={{ marginLeft: '26%' }}>
<Text style={styles.rightFieldTitle}>{location}</Text>
</View>
</View>
I would like to render an horizontal scroll view with two rows of items, where the items have dynamic sizes. I have already tried to set a height to the scroll view and apply to its containerStyle flex-wrap with flex direction column, as suggested here React Native horizontal FlatList with multiple rows.
However, the result is not as expected since two elements in a column take the same size.
<View style={{height: 80}}>
<ScrollView
horizontal={true}
containerStyle={{
flexDirection: "column",
flexWrap: "wrap",
alignItems: "flex-start"
}}
>
{data.map(d => renderElement(d))}
</ScrollView>
</View
renderElement = (d: string) => (
<View
style={{
justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: "#898989",
backgroundColor: "white",
borderRadius: 12,
margin: 3,
height: 24
}}
>
<Text style={{marginHorizontal: 8, fontSize: 16, color:"#898989#"}}>
{d}
</Text>
</View>
)
current result:
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>