1.0.28 • Published 4 years ago
flatlistdisplaycontent v1.0.28
FlatListDisplayContent
A library for Displaying the Contents of FlatList easily.
Installation
yarn add flatlistdisplaycontent
or
npm i --save flatlistdisplaycontent
Usage
import FlatLIstDisplayContent from 'flatlistdisplaycontent';
<FlatLIstDisplayContent
name = 'Sneha'
speciality='React Native Devoloper'
extraDetails= 'Loves Dancing'
imageStyling={{width: 50,height:50}}
image={{source: {uri:url}}}
style={{borderWidth:2}}
onPress={() => console.log('Hi')}
nameStyling= {{fontSize:10}}
specialityStyling= {{color:'red'}}
extraDetailsStyling= {{fontSize:20}}
{...otherProps}
/>
Note
- Image can also be given as :
image={{ source: require('path of the image')}}
Example
import React from 'react';
import {
StyleSheet,
View,
Text,
FlatList
} from 'react-native';
import FlatLIstDisplayContent from 'flatlistdisplaycontent';
class App extends React.Component {
state = {
data : [{ name: 'Parineeti',
speciality:'React Native Devoloper',
extraDetails:'Loves Dancing',
uri:'https://upload.wikimedia.org/wikipedia/commons/b/b9/Parineeti_Chopra_in_2016.jpg'
},
{ name: 'Sidharth',
speciality:'React Native Devoloper',
extraDetails:'Loves Coding',
uri:'https://upload.wikimedia.org/wikipedia/commons/6/69/Sidharth_Malhotra_2016.jpg'
}]
}
render(){
return (
<View>
<FlatList
data = {this.state.data}
renderItem = {({item}) => (
<View style={{paddingTop: 10}}>
<FlatLIstDisplayContent
name ={item.name}
speciality={item.speciality}
extraDetails={item.extraDetails}
imageStyling={{width: 50,height:50}}
image={{source: {uri:item.uri}}}
style={{borderWidth:2}}
/>
</View>
)}/>
</View>
);
};}
const styles = StyleSheet.create({
});
export default App;
1.0.22
4 years ago
1.0.26
4 years ago
1.0.25
4 years ago
1.0.24
4 years ago
1.0.23
4 years ago
1.0.28
4 years ago
1.0.27
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.0
4 years ago