Code
import React, { Component } from 'react';
import {
Platform,
Text,
View,
ScrollView,
ToolbarAndroid,
Image,
StyleSheet,
Button,
TouchableOpacity
} from 'react-native';
let img = require('./images/monkeying.png');
const AndroidErrorScreen = (props) => {
return <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={styles.container}>
<View style={styles.bar}>
<TouchableOpacity activeOpacity = { .5 } onPress={ props.close }>
<Image onPress={props.close} style={styles.closeImg} source={require('./images/close.png')} />
</TouchableOpacity>
<Text style={styles.barText}>Templates</Text>
</View>
<View style={styles.box}>
<Image borderWidth={2} borderColor="#000" resizeMode="contain" style={styles.monkeyingImg} source={img} />
</View>
<View style={styles.box}>
<Text style={styles.messageTitle}>We’re sorry</Text>
<Text style={styles.message}>{props.message}</Text>
<Text>Please try again later.</Text>
</View>
<View borderTopColor="#ddd" borderTopWidth={1} style={styles.box}>
<Text
onPress={props.close}
title="GOT IT"
style={styles.gotItBotton}
>
GOT IT
</Text>
</View>
</View>
</ScrollView>;
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f7f7f7',
height: '100%'
},
monkeyingImg: {
maxWidth: '80%',
alignSelf: 'center'
},
closeImg: {
width: 24,
height: 24,
marginRight: 30,
marginLeft: 15
},
box: {
width: '100%',
margin: 0,
alignItems: 'center',
padding: 0
},
bar: {
height: 56,
width: '100%',
backgroundColor: '#404346',
alignContent: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
alignItems: 'center',
},
barText: {
color: '#fff',
fontSize: 25
},
gotItBotton: {
paddingTop: 10,
fontSize: 20,
width: '100%',
height: 48,
textAlign: 'center',
color: '#2cbf55'
},
messageTitle: {
fontSize: 23,
color: '#404346',
fontWeight: '600',
marginBottom: 20
},
message: {
marginBottom: 15
}
});
export default AndroidErrorScreen;