jacse / react-native-app-intro-slider Goto Github PK

I have been trying to re-route from the app-intro-slider(Welcome Screen) to the Login Screen using the following method

render(){
_onDone=()=>{
this.props.navigation.navigate('Login')
};
return (

);
}
But it doesn't work. Please correct me as I am still a brand new to react-native.

It would be great if the default styles could be easily overridden. Something like:

  constructor(props) {
    super(props)

    this.state.styles = { styles, ...props.styles }
  } 

and then use this.state.styles instead of styles in the code. Right now, it's a little cumbersome to have to provide a new render function just to change the style of a skip/next/done text button.

Thanks!

Is there a way that you code out your slides separately? For example, I want to have different styles for each slide, so I would want my files to be like firstSlide.js, secondSlide.js etc

Hi!

If someone knows how to implement it with the mentioned in the title library?

Hi
The image scaling was not same for android and ios.It scaled differently for android cropping some part of the image on the screen.
But it fits the image in ios.

Hi,
here is my code:

_renderItem = (props) => {
	return (	
		<View style={styles.container}>
			<Image source={images.background} style={styles.backgroundImage} >
				<View style={styles.titleView}>
					<Image source={images.menu_logo}/>
					<Text style={styles.title}>{props.title}</Text>
				</View>

				<View style={styles.bodyView}>
					<Image source={props.image} resizeMode={'contain'} style={styles.image} />
					<Text style={styles.bodyText}>{props.text}</Text>				
				</View>
				<TouchableHighlight
					onPress={this.nextPressed.bind(this)}
					style={styles.okButton}
				>
					<Text style={styles.okButtonText}>OK</Text>
				</TouchableHighlight>
			</Image>
		</View>
	);
}

_nextPressed = () => {
    ..........?????
}

Hi @Jacse, first of all, thanks for the package! But it appears it hasn't been available in npm yet.

Hi, thanks for the amazing repo.
My doubt may not exactly be an issue as such but I'm finding it hard to open a component once done is pressed.
Any help will be highly appreciated.
Code:

import StartApp from './StartApp'

Trial 1:

  render() {
    return (
       <AppIntroSlider slides={slides} onDone={() => <StartApp/>}/>
       );
  }

Trial 2:

_onDone = () => {
   // User finished the introduction. Show "real" app   
    <StartApp/>
 }
  render() {
    return (
       <AppIntroSlider slides={slides} onDone={this._onDone}/>
       );
  }

None of the above two open the StartApp component which I imported.

Thanking in advance.

Here is the code, could you please help me with this? and btw thank you for this repo. Cheers.

import React from 'react';
import { StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import { Spinner } from 'src/components/common';
import { LoginComponent } from 'src/login/LoginComponent';
import MyAuxNavigation from 'src/navigation/Navigation';
import AuthenticationService from 'src/services/firebase/AuthenticationService';
import store from 'src/store/ReduxStore';
import { StyleSheet } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const styles = StyleSheet.create({
  image: {
    width: 320,
    height: 320,
  }
});

const slides = [
  {
    key: 'somethun',
    title: 'Title 1',
    text: 'Description.\nSay something cool',
    backgroundColor: '#59b2ab',
  },
  {
    key: 'somethun-dos',
    title: 'Title 2',
    text: 'Other cool stuff',
    backgroundColor: '#febe29',
  },
  {
    key: 'somethun1',
    title: 'Rocket guy',
    text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
    backgroundColor: '#22bcb5',
  }
];


export default class App extends React.Component {

    _onDone = () => {
     // User finished the introduction. Show "real" app
     <Provider store={store}>
        <MyAuxNavigation />
    </Provider>
   }

  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      currentUser: null
    }
  }

  componentWillMount() {
    StatusBar.setHidden(true)
  }

  componentDidMount() {
    AuthenticationService.onUserAuthChange(user => {
      this.setState({
        currentUser: user,
        loading: false
      })
    })
  }

  render() {
    if (this.state.loading) {
      return <Spinner size="large" />
    } else {
      if (this.state.currentUser == null) {
        return <LoginComponent />
      } else {
        return (
            <AppIntroSlider
                slides={slides}
                onDone={this._onDone}
            />
        )
      }
    }
  }
}

Hello, first of all, thanks for the work on this component.

On the intro of the app I'm working, there is a small pre-registration form. I'm having a problem that the keyboard is dismissing even if I press on another field. The solution would be passing the 'keyboardShouldPersistTaps' to the FlatList inside the app intro slider, but currently there is no way to do this.

Would you accept a pull request adding a new property that would be passed to the flatlist in order to allow a greater level of customization?

Thanks

When I clone the repo and run yarn install followed by exp start in the ./Example directory, the app loads but I get the error "Unsupported top level event type "topScroll" dispatched when I click the "Next" button.

The exp start console also warns the following:

10:00:50 [exp] Warning: Not using the Expo fork of react-native. See https://docs.expo.io/.
10:00:56 [exp] Warning: Installed version 0.2.3 of 'react-native-app-intro-slider' does not satisfy required version file:../
10:00:56 [exp] 
10:00:56 [exp] If there is an issue running your project, please run `npm install` in /path/to/clone/Example and restart.

I think it would be great to add more flexibility in this the slider.

Like I needed to change the label text from white to black since there is no prop and the 'white'

The defaults are great but providing ways to override the default styles would be nice.

I understand this would increase the number of available props but at the same time customization would be easier and everyone would use the same way to do.

Great component. Just what I needed!

One small enhancement:
I would like to style the dots (make them smaller, add a drop shadow, etc).

Hi, great job with that module :)
I would like to know if we can change the Dots' position ?

screens mess up when screen is rotated , two slides appear on the screen

Hi, dots are feels laggy when you slide screens. Anyone know why is that or how to fix it ?
It may cause of development env? I tested on snack.expo it is still same.

How can i navigate to real app after skip or done?

Im using the basic example slider.
This is how i add my slider:

const slides = [

{
	key: 'welcome',
	title: 'Welcome to My App',
	titleStyle: {
		color:"green"
	},
	text: 'Hello you are welcome',
	textStyle: {
		color:"red"
	},
	image: require('../assets/Logo.png'),
	imageStyle:  {
		width: 250,
		height: 325,
		resizeMode: 'contain'
	},
	backgroundColor: '#fff'
}

]

But the text color is not changing. Am i doing something wrong?

Hi, first of all thank you for this awesome library, really easy to use!

So here's my problem. I've got two slides, the last one showing a picker from Native-Base to chose the region the first time the user opens the app.

Here's how I did it:

My slides

const slides = [
  {
    key: 'welcome',
    title: 'Ready to save on your grocery?',
    color: '#000',
    text: 'Search for any item to see if the price is worth it.',
    image: require('./assets/save_money.jpg'),
    imageStyle: styles.image,
    backgroundColor: '#fff',
    showRegion: false
  },
  {
    key: 'region',
    title: 'Choose your region',
    color: '#000',
    text: 'In order to get the best price where you live.',
    image: require('./assets/geolocation.png'),
    imageStyle: styles.image,
    backgroundColor: '#fff',
    showRegionPicker: true //used in the last slide to show region picker
  }
];

My renderItem method

_renderItem = props =>  (
    <View colors={props.colors}>
        <Text style={styles.title}>{props.title}</Text>
        <Image style={styles.image} source={props.image} />
        <Text style={styles.text}>{props.text}</Text>
        {this._renderChooseRegion(props.showRegionPicker, props, this)}
    </View>
  );

And the renderChooseRegion function

_renderChooseRegion = (showRegionPicker, props) => {
    if(showRegionPicker) {
      return (
        <Form>
          <Picker
              iosHeader="Select one"
              mode="dropdown"
              ref={"regionPicker"}
              selectedValue={this.state.region}
              onValueChange={(value) => this.setState({region: value})}
              style={styles.picker}
          >
            <Item label="Alberta" value="test" />
            <Item label="Colombie Britannique" value="testtt" />
          </Picker>
        </Form>
      );
    }
    else {
      return null;
    }
  }

The picker render has expected only on the last slide, but when I change the value, for some reasons it seems like the state is not updating, is it because it is nested in another function that it's not working? I've tried the same code without the slider and it works, do I have to use .bind(this) or something?

I don't think it's an issue with the Picker since its working well with the same code, but I wonder how or why it's not updating. This picker opens a new modal over the Slider.

I'm new to react-native so I'm still learning the basics.

Thanks!

Can you add a skip button to the left side like next and done button ?

In Android, Sometimes the animation is getting skipped,

I am using the basic example you have in the readme.

Dependencies:

"react": "16.3.1",
"react-native": "0.55.4",
"react-native-app-intro-slider": "^0.2.4"

Device: Galaxy Note 8

Gif:

Hello!
Thanks for this package, it's super useful!

I have an issue while using dotStyle & activeDotStyle props. I have something like this:

                <AppIntroSlider
                    slides={slides}
                    onDone={this._onDone}
                    renderItem={this._renderItem}
                    dotStyle={{backgroundColor: 'blue'}}
                    activeDotStyle={{backgroundColor: 'red'}}
                />

Unfortunately there's no change in the backgroundColor of the dots.

I confuse with OnDone function. My code is:

export default class App extends React.Component {
  _onDone = () => {
    render() <HomeScreen />
  }

  render () {
    return (
      <AppIntroSlider
        slides={slides}
        onDone={this._onDone}
      />
    );
  }
}

Please give example. Thanks.. :)

My main screen color is white, So Next, back and done button text/title color is white by default. So, these buttons are not visible. How can we change the text/title color of these buttons?

Hi, and thank you for this component! I'm re-purposing it for a multi-page form and I think two relatively small changes would do it:

1. It would be great to be able to pass a scrollEnabled={false} prop such that touch scrolling is disabled.
2. In order to work with #1, having an exposed function onNext which by default is just:
   () => true by default, but could be over-ridden with a function that returns a boolean. On false, the slide is not advanced.

These two combined will allow for form validation on the current page!

Thanks for putting this repo together. I switched to it from react-native-swiper.

Additionally, would be great there was an option to disable the done button (in my scenario, there is a static OAuth connect button that is visible in each slide).

Is there a way to activate RTL? seems like it's not working.

How to change dot position .

I using

"react": "15.4.2",
 "react-native": "0.41.2",

got
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'AppIntroSlider'
but worked with new version.

Trying to upgrade to version 1.0.0 I run into this error message: A trailing comma is not permitted after the rest element at this line.

Here's a reference to the pull request in babel discussing this issue. The explanation why this is not allowed is quite convincing:

The rationale for this is that the use case for trailing comma is that you can add something at the end without affecting the line above. E.g. for version control software. However, that is never the case here.

Hi !
I am trying to put the Skip button on the right side using the "renderSkipButton" function but no luck.
Is it actually possible ?
Thanks

Hi, here is my code the basic example.

const Home = () => ( <AppIntroSlider slides={slides} onDone={() => console.log('done')} /> )

The problem is; when i click next or swipe it with touch it slides very fast.
Is there a way to slow down transition speed ?

Hello there,

I choosed to hide automatically the navigation bar on my phone, as you can see on the screenshot below the space allocated to the navigation bar are still there. (Android 7.1, Samsung Galaxy S8 Plus)

I tried to make a custom renderItem method and set "paddingBottom" to 0 but it didn't work...

    _renderItem = (props) => {

        const style = {
            backgroundColor: props.backgroundColor,
            paddingTop: props.topSpacer,
            paddingBottom: 0
        }

        return (
            <View style={[styles.mainContent, style]}>
                <Text style={styles.title}>{props.title}</Text>
                <Image source={props.image} style={props.imageStyle} />
                <Text style={styles.text}>{props.text}</Text>
            </View>
        )
    }

Any ideas ?

Hi, first of all, thank you for this. I cannot change the text's color neither title's color. It is weird because I'm able to change the image's style.

textStyle: styles.title (doesn't work)
imageStyle: styles.image (works)

Thank you in advance!

Luis

The slider is very buggy on Android, I have multiple users reporting that they can not scroll through the slider or have to go to the very edge of the screen and scroll slowly to the opposite side in order to scroll to the next slide.

I use app intro on my emulator and its ok, but when i release my app and run it in real device ( any android device ) my app is crashing...

I see the code to replace renderItem:

return this.props.renderItem ? this.props.renderItem(props) : <DefaultSlide {...props} />;

but I don't see any equivalent for renderDoneButton & co. Am I missing something?

I am trying to have one slide that does not have an image (title and text are center aligned on the slide) but by default there is space in the center for an image component. Is there a way I can render a custom first slide?

@Jacse hi, i run example code got error " type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of AppIntroSlider."

"react-native-app-intro-slider": "^0.2.3",

my code

Hi @Jacse ,
I'm testing my app with detox, and in order to get my tests working I have to select the next, prev, skip and done buttons by text, but it gets a little too much work when working with many languages, or when the designer decides to change the default labels.

I think that it could be possible to add attributes like skipButtonTestID, doneButtonTestID, prevButtonTestID and so on, in order to accomplish this. What do you think? Would you be interested in getting a PR for that?

Example doesn't work and it isn't clear how to change the images or anything.

I encountered this issue while sliding the intro screen.

it says Unsupported top level event type dispatched

facebook/react-native#16900

how to set image in background as full image but at the bottom its showing the default black color?

I'm attempting to use your library but I am getting this warning and the slider does not render.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of AppIntroSlider.

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

export default class Example extends Component {
  _onDone = () => {
    this.props.navigator.pop()
  }
  render() {
    return <AppIntroSlider slides={slides} onDone={this._onDone} showSkipButton bottomButton/>;
  }
}

I have also defined the slides variable according to the README docs.

My last slide has a login form on it and when I am typing the pagination moves up and sometimes it is above the input.

Is there a way to make it stays at the bottom without moving when the user is editing an input.

Thanks.

Hi,

Is it possible to enable background image instead of background color through props?

The done button shows normally when there is more than one slide. However, when there is only one slide, the button is no longer rendered.

Maybe the button is placed inside the view that holds the pagination elements?