Разработать мобильное приложение, отображающее 10 разукрашенных в разные цвета представлений

import * as React from 'react';
import {View} from 'react-native';
export default function App(){
  return( 
  <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
  <View>
  <View style={{width: 50, height: 50, backgroundColor: '#ff0000'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#030303'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#2f18c4'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#12bbc7'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#27d658ff'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#deb316ff'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#b710e0ff'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#e80e5eff'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#7d7779ff'}} />
  <View style={{width: 50, height: 50, backgroundColor: '#1d7f69ff'}} />
</View>
  </View>
)
}

export default class Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.p1}/>
                <View style={styles.p2}/>
                <View style={styles.p3}/>
                <View style={styles.p4}/>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor:'#33ffff'
    },
    p1: {
        width: 50,
        height: 50,
        backgroundColor: 'red',
        position: 'absolute',
        left: 50,
        top: 50
    },
    p2: {
        width: 50,
        height: 50,
        backgroundColor: 'yellow',
        position: 'absolute',
        right: 50,
        bottom: 50
    },
    p3: {
        width: 50,
        height: 50,
        backgroundColor: 'blue',
        position: 'absolute',
        bottom: 50,
    },
    p4: {
        width: 50,
        height: 50,
        backgroundColor: '#666',
        position: 'absolute',
        bottom: 50,
        alignSelf: 'center'
    }
});