React Native Components

1import React from 'react';
2import {Image, StyleSheet} from 'react-native';
3import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
4
5// HERE IS A RANDOM CODE EXAMPLE FROM https://reactnative.dev/docs/image
6// THIS CODE HAS NOTHING TO DO WITH THE CODE PROVIDED FROM DEVSTARTERPACKS.COM
7
8const styles = StyleSheet.create({
9  container: {
10    flex: 1,
11  },
12  tinyLogo: {
13    width: 50,
14    height: 50,
15  },
16  logo: {
17    width: 66,
18    height: 58,
19  },
20});
21
22const DisplayAnImage = () => (
23  <SafeAreaProvider>
24    <SafeAreaView style={styles.container}>
25      <Image
26        style={styles.tinyLogo}
27        source={require('@expo/snack-static/react-native-logo.png')}
28      />
29      <Image
30        style={styles.tinyLogo}
31        source={{
32          uri: 'https://reactnative.dev/img/tiny_logo.png',
33        }}
34      />
35      <Image
36        style={styles.logo}
37        source={{
38          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
39        }}
40      />
41    </SafeAreaView>
42  </SafeAreaProvider>
43);
44
45export default DisplayAnImage;