All Projects → Richi2293 → Rn Falcon App Intro

Richi2293 / Rn Falcon App Intro

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Rn Falcon App Intro

Androidonboarder
A simple way to make a beauty onboarding experience (app intro or welcome screen) for your users.
Stars: ✭ 269 (+228.05%)
Mutual labels:  app, introduction, intro
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...
Stars: ✭ 3,169 (+3764.63%)
Mutual labels:  introduction, intro, parallax
Dynamic Support
A complete library to build Android apps with a built-in theme engine.
Stars: ✭ 218 (+165.85%)
Mutual labels:  app, intro
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (+3292.68%)
Mutual labels:  introduction, intro
Xam.plugin.simpleappintro
Just a nice and simple AppIntro for your Xamarin Forms project
Stars: ✭ 139 (+69.51%)
Mutual labels:  app, intro
VSpot
A nice focus view intro for your app. Focus a specific view on first time launch
Stars: ✭ 27 (-67.07%)
Mutual labels:  introduction, intro
Flutter parallax scroll
Flutter UI challenge- Parallax scroll effect
Stars: ✭ 172 (+109.76%)
Mutual labels:  app, parallax
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 (+242.68%)
Mutual labels:  introduction, intro
React Native Onboarding Swiper
🛳 Delightful onboarding for your React-Native app
Stars: ✭ 596 (+626.83%)
Mutual labels:  introduction, intro
Snipit
Snipit allows you to capture and save interesting sections from any source of information. Be it textbooks, journals, computer screens, photographs, flyers, writings on a whiteboard, etc.
Stars: ✭ 70 (-14.63%)
Mutual labels:  app
Stickynotes
A Sticky Note Application
Stars: ✭ 74 (-9.76%)
Mutual labels:  app
Covid tracker
A covid statistics app made with Flutter SDK
Stars: ✭ 70 (-14.63%)
Mutual labels:  app
Attabench
Microbenchmarking app for Swift with nice log-log plots
Stars: ✭ 1,167 (+1323.17%)
Mutual labels:  app
Flutterwebsite
The flutter.dev website recreated in Flutter. https://gallery.codelessly.com/flutterwebsites/flutterwebsite
Stars: ✭ 76 (-7.32%)
Mutual labels:  app
Parallaxview
Parallax view for android apps written in Kotlin
Stars: ✭ 70 (-14.63%)
Mutual labels:  parallax
Flutter Wechat
🔥A flutter app which clones wechat,it's based on flutter and dart, it's on the road! 这是一个仿照微信样式基于flutter实现的app,还在继续完善中,使用到了flutter中大多数的组件,适合以此项目进行flutter学习。 https://dzou.top
Stars: ✭ 80 (-2.44%)
Mutual labels:  app
Checknewappversionavailable
It makes a request to Play Store to check if there is a new version of your published app
Stars: ✭ 69 (-15.85%)
Mutual labels:  app
Zap
Blazing fast web shortcuts.
Stars: ✭ 69 (-15.85%)
Mutual labels:  app
Framework7 Template Vue Simple
Deprecated! Simple Framework7 Vue starter app template in a single HTML file
Stars: ✭ 81 (-1.22%)
Mutual labels:  app
Gh Polls Web
Web front-end for GitHub Polls.
Stars: ✭ 78 (-4.88%)
Mutual labels:  app

rn-falcon-app-intro

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...
This component is based on this no longer followed frequently: react-native-app-intro


Table of Content

  1. Example
  2. Installation
  3. Usage
  4. Properties
  5. Contributing

Example

Example code

Support ios and android

Installation

For React Native <=60

$ npm i [email protected] --save

For React Native >=60

$ npm i rn-falcon-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 'rn-falcon-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);

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 'rn-falcon-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
scrollEnabled bool true a boolean that defines if swiping is enabled or disabled
width number default width of the device a number that defines the width of the view swiper
height number default height of the device a number that defines the height of the view swiper
flexContainer number 1 a number that defines the flex value of the view swiper
Children View Properties
Prop PropType Default Value Description
level number parallax effect level

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

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].