Hi everybody.
I’m trying to add this intro-slider to my expo project. But as you can see in the red screen above i got some errors.
Notice that:
-I add the dipendecies in package.json
-the module exists in the node_modules folder
app.js:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showRealApp: false,
};
}
_onDone = () => {
this.setState({ showRealApp: true });
};
_onSkip = () => {
this.setState({ showRealApp: true });
};
render() {
if (this.state.showRealApp) {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 50,
}}>
<Text>
This will be your screen when you click Skip from any slide or Done
button at last
</Text>
</View>
);
} else {
//Intro slides
return (
<AppIntroSlider
slides={slides}
onDone={this._onDone}
showSkipButton={true}
onSkip={this._onSkip}
/>
);
}
}
}
const styles = StyleSheet.create({
image: {
width: 200,
height: 200,
},
text: {
color: '#FFFFFF',
fontSize: 20,
},
title: {
fontSize: 28,
fontWeight: 'bold',
color: 'white',
backgroundColor: 'transparent',
textAlign: 'center',
marginTop: 16,
},
});
const slides = [
{
key: 's1',
text: 'Best Recharge offers',
title: 'Mobile Recharge',
titleStyle: styles.title,
textStyle: styles.text,
image: {
uri:
'http://aboutreact.com/wp-content/uploads/2018/08/mobile_recharge.png',
},
imageStyle: styles.image,
backgroundColor: '#20d2bb',
},
{
key: 's2',
title: 'Flight Booking',
titleStyle: styles.title,
text: 'Upto 25% off on Domestic Flights',
image: {
uri:
'http://aboutreact.com/wp-content/uploads/2018/08/flight_ticket_booking.png',
},
imageStyle: styles.image,
backgroundColor: '#febe29',
},
{
key: 's3',
title: 'Great Offers',
titleStyle: styles.title,
text: 'Enjoy Great offers on our all services',
image: {
uri: 'http://aboutreact.com/wp-content/uploads/2018/08/discount1.png',
},
imageStyle: styles.image,
backgroundColor: '#22bcb5',
},
];