App.js

import { StyleSheet, Text, View, Image } from 'react-native';
import { Dimensions } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.flex}>
        <Image
          style={styles.avatar}
          source={require('./assets/images/Car_1.jpg')}
        />
        <Text style={styles.textPrimary}>Daniel James</Text>
        <Text>Software Engineer</Text>
      </View>
      <View>
        <Text style={styles.textSecondary}>Gallery</Text>
        <Image
          style={styles.galleryPrimary}
          source={require('./assets/images/Car_2.jpg')}
        />
        <View style={styles.galleryFlex}>
          <Image
            style={styles.gallerySecondary}
            source={require('./assets/images/Car_3.jpg')}
          />
          <Image
            style={styles.gallerySecondary}
            source={require('./assets/images/Car_4.jpg')}
          />
        </View>
      </View>
    </View>
  );
}

const win = Dimensions.get('window');
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingVertical: 40,
    paddingHorizontal: 20,
  },

  flex: {
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 40,
  },

  avatar: {
    height: 60,
    width: 60,
    borderRadius: 1000,
    marginBottom: 10,
  },

  textPrimary: {
    fontSize: 16,
    fontWeight: 'bold',
  },

  textSecondary: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 10,
  },

  galleryFlex: {
    flexDirection: 'row',
  },

  galleryPrimary: {
    height: 120,
    width: '100%',
    resizeMode: 'cover',
    margin: 2,
  },

  gallerySecondary: {
    height: 120,
    width: '50%',
    resizeMode: 'cover',
    margin: 2,
  },
});