The order is a useful property in flex.
I search this on the internet.
Summary
The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.
<View style={{display:'flex'}}>
{ item.cover ? <Image style={[styles.item, styles.newsItem]} source={{uri:item.cover}}/> : null }
{ item.title ? <Text numberOfLines={1} ellipsizeMode='tail' style={styles.newsTTopTitle} source={{uri:item.cover}}>{item.title}</Text> : null }
{ item.description ? <Text numberOfLines={1} ellipsizeMode="tail" style={styles.newsTSubTitle} source={{uri:item.cover}}>{item.description}</Text> : null }
</View>
</TouchableOpacity>
newsTSubTitle: {
fontSize:10,
lineHeight:13,
color:'#9B9B9B',
width:233,
textAlign:'left',
alignSelf:'flex-end',
order:2,
},
newsTTopTitle: {
fontSize:12,
lineHeight:15,
color:'#000000',
width:233,
textAlign:'left',
alignSelf:'flex-end',
order:1,
},
My coder is like above, as a result, the error show.
One more thing.
The item.cover sometimes does not have value. Then the Text will layout in the top of father view. I want to set the Text component in the bottom of the father view. Should I put a placeholder image in this case?
React Native's flexbox is not 100% identical to its web counterpart. RN's flexbox really only supports flexDirection, alignItems, justifyContent, and the flex attributes. You can learn more in the documentation here.
Related
I am using translate on View inside the TouchableNativeFeedback. But after using translate css the upper part of view is not clickable. Can I give translate css to TouchableNativeFeedback also.
function App() {
return (
<View>
<TouchableNativeFeedback onPress={this._onButtonPress}>
<View style={styles.app}></View>
</TouchableNativeFeedback>
</View>
);
}
const styles = StyleSheet.create({
app: {
height: 50,
width: 50,
transform: [{ translateY: 25 }]
}
});
I tried giving style to that. But I don't think it accepts that.
React-native version: "0.61.2"
You need to think about some margins or padding.
From the official documentation:
Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
https://reactnative.dev/docs/transforms
I've been trying to use React Native lately and I am trying to incorporate a ScrollView in my program. I am having issues centering the ScrollView in the middle of the page. I have looked at many of the posts here on SO and have been unable to get a working implementation. If someone could point me in the right direction, I would really appreciate it!
Screen:
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollable}>
<ProfileGreeting />
<DailyGoals goals={GOALS} />
<CoursesContainer courses={COURSES} />
</ScrollView>
</SafeAreaView>
Styles:
const styles = {
container: {
height: "100%",
width: "100%",
display: "flex",
alignItems: "center",
flex: 1
},
scrollable: {
flexGrow : 1,
justifyContent : 'center'
}
}
As suggested in this this post I tried to use flexGrow on the ScrollView, but it still doesn't seem to work - it instead shifts to the side as such:
Try Scroll view "contentContainerStyle" propert instead of style
propert
ScrollView style defines the outer container of the ScrollView, e.g its height and relations to siblings elements
ScrollView contentContainerStyle defines the inner container of it, e.g items alignments, padding, etc
In my React Native app I have a <View> with several other elements nested inside it. Normally if I want to make a component disappear, I make its height go to 0, make its opacity 0, etc. But I want a universal way to apply a style to the <View> and have it and all its child components disappear.
Does anyone know how I can approach this?
You can use condition inside curly braces in jsx to show or hide component
<View>
{
condition && (
<View> // <- View and its children will show only if condition is true
//Children components
</View>
)
}
</View>
I am working with react-bootstrap-table and I am facing problems with formatting it. Main issues are:
the headers with long names should be presented with 2 lines of text, instead there is one and "..." like in the picture below:
Moreover in no way I could set the height of a single row of a table. Each text has big padding therefore the table is not too condensed:
And the code goes here:
<BootstrapTable
data={this.props.sales}
version="4"
striped
hover
pagination
keyField="Type"
>
{tableHeaders.map((header, index) => (
<TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
{header.name}
</TableHeaderColumn>
))}
</BootstrapTable>
According to docs you can do all of the customizations you need.
First issue: To remove dots you can use thStyle property which you can pass to TableHeaderColumn component and override CSS white-space property.
<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />
Second issue: You can handle height of your row using trClassName property. You can either pass string or function to handle each or make conditional class depends on row. See more here.
For example:
<BootstrapTable trClassName="customClass" {...anotherProps} />
And define your customClass:
.customClass {
// override padding or height whatever you want
padding: 3px;
}
Good luck and have fun!
I currently have these two styles:
indentLeft: {
marginLeft:'4%',
},
forwardButtonLocation: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
},
I followed this tutorial https://facebook.github.io/react-native/docs/style.html and concatenated them like this:
<View style={styles.forwardButtonLocation, styles.indentLeft}>
However, it seems like the latter style overrides the previous one even indentLeft and forwardButtonLocation don't share same properties. The button is either padded on top with 20 or indented by 4% depending on which one comes to the second in the concatenation, but according to the tutorial, it should have both properties. What am I doing wrong here?
In order to provide multiple styles to the same element you need to the pass the styles within []
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
Passing them directly in {} will only allow the last one to take effect