react native list view design - css

Question

I have tried to design the screen in react native but its hard divide a screen column and row like ionic and angular
Output of that below code
<View style={styles.listItemContainer}>
<View style={{flex:1}}>
<View style={{flexDirection:"column"}}>
<Text>1003234</Text>
<Text>Info Test........</Text>
</View>
</View>
<View style={{flexDirection:"column"}}>
<Text style={{backgroundColor:"red",borderRadius:10,padding:2,
marginRight:10,marginTop:5,fontSize:12}}>Inprogress</Text>
</View>
</View>`
exactly what i need

Answer 1

You can use Flatlist
Use below code to apply styles to your List
<FlatList style={Styles.container}
data={this.props.listData}
extraData={this.state.selectedItem}
keyExtractor={(item, index) => item.id}
renderItem={({ item, index }) => (
this.renderRow(item, index)
)}
ListEmptyComponent={this.showEmptyListView()}
/>
Your row render can look like this.
renderRow = (item, index) => {
return (
<TouchableHighlight key={index} onPress={() => this.onPressAction(item)} >
<View style={Styles.listItemContainer}>
<View style={Styles.listDesign}>
<View style={Styles.imageLength}>
{
item.imageUrl == '' ?
<Image
source={require("./../../assets/images/default-display.png")}
style={{ resizeMode: "cover", width: '100%', height: 100 }} /> :
<Image
source={{ uri: item.thumbnailImageUrl }}
style={{ resizeMode: "cover", width: '100%', height: 100 }} />
}
</View>
<View style={[Styles.columnAlign, Styles.contentWidth]}>
<View style={[Styles.justifyEnd, Styles.imageContainer]}>
<View style={Styles.justifySpaceAround}>
<Image
source={require("./../../assets/images/anyImage.png")}
style={{ resizeMode: "cover", width: 25, height: 25 }} />
</View>
</View>
<View style={Styles.buttonContainer}>
<Text style={Styles.vehicleDesc}>{"test"}</Text>
</View>
<View style={Styles.buttonContainer}>
<Text style={Styles.text}>{item.mileage}{translate("Test 1")}</Text>
</View>
<View style={Styles.buttonContainer}>
<Text style={Styles.text}>{"Test2"}</Text>
</View>
<View style={Styles.buttonContainer}>
<Text style={Styles.watchListtext}>{"Test 3"}</Text>
</View>
</View>
</View>
</View>
</TouchableHighlight>
);
}
Your Style
listItemContainer: {
marginTop: 7,
// marginBottom: 7,
flexDirection: 'row',
alignItems: 'flex-start',
},
listDesign: {
backgroundColor: Colors.white,
flexDirection: 'row',
alignItems: 'center',
padding: 6,
width: '100%'
},
vehicleDesc: {
marginLeft: 12,
fontSize: 16,
color: '#AA2328',
fontWeight: 'bold'
},
text: {
marginLeft: 12,
fontSize: 14,
color: Colors.black,
},
watchListtext: {
marginLeft: 12,
fontSize: 14,
color: Colors.brandPrimary,
},
imageLength: {
width: '35%'
},
contentLength: {
width: '65%'
},
container: {
flex: 1,
backgroundColor: Colors.creamyWhite,
},
buttonContainer: {
flexDirection: 'row',
padding: 2
}, imageContainer: {
flexDirection: 'row',
},
justifySpaceAround:
{
justifyContent:'space-around'
}
justifyEnd:
{
justifyContent:'flex-end'
},
coulmnAlign:
{
flexDirection:'coumn'
}
You show empty data
showEmptyListView = () => {
return (
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 10 }}>
<Text style={{ color: Colors.white }}>{"No Data to Display"}</Text>
</View>
)
}

Answer 2

You have to handle a lot in style.
You only need 3 common tag:
HorizontalContainer,
VerticalContainer,
ItemContainer,
export const VerticalContainer = styled.View({
flex: 1,
flexDirection: "column",
backgroundColor: (props) => props.backgroundColor || "#000"
});
export const HorizontalContainer = styled.View({
flex: 1,
flexDirection: "row",
backgroundColor: (props) => props.backgroundColor || "#000"
});
export const ItemContainer = styled.View({
flex: (props) => props.flex || 1
});
Inside handle as you like:
<HorizontalContainer backgroundColor="#fff">
<ItemContainer/>
<ItemContainer flex=2></ItemContainer>
<ItemContainer />
</HorizontalContainer >
Hope to help you!

Answer 3

I have done it with My Own code(FlatList view with design and search bar data from api) In that code i have removed my api call services you can try your own
Output Here(Check Before You Try)
import React, { Component } from 'react';
import { View, Text, StyleSheet,FlatList,ScrollView,ActivityIndicator} from 'react-native';
import { Picker } from 'react-native-picker-dropdown';
import Icon5 from 'react-native-vector-icons/FontAwesome5';
import { SearchBar, Avatar } from 'react-native-elements';
// create a component
class Home extends Component {
constructor(props){
super(props);
this.state={
data:[],
text: '',
language:'self',
ready: false,
searchText: "",
filteredData: [],
backupData:[]
}
this.onValueChange = this.handleValueChange.bind(this)
this.arrayholder=[];
}
search (searchText) {
this.setState({searchText: searchText});
console.log(searchText)
let text = searchText.toLowerCase();
let trucks = this.state.data;
// search by food truck name
let filteredName = trucks.filter((truck) => {
return truck.title.toLowerCase().match(text);
});
// if no match and text is empty
if( text == '') {
console.log('change state');
this.setState({
data: this.state.backupData
});
}
else if(!text ){
console.log("myname")
this.setState({data:[]})
}
// if no name matches to text output
else if(!Array.isArray(filteredName) && !filteredName.length) {
console.log("not name");
this.setState({
data: [],
});
}
// if name matches then display
else if(Array.isArray(filteredName)) {
console.log('Name');
this.setState({
data: filteredName,
});
}
};
showEmptyListView = () => {
return (
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 10 }}>
<Text style={{ color: "black" }}>{"No Data to Display"}</Text>
</View>
)
}
handleValueChange(language) {
this.setState({ language })
}
renderRow = (item, index) => {
return (
<View style={styles.listItemContainer}>
<View style={{flex:1}}>
<View style={{flexDirection:"column",alignItems:"flex-start"}}>
<View style={{flexDirection:"row"}}>
<Text style={{marginLeft:12,marginTop:5,marginBottom:5,fontWeight:"bold",color:"black"}}>{item.number}</Text>
<Icon5 name="arrow-circle-up" size={15} style={{ marginTop:8,marginLeft:8, color: '#af2a5b', }}/>
<Text style={{marginLeft:5,marginTop:5,marginBottom:5,fontWeight:"bold",color:"#af2a5b"}}>{item.priority}</Text>
</View>
<Text style={{marginLeft:12,marginBottom:5,fontWeight:"bold",color:"black"}}>{item.title}</Text>
<View style={{flexDirection:"row"}}>
<Icon5 name="calendar-alt" size={15} style={{ marginLeft:12,marginBottom:5 }}/>
<Text style={{marginLeft:8,marginBottom:5}}>{item.assignedDate}</Text>
</View>
<View style={{flexDirection:"row"}}>
<Icon5 name="user-alt" size={15} style={{ marginLeft:12,marginBottom:5 }}/>
<Text style={{marginLeft:8,marginBottom:5}}>{item.createdBy}</Text>
</View>
</View>
</View>
<View style={{flexDirection:"column"}}>
<Text style={{color:"#f6b073",backgroundColor:"#fcd8b8",borderRadius: 10,padding:3,marginRight:10,marginTop:5,fontSize:12}}>{item.state}</Text>
</View>
</View>
);
}
renderHeader = () => {
return(
<View style={{ flex: 1, flexDirection: 'column' }}>
<View style={styles.listItemContainer}>
<View style={{flexDirection: 'row',backgroundColor: '#fff',color: '#fff',
width: '100%',height: 43,}}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ width: '45%', justifyContent: 'center', paddingTop: 7, paddingBottom: 7, color: '#fff', }} >
<Picker mode="dropdown" style={{width:150}}
selectedValue={this.state.language}
onValueChange={this.onValueChange} >
<Picker.Item label="My Task" value="self" />
<Picker.Item label="My Group" value="group" />
</Picker>
</View>
<View style={{ width: '55%', justifyContent: 'center', paddingTop: 7, paddingBottom: 7, color: '#fff', }} >
<SearchBar
inputStyle={{ backgroundColor: 'white', borderRadius: 55, borderWidth: 0, borderTopWidth: 0, borderBottomWidth: 0, height: 25 }}
containerStyle={{ backgroundColor: 'white', borderColor: '#g5g5g5', borderWidth: 0, borderRadius: 55, borderTopWidth: 0, borderBottomWidth: 0, width: '100%', marginLeft: 0, marginRight: 0, marginTop: 10, marginBottom: 10, height: 40 }}
placeholder="Search Here..."
inputContainerStyle={{ backgroundColor: 'white', borderWidth: 0, borderRadius: 55, height: 25 }}
onChangeText={searchText => this.search(searchText)}
value={this.state.searchText}
/>
</View>
</View>
</View>
</View>
</View>
)
}
renderFooter = () => {
return(
<View>
<Text>Footer</Text>
</View>
)
}
render() {
if (this.state.ready) {
return (
<FlatList style={{flex: 1,}}
data={this.state.filteredData && this.state.filteredData.length > 0 ? this.state.filteredData : this.state.data}
renderItem={({ item, index }) => (
this.renderRow(item, index)
)}
keyExtractor={(item, index) => index}
ListHeaderComponent={this.renderHeader}
ListEmptyComponent={this.showEmptyListView()}
enableEmptySections={true}
style={{flexWrap: 'wrap'}}
/>
);
}
else{
return (
<ActivityIndicator
animating={true}
style={{flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: 80}}
color="#2F80ED"
size="large"
/>
);
}
}
}
const styles = StyleSheet.create({
listItemContainer: {
flex: 1,
marginBottom:10,
// paddingBottom: 15,
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'flex-start',
},
})
export default Home;