'use strict';
import React, { Component } from 'react';
import AppIntro from 'react-native-app-intro'
import {
StyleSheet,
TextInput,
View,
Image,
Text,
Dimensions,
} from 'react-native';
class AppPreview extends Component {
constructor(props) {
super(props);
}
render() {
return (
<AppIntro dotColor='#eeeef0' activeDotColor='#c7c7cd' rightTextColor='red' leftTextColor='blue'>
<View style={[styles.slide]}>
<View level={10} style={[styles.header]}>
<View style={[styles.imageContainer]}>
<Image
resizeMode="stretch"
style={[styles.image]}
source={{uri:'https://dummyimage.com/200x300/000/fff.png'}}/>
</View>
</View>
<View level={10} style={[styles.footer]}>
<Text style={styles.headline}>Title 1</Text>
<Text style={styles.description}>Description 1</Text>
</View>
</View>
<View style={[styles.slide]}>
<View level={10} style={[styles.header]}>
<View style={[styles.imageContainer]}>
<Image
resizeMode="stretch"
style={[styles.image]}
source={{uri:'https://dummyimage.com/200x300/000/fff.png'}}/>
</View>
</View>
<View level={10} style={[styles.footer]}>
<Text style={styles.headline}>Title 2</Text>
<Text style={styles.description}>Description 1</Text>
</View>
</View>
</AppIntro>
);
}
}
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
header: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
alignSelf: 'stretch',
},
footer: {
flex: 1,
backgroundColor: 'white',
alignSelf: 'stretch',
},
imageContainer: {
flex: 1,
marginTop: 45,
marginRight: 42,
marginLeft: 42,
},
image: {
flex: 1,
width: deviceWidth - 82,
height: deviceHeight / 2,
},
headline: {
textAlign: 'center',
fontSize: 30,
paddingTop:30,
borderWidth: 2,
borderColor: 'black',
},
description: {
textAlign: 'center',
fontSize: 18,
paddingTop:20,
borderWidth: 2,
borderColor: 'green',
},
});
export default AppPreview;
But here's what I'm expecting to get (of course with the dots and skip button, ect. ) :
in the above screen shot basically I just used one of the view wrapper which I have inside my AppIntro
which means:
<View style={[styles.slide]}>
<View level={10} style={[styles.header]}>
<View style={[styles.imageContainer]}>
<Image
resizeMode="stretch"
style={[styles.image]}
source={{uri:'https://dummyimage.com/200x300/000/fff.png'}}/>
</View>
</View>
<View level={10} style={[styles.footer]}>
<Text style={styles.headline}>Title 1</Text>
<Text style={styles.description}>Description 1</Text>
</View>
</View>