You can apply it
render() { return ( <SafeAreaView style={styles.container}> <UserHeaderNavigationBar {...this.props} title="Today Checkin / Checkout" /> <View style={styles.mainContainer}> <View style={{ flexDirection: 'row', paddingHorizontal: 25, paddingBottom: 10, paddingTop: 10, justifyContent: 'space-between' }}> <View style={{ flex: .2, backgroundColor: "#1C5894", paddingLeft:5, borderWidth:1, borderColor: "#fff"}}> <Text style={styles.TblHeadTxt}>SL</Text> </View> <View style={{ flex: .4, backgroundColor: "#1C5894", paddingLeft:5, borderWidth:1, borderColor: "#fff" }}> <Text style={styles.TblHeadTxt}>Name</Text> </View> <View style={{ flex: .4, backgroundColor: "#1C5894", paddingLeft:5, borderWidth:1, borderColor: "#fff" }}> <Text style={styles.TblHeadTxt}>Status</Text> </View> </View> {this.renderData()} </View> </SafeAreaView> ) } renderData=()=> { const items = []; for (item of this.state.ArrayData) { items.push( <View style={{ flexDirection: 'row', paddingHorizontal: 25, paddingBottom: 10, paddingTop: 10, justifyContent: 'space-between' }}> <View style={{ flex: .2, paddingLeft:5 }}> <Text style={styles.planVisit}>{item.sl}</Text> </View> <View style={{ flex: .4, paddingLeft:5 }}> <Text style={styles.planVisit}>{item.name}</Text> </View> <View style={{ flex: .4, paddingLeft:5 }}> <Text style={styles.planVisit}>{item.status}</Text> </View> </View> ); } return items; }
Question and answer is powered by AnsPress.io