All Projects → FuYaoDe → React Native App Intro

FuYaoDe / React Native App Intro

Licence: mit
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...

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to React Native App Intro

Rn Falcon App Intro
rn-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...
Stars: ✭ 82 (-97.41%)
Mutual labels:  introduction, intro, parallax
React Native Onboarding Swiper
🛳 Delightful onboarding for your React-Native app
Stars: ✭ 596 (-81.19%)
Mutual labels:  introduction, intro
VSpot
A nice focus view intro for your app. Focus a specific view on first time launch
Stars: ✭ 27 (-99.15%)
Mutual labels:  introduction, intro
Showcaseview
🔦The ShowcaseView library is designed to highlight and showcase specific parts of apps to the user with an attractive and flat overlay.
Stars: ✭ 281 (-91.13%)
Mutual labels:  introduction, intro
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (-12.21%)
Mutual labels:  introduction, intro
Androidonboarder
A simple way to make a beauty onboarding experience (app intro or welcome screen) for your users.
Stars: ✭ 269 (-91.51%)
Mutual labels:  introduction, intro
directx12-seed
✖🌱 A DirectX 12 starter repo that you could use to get the ball rolling.
Stars: ✭ 58 (-98.17%)
Mutual labels:  introduction
Perspective
Powerful scrolling and motion parallax for iOS
Stars: ✭ 260 (-91.8%)
Mutual labels:  parallax
Intro
An iOS framework to easily create simple animated walkthrough, written in Swift.
Stars: ✭ 33 (-98.96%)
Mutual labels:  intro
l2kurz
German short introduction to LaTeX
Stars: ✭ 19 (-99.4%)
Mutual labels:  introduction
Viewpagertransition
viewpager with parallax pages, together with vertical sliding (or click) and activity transition
Stars: ✭ 3,017 (-4.8%)
Mutual labels:  parallax
Parallax Effect
🤹🏻‍♂️ Parallax effect in javascript using face tracking. An immersive view in 3d with webcam.
Stars: ✭ 275 (-91.32%)
Mutual labels:  parallax
webgl-seed
🌐🌱 A starter repo for building WebGL applications.
Stars: ✭ 41 (-98.71%)
Mutual labels:  introduction
scrollxp
Alpine.js-esque library for scrolling animations on websites
Stars: ✭ 50 (-98.42%)
Mutual labels:  parallax
Introduction screen
Add easily to your app an introduction screen to provide informations to new users
Stars: ✭ 259 (-91.83%)
Mutual labels:  introduction
IntroApp
This Android app adds splash screen slides to make a great intro for an app.
Stars: ✭ 16 (-99.5%)
Mutual labels:  intro
React Native Collapsing Toolbar
react-native wrapper for android CollapsingToolbarLayout
Stars: ✭ 280 (-91.16%)
Mutual labels:  parallax
PAM
[TPAMI 2020] Parallax Attention for Unsupervised Stereo Correspondence Learning
Stars: ✭ 62 (-98.04%)
Mutual labels:  parallax
vue3-spring
A spring-physics based animation library, and more
Stars: ✭ 30 (-99.05%)
Mutual labels:  parallax
Parallax
Easy parallax View for Android simulating Apple TV App Icons
Stars: ✭ 271 (-91.45%)
Mutual labels:  parallax

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

Installation

$ npm i react-native-app-intro --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',
      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
Children View Properties
Prop PropType Default Value Description
level number parallax effect level
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].