1import { ImageBackground } from 'expo-image';
2import { StyleSheet, Text, View } from 'react-native';
3
4import { Colors } from '../../constants';
5
6export default function ImageBackgroundScreen() {
7  return (
8    <View style={styles.container}>
9      <ImageBackground
10        style={styles.imageContainer}
11        imageStyle={styles.image}
12        source={require('../../../assets/images/highres.jpeg')}>
13        <View style={styles.textContainer}>
14          <Text style={styles.text}>Renders on top of image</Text>
15        </View>
16      </ImageBackground>
17    </View>
18  );
19}
20
21const styles = StyleSheet.create({
22  container: {
23    flex: 1,
24    padding: 20,
25  },
26  imageContainer: {
27    borderWidth: 1,
28    height: 200,
29    borderColor: Colors.border,
30    padding: 20,
31    gap: 10,
32  },
33  image: {},
34  textContainer: {
35    backgroundColor: 'black',
36    padding: 5,
37  },
38  text: {
39    color: 'white',
40    textAlign: 'center',
41    fontSize: 20,
42    fontWeight: '700',
43  },
44});
45