<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: 7,
}}>
<Text style={{ color: '#000', fontSize: 25 }}>Status:
<Text style={{
color: "#000", fontSize: 20, width: 210,
// marginTop: 5
}}>{data.status_url}
You can add alignSelf: "center"
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: 7, }}>
<Text style={{ color: '#000',alignSelf: 'center', fontSize: 25 }}>Status: </Text>
<Text style={{ color: "#000",alignSelf: 'center', fontSize: 20, width: 210 }}> {{data.status_url}</Text>
</View>
Related
<View
style={{
flexDirection: 'row',
alignItems: 'center',
height: 130,
marginVertical: 10,
overflow: 'hidden'
}}
>
<Image
source={{
uri: props.image_medium
}}
style={{
height: 120,
width: 120,
borderRadius: 10
}}
/>
<View style={{ marginLeft: 10 }}>
<Text
style={{
fontFamily: 'Montserrat_bold',
fontSize: 14,
color: Colors.NewBlue
}}
>
{props?.title.trim()}
</Text>
I'm trying to make the title not crop and continue on the next line instead but the result is as you can see in the photo
so I just added flex:1 to the containing view
<View
style={{
flexDirection: 'row',
alignItems: 'center',
height: 130,
marginVertical: 10,
overflow: 'hidden'
}}
>
<Image
source={{
uri: props.image_medium
}}
style={{
height: 120,
width: 120,
borderRadius: 10
}}
/>
<View style={{ marginLeft: 10, flex:1}}> // right here
<Text
style={{
fontFamily: 'Montserrat_bold',
fontSize: 14,
color: Colors.NewBlue
}}
>
{props?.title.trim()}
</Text>
and voila
**How can i make this list smooth? Now its crooked,( 2 and 3 column)
Im trying to do it with marginLeft and marginRight but result is the same. Maybe i shuold use 1 more flatlist i dont know. pls help who knows
**
<FlatList
data={currencyList}
renderItem={({item, index}) => {
let priceColor = item.change24h == 0
? "#757575"
: item.change24h > 0
? "#4BEE70" : "#D84035"
return (
<View style={{
flex: 1,
flexDirection: 'row',
marginBottom: 10,
borderBottomColor: "black",
borderBottomWidth: 1,
alignItems: 'center',
justifyContent: 'space-between'
}}>
{/*Symbol*/}
<View
style={{
marginRight: 20,
}}
>
<Text
style={{
fontSize: 18,
flex: 1,
textAlign: 'left'
}}>
{item.symbol}
</Text>
</View>
{/*Ask*/}
<View style={{
marginRight: 20,
marginLeft: 20,
width: 80,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{
flex: 1,
fontSize: 18,
textAlign: 'left',
alignItems: 'center',
justifyContent: 'center'
}}>
{item.ask}
</Text>
</View>
<View style={{
alignItems: 'center',
justifyContent: 'center'
}}>
<Text
style={{
marginRight: 20,
color: priceColor,
fontSize: 18,
alignItems: 'center',
justifyContent: 'flex-start'
}}
>
{item.change24h}
</Text>
</View>
<View style={{
flexDirection: 'row',
}}>
<Text style={{
textAlign: 'right'
}}>
{item.change24h.toFixed(2)}
</Text>
{
item.change24h != 0 &&
<Image
source={icons.upArrow}
style={{
width: 20,
height: 20,
tintColor: priceColor,
transform: item.change24h > 0 ? [{rotate: "45deg"}] : [{rotate: "125deg"}]
}}
/>
[image of flatlist][1]https://i.stack.imgur.com/8OjNA.png
[1]: https://i.stack.imgur.com/8OjNA.png
Good morning everyone, I wanted to ask you about this problem I'm having with my React Native App. Basically it treats that my StatusComponent occupies 100% of the width of its container. I tried in many ways but I can't make its width independent. I share some images and part of my code so it is easier to understand.
In this case the width of the status component its okey because the name of the Event, is smaller than the width of the status component:
Link to Image
MatchComponent Code:
<TouchableOpacity
onPress={() => console.log('Test')})
}>
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 1, y: 2}}
colors={['#FE7062', '#FE8762']}
style={styles.matchContainer}>
<View style={styles.subContainer}>
<View
style={[
styles.footballContainer,
{
backgroundColor: '#4D6FE2',
},
]}>
<Text
style={[
styles.footballText,
{color: 'white'},
]}>
F5
</Text>
</View>
<View>
<Text
style={[
styles.matchTitle,
{color: 'white'},
]}>
Partido 2
</Text>
<Text
style={[
styles.matchField,
{color: 'white'},
]}>
Cancha
</Text>
<StatusComponent
/>
</View>
</View>
<View
style={{
alignItems: 'center',
width: 110,
}}>
<Text style={styles.dateText}>27/08/22</Text>
<View style={{flexDirection: 'row'}}>
<Text
style={[
styles.dateText,
{color: 'white'},
]}>
10:00
</Text>
</View>
</View>
</LinearGradient>
</TouchableOpacity>
);
};
MatchComponent Style:
matchContainer: {
position: 'relative',
height: 95,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 15,
borderRadius: 20,
marginBottom: 15,
},
subContainer: {
flexDirection: 'row',
alignItems: 'center',
},
footballContainer: {
backgroundColor: '#4D6FE2',
height: 43,
width: 43,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
marginRight: 15,
},
footballText: {
color: 'white',
fontFamily: 'OpenSans-SemiBold',
fontSize: 18,
},
matchTitle: {
fontFamily: 'OpenSans-Bold',
color: 'white',
fontSize: Platform.OS === 'ios' ? 19 : 18,
},
matchField: {
fontFamily: 'OpenSans-Regular',
color: 'white',
fontSize: 14,
},
dateText: {
fontFamily: 'Inter-Medium',
fontSize: 14,
color: 'white',
},
joinContainer: {
backgroundColor: 'orange',
height: 28,
justifyContent: 'center',
borderRadius: 30,
paddingHorizontal: 5,
marginBottom: 4,
},
joinText: {
color: 'white',
fontFamily: 'Inter-Bold',
fontSize: Platform.OS === 'ios' ? 16 : 14,
},
StatusComponent
<View
style={[
styles.matchStatusContainer,
{
backgroundColor: 'red'
},
]}>
<Text
style={[
styles.matchStatusText,
{
color: 'white'
},
]}>
RESER
</Text>
)}
</View>
StatusComponent Style
matchStatusContainer: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
marginVertical: 5,
borderRadius: 30,
height: 18,
},
matchStatusText: {
fontFamily: 'Inter-Medium',
fontSize: 12,
marginLeft: 4,
},
I've created a card containing some text and an icon.
I would like to align that icon to bottom. Here is my code:
export default function App() {
return (
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
}}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
...
</View>
<View
style={{
marginLeft: 10,
height: '100%',
// justifyContent: 'flex-end',
// alignContent: 'flex-end',
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
alignContent: 'center',
}}>
<MyIcon color="gray" />
</View>
</View>
</View>
);
}
function MyIcon({ color }) {
return (
<View
style={{
borderRadius: 15,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
}}>
<Svg ...>
...
</Svg>
</View>
);
}
A working snack is here.
The circle containing the icon should be at the bottom, I don't need absolute because I think.
I try flex-end but seems not to work.
As is:
What I want (the cyan circle is the icon):
import * as React from 'react';
import { Text, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
export default function App() {
return (
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
}}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
<Text
numberOfLines={1}
style={{
fontSize: 12,
color: 'black',
fontWeight: '600',
paddingRight: 5,
}}>
Park
</Text>
<Text
numberOfLines={1}
style={{ fontSize: 12, color: 'black', fontWeight: '400' }}>
{`- Something`}
</Text>
</View>
<Text
numberOfLines={1}
style={{
fontSize: 16,
color: 'black',
fontWeight: '600',
paddingVertical: 3,
}}>
A place
</Text>
<Text
numberOfLines={1}
style={{ fontSize: 12, color: 'gray', fontWeight: '400' }}>
10:00 - 17:00
</Text>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
}}>
<MyIcon color="gray" />
</View>
</View>
);
}
function MyIcon({ color }) {
return (
<View
style={{
borderRadius: 15,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
}}>
<Svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.7489 3.91654C11.0386 3.37708 10.8414 2.41269 11.2425 1.64836L9.86861 0.604841C9.4288 0.270796 8.80147 0.356536 8.46742 0.796346L6.29 3.66319L6.78186 4.03677L7.1004 4.27871L6.61652 4.91578L6.29799 4.67385L5.80612 4.30027L0.604492 11.1488C0.270448 11.5887 0.356187 12.216 0.795997 12.55L2.15874 13.5851C2.78224 12.9278 3.81383 12.8315 4.55197 13.3921C5.29012 13.9528 5.47419 14.9724 5.0083 15.7494L6.37042 16.7839C6.81023 17.118 7.43756 17.0322 7.77161 16.5924L12.9732 9.74384L12.4814 9.37026L12.1628 9.12832L12.6467 8.49125L12.9653 8.73318L13.4571 9.10676L15.6345 6.23991C15.9686 5.80011 15.8828 5.17277 15.443 4.83873L14.0697 3.79568C13.4411 4.38723 12.4591 4.45599 11.7489 3.91654ZM8.18717 5.10414L7.86864 4.8622L7.38476 5.49928L7.7033 5.74121L8.68702 6.48837L9.00556 6.73031L9.48944 6.09323L9.1709 5.85129L8.18717 5.10414ZM10.5762 6.91866L10.2577 6.67672L9.7738 7.3138L10.0923 7.55574L11.0761 8.30289L11.3946 8.54483L11.8785 7.90775L11.5599 7.66582L10.5762 6.91866Z"
fill={color}
/>
</Svg>
</View>
);
}
Here is the snack you can check
Instead of
alignContent: 'flex-end'
You should use
alignItems: 'flex-end'
Is it possible to make the <View /> having the same height? I am fetching a data from server side and some content are short and some are long. So when I display them in a box form, the height of the box aren't same. If I fix the height or minimum height the long text will exceed the height of the box.
EDIT : Sample code
DisplayEguides(){
var winsWidth = Dimensions.get('window').width;
if(this.state.eguides != null){
var eguides = this.state.eguides.map((data, i)=>(
<View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
<View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
<Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
<AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
</View>
</View>
</TouchableOpacity>
</View>
))
return (
<View style={{ paddingHorizontal: 15 }}>
<AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
</View>
);
}
}
Seems like Flexbox in react native is doing the job but need to place at the right element. Setting the view to flex: 1 will auto adjust all content inside it to have the same height. In my case, I have to set flex: 1 at TouchableOpacity since my box style is in this element.
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
{ /* The rest of code goes here */ }
</TouchableOpacity>