Skip to content

Instantly share code, notes, and snippets.

@khalid32

khalid32/ListView(Design) using react-native-swipeout

Last active July 11, 2017 05:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save khalid32/53935ddb680646704db40671e17165b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save khalid32/53935ddb680646704db40671e17165b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ListView(Design) using react-native-swipeout
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView,
ScrollView
} from 'react-native';
import Swipeout from 'react-native-swipeout';
//import Icon from 'react-native-vector-icons/MaterialIcons';
const url = 'https://jsonplaceholder.typicode.com/photos?_limit=5';
//editIcon = (<Icon name="edit" size={60} color="#FFF" />),
//deleteIcon = (<Icon name="delete" size={60} color="#FFF" />);
class ListViewDesign extends Component{
constructor(){
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
routeDataSource: ds,
sectionID: null,
rowID: null,
};
}
componentDidMount(){
this.fetchData();
}
fetchData(){
fetch(url)
.then((response) => response.json())
.then((response) => {
this.setState({
routeDataSource: this.state.routeDataSource.cloneWithRows(response)
});
})
}
deleteData(id){
url.child(id).remove();
}
renderRow(route, sectionID, rowID, highlightRow){
const swipeButton = [
{
text: 'Edit',
color: "#FFF",
backgroundColor: '#73bace',
onPress: () => alert("This is Edit.."),
},
{
text: 'Delete',
color: "#FFF",
backgroundColor: '#9b2217',
onPress: () => alert("This is Delete.."),
}
];
return(
<Swipeout
style={styles.flexBox}
right={swipeButton}
autoClose={true}>
<View style={styles.row}>
<Text style={[styles.flexBox, styles.fontStyle]}>{route.id}.{"\n"} Title: {route.title}{"\n"} url: {route.url}</Text>
</View>
</Swipeout>
);
}
render(){
return(
<View style={styles.flexBox}>
<View style={{flexGrow: 15}}>
<ListView
scrollEnabled
style={{flex: 2}}
dataSource={this.state.routeDataSource}
renderRow={this.renderRow} />
</View>
<View style={{flexGrow: 1, flexDirection: 'row'}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red'}}>
<Text style={{color: 'white', fontWeight: '700',}}>Back</Text>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue'}}>
<Text style={{color: 'white', fontWeight: '700',}}>Submit</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
flexBox: {
flex: 1,
},
adjustCenter:{
justifyContent: 'center',
alignItems: 'center',
},
row: {
flexDirection: 'row',
justifyContent:'center',
padding:12,
backgroundColor:'#f6f6f6',
marginBottom:6
},
fontStyle:{
fontWeight: '400',
fontSize: 15,
}
});
export default ListViewDesign;
Raw
Swipeout Edit & Delete button
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
ListView,
ScrollView,
TouchableOpacity,
Dimensions
} from 'react-native';
import { Button, Picker, Left, Right } from 'native-base';
const {width, height} = Dimensions.get('window');
const Items = Picker.Item;
import Modal from 'react-native-modal';
import Swipeout from 'react-native-swipeout';
import Icon from 'react-native-vector-icons/MaterialIcons';
const url = 'https://jsonplaceholder.typicode.com/photos?_limit=5';
//editIcon = (<Icon name="edit" size={20} color="#FFF" />),
//deleteIcon = (<Icon name="delete" size={20} color="#FFF" />);
class ListViewDesign extends Component{
constructor(){
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
routeDataSource: ds,
sectionID: null,
rowID: null,
visibleModal: null,
selectedItem: undefined,
selected1: 'bus',
};
}
componentDidMount(){
this.fetchData();
}
visibility=()=>{
this.setState({
visibleModal: 1,
});
}
onValueChange (value: string) {
this.setState({
selected1: value,
});
}
fetchData(){
fetch(url)
.then((response) => response.json())
.then((response) => {
this.setState({
routeDataSource: this.state.routeDataSource.cloneWithRows(response)
});
})
}
deleteData(id){
url.child(id).remove();
}
_renderButton = (text, onPress) => (
<Button full danger onPress={onPress}>
<Text style={{color: '#FFF'}}>{text}</Text>
</Button>
);
_renderModalContent = () => (
<View style={styles.modalContent}>
<View style={{width: width - 45}}>
<Text style={styles.textTitle}>Vehicle..</Text>
<Picker
style={{opacity: 0.5}}
supportedOrientations={['portrait','landscape']}
mode="dropdown"
selectedValue={this.state.selected1}
onValueChange={this.onValueChange.bind(this)}>
<Items label="Bus" value="bus" />
<Items label="Taxi" value="taxi" />
<Items label="Rickshaw" value="rickshaw" />
<Items label="CNG" value="cng" />
</Picker>
<Text style={styles.textTitle}>Fare..</Text>
<TextInput
placeholder= "Fare in BDT"
keyboardType='phone-pad'
placeholderTextColor= 'black'
style={styles.input} />
</View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Left>
<Button full success >
<Text style={{color: '#FFF'}}>Save</Text>
</Button>
</Left>
<Right>
{this._renderButton('Close', () => this.setState({ visibleModal: null }))}
</Right>
</View>
</View>
);
renderRow = (route, sectionID, rowID, highlightRow) => {
const swipeButton = [
{
text: 'Edit',
color: "#FFF",
//component: editIcon,
backgroundColor: '#73bace',
onPress: () => this.visibility(),
},
{
text: 'Delete',
color: "#FFF",
//component: deleteIcon,
backgroundColor: '#9b2217',
onPress: () => alert("This is Delete.."),
}
];
return(
<Swipeout
style={styles.flexBox}
right={swipeButton}
autoClose>
<View style={styles.row}>
<Text style={[styles.flexBox, styles.fontStyle]}>{route.id}.{"\n"} Title: {route.title}{"\n"} url: {route.url}</Text>
</View>
</Swipeout>
);
}
render(){
return(
<View style={styles.flexBox}>
<View style={{flexGrow: 15}}>
<ListView
scrollEnabled
style={{flex: 2}}
dataSource={this.state.routeDataSource}
renderRow={this.renderRow} />
</View>
<View style={{flexGrow: 1, flexDirection: 'row'}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red'}}>
<Text style={{color: 'white', fontWeight: '700',}}>Back</Text>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue'}}>
<Text style={{color: 'white', fontWeight: '700',}}>Submit</Text>
</View>
</View>
<Modal isVisible={this.state.visibleModal === 1} style={styles.bottomModal}>
{this._renderModalContent()}
</Modal>
</View>
);
}
}
// style={styles.bottomModal}
const styles = StyleSheet.create({
flexBox: {
flex: 1,
},
adjustCenter:{
justifyContent: 'center',
alignItems: 'center',
},
row: {
flexDirection: 'row',
justifyContent:'center',
padding:12,
backgroundColor:'#f6f6f6',
marginBottom:6
},
fontStyle:{
fontWeight: '400',
fontSize: 15,
},
button: {
backgroundColor: 'lightblue',
padding: 12,
margin: 16,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
input: {
height: 40,
width: 270,
opacity: 0.9,
marginTop: 5,
marginBottom: 2,
},
modalContent: {
backgroundColor: '#FFF9C4',
paddingTop: 25,
height: 260,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 8,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
bottomModal: {
justifyContent: 'flex-end',
marginBottom: 0,
},
});
export default ListViewDesign;
Raw
Using Fetch with ListView(Design)
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView,
ScrollView,
Image
} from 'react-native';
class ListViewDesign extends Component{
constructor(){
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
routeDataSource: ds,
};
}
componentDidMount(){
this.fetchData();
}
fetchData(){
fetch('https://jsonplaceholder.typicode.com/photos')
.then((response) => response.json())
.then((response) => {
this.setState({
routeDataSource: this.state.routeDataSource.cloneWithRows(response)
});
})
}
renderRow(route, sectionID, rowID, highlightRow){
return(
<View style={styles.row}>
<Text></Text>
<Text style={[styles.flexBox, styles.fontStyle]}>{route.id}.{"\n"} Title: {route.title}{"\n"} url: {route.url}</Text>
<Image style={{height: 60, width: 60}} source={{uri: route.thumbnailUrl}}/>
</View>
);
}
render(){
return(
<View style={{flex: 1}}>
<View style={{flexGrow: 15}}>
<ListView
scrollEnabled
style={{flex: 2}}
dataSource={this.state.routeDataSource}
renderRow={this.renderRow} />
</View>
<View style={{flexGrow: 1, flexDirection: 'row'}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red'}}>
<Text style={{color: 'white', fontWeight: '700',}}>Back</Text>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue'}}>
<Text style={{color: 'white', fontWeight: '700',}}>Submit</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
flexBox: {
flex: 1,
},
adjustCenter:{
justifyContent: 'center',
alignItems: 'center',
},
row: {
flexDirection: 'row',
justifyContent:'center',
padding:12,
backgroundColor:'#f6f6f6',
marginBottom:6
},
fontStyle:{
fontWeight: '400',
fontSize: 15,
}
});
export default ListViewDesign;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment