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