You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.1 KiB
54 lines
1.1 KiB
6 years ago
|
import React from "react";
|
||
|
|
import { View, StyleSheet, Dimensions, Image } from "react-native";
|
||
|
|
|
||
|
|
const screen = Dimensions.get("window");
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
position: "absolute",
|
||
|
|
top: 0,
|
||
|
|
bottom: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
flex: 1,
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center"
|
||
|
|
},
|
||
|
|
circle: {
|
||
|
|
backgroundColor: "#ff4136",
|
||
|
|
width: screen.width / 2,
|
||
|
|
height: screen.width / 2,
|
||
|
|
borderRadius: screen.width / 2,
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center"
|
||
|
|
},
|
||
|
|
circleCorrect: {
|
||
|
|
backgroundColor: "#28A125"
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
width: screen.width / 3
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
export const Alert = ({ correct, visible }) => {
|
||
|
|
if (!visible) return null;
|
||
|
|
|
||
|
|
const icon = correct
|
||
|
|
? require("../assets/check.png")
|
||
|
|
: require("../assets/close.png");
|
||
|
|
|
||
|
|
const circleStyles = [styles.circle];
|
||
|
|
|
||
|
|
if (correct) {
|
||
|
|
circleStyles.push(styles.circleCorrect);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<View style={circleStyles}>
|
||
|
|
<Image source={icon} style={styles.icon} resizeMode="contain" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|