react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

Overview

react-native-app-intro

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro Screen Capture

Example code

Support ios、android

Designed by Freepik

Update from FuYaoDe/react-native-app-intro

  • Add autoplay & autoplayTimeout
  • Add npmignore
  • Add allowFontScaling & fontSize props for Skip, Next, and Done labels

Installation

$ npm i react-native-app-intro-v2 --save

Basic Usage

You can use pageArray quick generation your app intro with parallax effect. With the basic usage, the Android status bar will be updated to match your slide background color.

import React, { Component } from 'react';
import { AppRegistry, Alert } from 'react-native';
import AppIntro from 'react-native-app-intro';

class Example extends Component {
  onSkipBtnHandle = (index) => {
    Alert.alert('Skip');
    console.log(index);
  }
  doneBtnHandle = () => {
    Alert.alert('Done');
  }
  nextBtnHandle = (index) => {
    Alert.alert('Next');
    console.log(index);
  }
  onSlideChangeHandle = (index, total) => {
    console.log(index, total);
  }
  render() {
    const pageArray = [{
      title: 'Page 1',
      description: 'Description 1',
      img: 'https://goo.gl/Bnc3XP',
      imgStyle: {
        height: 80 * 2.5,
        width: 109 * 2.5,
      },
      backgroundColor: '#fa931d',
      statusBarColor: '#fa931d', // If you don't specify, a 30% darker color will be inferred from your background color.
      fontColor: '#fff',
      level: 10,
    }, {
      title: 'Page 2',
      description: 'Description 2',
      img: require('../assets/some_image.png'),
      imgStyle: {
        height: 93 * 2.5,
        width: 103 * 2.5,
      },
      backgroundColor: '#a4b602',
      fontColor: '#fff',
      level: 10,
    }];
    return (
      <AppIntro
        onNextBtnClick={this.nextBtnHandle}
        onDoneBtnClick={this.doneBtnHandle}
        onSkipBtnClick={this.onSkipBtnHandle}
        onSlideChange={this.onSlideChangeHandle}
        pageArray={pageArray}
      />
    );
  }
}

AppRegistry.registerComponent('Example', () => Example);

Advanced Usage

If you need customized page like my Example, you can pass in View component into AppIntro component and set level. Remember any need use parallax effect component, Need to be <View level={10}></View> inside.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import AppIntro from 'react-native-app-intro';

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
    padding: 15,
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

class Example extends Component {

  render() {
    return (
      <AppIntro>
        <View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
          <View level={10}><Text style={styles.text}>Page 1</Text></View>
          <View level={15}><Text style={styles.text}>Page 1</Text></View>
          <View level={8}><Text style={styles.text}>Page 1</Text></View>
        </View>
        <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
          <View level={-10}><Text style={styles.text}>Page 2</Text></View>
          <View level={5}><Text style={styles.text}>Page 2</Text></View>
          <View level={20}><Text style={styles.text}>Page 2</Text></View>
        </View>
        <View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
          <View level={8}><Text style={styles.text}>Page 3</Text></View>
          <View level={0}><Text style={styles.text}>Page 3</Text></View>
          <View level={-10}><Text style={styles.text}>Page 3</Text></View>
        </View>
        <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
          <View level={5}><Text style={styles.text}>Page 4</Text></View>
          <View level={10}><Text style={styles.text}>Page 4</Text></View>
          <View level={15}><Text style={styles.text}>Page 4</Text></View>
        </View>
      </AppIntro>
    );
  }
}
AppRegistry.registerComponent('Example', () => Example);

And in Android, image inside view component, view need width、height.

<View style={{
  position: 'absolute',
  top: 80,
  left: 30,
  width: windows.width,
  height: windows.height,
}} level={20}
>
  <Image style={{ width: 115, height: 70 }} source={require('./img/1/c2.png')} />
</View>

Properties

Prop PropType Default Value Description
dotColor string 'rgba(255,255,255,0.3)' Bottom of the page dot color
activeDotColor string '#fff' Active page index dot color
rightTextColor string '#fff' The bottom right Text Done、> color
leftTextColor string '#fff' The bottom left Text Skip color
onSlideChange (index, total) => {} function to call when the pages change
onSkipBtnClick (index) => {} function to call when the Skip button click
onDoneBtnClick func function to call when the Done button click
onNextBtnClick (index) => {} function to call when the Next '>' button click
doneBtnLabel string、Text element Done The bottom right custom Text label
skipBtnLabel string、Text element Skip The bottom left custom Text label
nextBtnLabel string、Text element The bottom left custom Text label
pageArray array In the basic usage, you can input object array to render basic view example: [[{title: 'Page 1', description: 'Description 1', img: 'https://goo.gl/uwzs0C', imgStyle: {height: 80 * 2.5, width: 109 * 2.5 }, backgroundColor: '#fa931d', fontColor: '#fff', level: 10 }] , level is parallax effect level ,if you use pageArray you can't use custom view
defaultIndex number 0 number of the index of the initial index
showSkipButton bool true a boolean defining if we should render the skip button
showDoneButton bool true a boolean that defines if we should render the done button
showDots bool true a boolean that defines if we should render the bottom dots
allowFontScaling bool true a boolean that defines if we should allow font scaling on devices with larger text sizes enabled
fontSize number 22 a number that specifies the size of the Skip, Done, and Next labels
autoplay bool false Set to true enable auto play mode.
autoplayTimeout number 4 Delay between auto play transitions (in second).
Children View Properties
Prop PropType Default Value Description
level number parallax effect level
You might also like...
A performant customizable bottom sheet component made on top of wix react-native-navigation library.
A performant customizable bottom sheet component made on top of wix react-native-navigation library.

📃 React Native Navigation Bottom Sheet Extension A performant customizable bottom sheet component made on top of wix react-native-navigation library.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

Parallax effects for React Native using Animated API
Parallax effects for React Native using Animated API

react-native-parallax NOTE: This module requires React Native 0.8+ Installation npm install --save react-native-parallax Usage Note: Parallax.Image e

Simple screens' swiper library with scrollable or static tab navigation. Fully supported on iOS and Android.
Simple screens' swiper library with scrollable or static tab navigation. Fully supported on iOS and Android.

react-native-screens-swiper Simple screens' swiper library with scrollable or static tab navigation. Fully supported on iOS and Android. Scrollable Pi

React Native: Native Bottom Action Sheet
React Native: Native Bottom Action Sheet

ReactNative: Native Bottom Action Sheet (Android/iOS) If this project has helped you out, please support us with a star 🌟 A simple library that crea

A react native scroll view component with Parallax header :p
A react native scroll view component with Parallax header :p

RNParallax (react-native-parallax-header) A react native scroll view component with Parallax header :p Inspired by GitHub - jaysoo/react-native-parall

 React Native Actions Sheet Picker
React Native Actions Sheet Picker

React Native Actions Sheet Picker A React Native component that provides a filterable select dropdown/picker. Preview Installation Guide yarn add reac

 React Native Magic Sheet ✨
React Native Magic Sheet ✨

A Bottom Sheet library that can be called imperatively from anywhere! React Native Magic Sheet ✨ Inspired by react-native-magic-modal This library aim

Bottom sheet navigator for React Navigation

@th3rdwave/react-navigation-bottom-sheet Bottom sheet navigator for React Navigation. Integrates @gorhom/bottom-sheet with React Navigation. Installat

Comments
  • Add missing dependencies back into `package.json`

    Add missing dependencies back into `package.json`

    Add dependencies back in so that they're installed as expected. Also updated dependencies to be the latest versions of each. react-native-swiper was previously pointing at https://github.com/FuYaoDe/react-native-swiper which may or may not have been necessary, but which has now fallen behind in development over the original, maintained repository.

    opened by kylekellogg 0
Owner
Shinix
Shinix
react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Fixt 90 Oct 7, 2021
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

react-native-snap-carousel ✨ Some great news for you, fellow plugin user! ?? Head over there now to learn more about all the goodness that's coming yo

Meliorence 9.7k Oct 1, 2022
Paged Parallax Swiper with Effects

React Native Parallax Swiper Configurable parallax swiper based on an iOS pattern. Features Flexible. Share one Animated.Value between ParallaxSwiper

Zachary Gibson 612 Aug 16, 2022
Parallax-controller - Core classes and controller for creating parallax scrolling effects

?? Parallax Controller Core classes and controller for creating parallax scrolli

J Scott Smith 10 Aug 25, 2022
react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical)

react-native-3dcube-navigation Installation With Yarn $ yarn add react-native-3dcube-navigation With NPM $ npm i react-native-3dcube-navigation --save

Zeh Fernandes 274 Aug 21, 2022
Tinder-like swiper for react-native

react-native-swiper-animated Tinder like animations swiper for React Native ATTENTION! THIS PACKAGE IS NO LONGER UNMAINTAINED!! Unfortunately, I don't

Gozie Ochu 222 May 31, 2022
A ScrollView-like component with parallax and sticky header support.

Rodrigocs - Animated Driver This component now uses Native Driver by default. Remember to pass a Animated component to renderScrollComponent, by defau

Alexander Vitanov 2.2k Sep 26, 2022
Welcome to react-native-coachmark! It helps you easily create Coach Marks to enhance user experience!

react-native-coachmarks Welcome to react-native-coachmarks! It helps you easily create Coach Marks to enhance user experience! DEMO Installation npm i

TranLuongTuanAnh 30 Jul 27, 2022
The best Swiper component for React Native.

The best Swiper component for React Native. react-native-swiper Roadmap see: ROADMAP.md Changelogs [1.6.0-rc] Dependency Remove ViewPagerAndroid, use

斯人 10k Oct 1, 2022