0.1.3 • Published 10 months ago
rezg-introduction-sliders v0.1.3
rezg-introduction-sliders
Introduction sliders for react native
Installation
npm install rezg-introduction-sliders
Usage
import React from 'react';
import {
View,
Text,
Image,
StyleSheet,
SafeAreaView,
} from 'react-native';
import AppIntroSlider from 'rezg-introduction-sliders';
const data = [
{
logo: require('../assets/1.jpg'),
title: 'Transform your Hair \n Braiding into a Digital \n Success',
image: require('../assets/1.jpg'),
bg: '#000000',
},
{
logo: require('../assets/1.jpg'),
title: 'Revolutionize the way \n Youe Serve Food',
image: require('../assets/2.jpg'),
bg: '#000000',
},
{
logo: require('../assets/1.jpg'),
title: 'Empower Your\n Restaurant\'s Online\n Presence by harnessing\n the Power of Technology',
image: require('../assets/3.jpg'),
bg: '#000000',
}
];
type Item = typeof data[0];
const styles = StyleSheet.create({
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 96
},
image: {
width: 150,
height: 150,
marginTop: 32,
},
logo: {
width: 50,
height: 50,
marginBottom: 32
},
title: {
fontSize: 22,
color: 'white',
textAlign: 'center',
},
});
export default class App extends React.Component {
_renderItem = ({ item }: { item: Item }) => {
return (
<View
style={{
flex: 1,
backgroundColor: item.bg,
}}>
<SafeAreaView style={styles.slide}>
<Image source={item.logo} style={styles.logo} />
<Text style={styles.title}>{item.title}</Text>
<Image source={item.image} style={styles.image} />
</SafeAreaView>
</View>
);
};
_keyExtractor = (item: Item) => item.title;
render() {
return (
<View style={{ flex: 1 }}>
<AppIntroSlider
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
bottomButton
showSkipButton
skipLabel={"Get Started"}
data={data}
versionNumber={"0.1"}
/>
</View>
);
}
}
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library