react-native-show-more-button
v1.0.2
Published
'Show More' button to display more/less items which are inside of the <ShowMore> element.
Downloads
40
Readme
react-native-show-more-button
Installation
npm install react-native-show-more-button --save
import ShowMore from 'react-native-show-more-button';
Props
height -> height of component when it's closed. Default value is 250.
showMoreText -> Show More button text. Default string is "Show More".
showLessText -> Show Less button text. Default string is "Show Less".
buttonColor -> color of show more/less text. Default value is "#AAAAFF".
Usage (without props)
// import component
import ShowMore from 'react-native-show-more-button';
//usage:
<ShowMore>
</ShowMore>
Usage (with props)
// import component
import ShowMore from 'react-native-show-more-button';
//usage:
<ShowMore height={400} buttonColor={"#FF0000"} showMoreText="Open" showLessText="Close">
</ShowMore>
Example Code
import React from 'react';
import { Image, Text, View, ScrollView } from 'react-native';
import ShowMore from 'react-native-show-more-button';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<ScrollView>
<ShowMore>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image source={require('./1.png')} />
<Text>wowowowowowowowowowwowo</Text>
<Text>What a LOGO!</Text>
<Text>This is just a test script</Text>
<Text>for Show More react-native module</Text>
<Text>Dope, right?</Text>
<Image source={require('./2.jpg')} />
<Text>This is a logo with number 6 in it</Text>
<Text>We are going to see if this package works well!</Text>
<Text>------------------------------------</Text>
<Text>Well, looks like it works, right?</Text>
<Text>Easy to use!</Text>
<Text>react-native-show-more-button</Text>
<Image source={require('./2.jpg')} />
<Text>Okay.</Text>
</View>
</ShowMore>
</ScrollView>
</View>
);
}
}