Как добавить изображение в плоскую сетку-вид в реагировать родной

Question

Я хочу добавить изображение к плоской сетке.Я использую response-native-super-grid.actually, я хочу добавить это svg-файл, как в примере. Но результат показывает белый экран, другие значки сетки работают нормально.я хочу добавить изображение с помощью Интернета, а не локально, так как хочу уменьшить размер моего приложения.

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  ScrollView,
  Button,
  Alert,
  TouchableHighlight,
  TouchableOpacity,
} from 'react-native';
import { Card } from 'react-native-paper';
import { FlatGrid } from 'react-native-super-grid';
import { Header, Content, CardItem, Right, Container, Body } from 'native-base';
import Modal from 'react-native-modal';
import { Icon } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';

import CardAsset from '../components/CardAsset';
import FollowCard from './followCard';

export default class CardViewScreen extends React.Component {
  render() {

    const items = [
      { uri: 'https://image.flaticon.com/icons/svg/55/55240.svg', category: 'Sports' },
       { name: 'EMERALD', code: '#2ecc71' },
      { name: 'PETER RIVER', code: '#3498db' }, 
      { name: 'AMETHYST', code: '#9b59b6' },
      { name: 'WET ASPHALT', code: '#34495e' }, 
      { name: 'GREEN SEA', code: '#16a085' },
    ];
    return (
      <ScrollView>
        <View style={styles.container}>
          <Card style={{ padding: 0 }}>
            <FlatGrid
        itemDimension={100}
        items={items}
        style={styles.gridView}
        // staticDimension={300}
        // fixed
        // spacing={20}
        renderItem={({ item, index }) => (
          <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
            <Text style={styles.itemName}>{item.name}</Text>
            <Text style={styles.itemCode}>{item.code}</Text>
          </View>
        )}
      />
          </Card>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 50,
  },
  // cardView: {
  //   width: 120,
  //   height: 120,
  //   marginLeft: 25,
  //   marginTop: 20,
  // },
  // cardViewBottom: {
  //   width: 120,
  //   height: 120,
  //   marginLeft: 25,
  //   marginTop: 20,
  //   marginBottom: 20,
  // },
  // imageContainer: {
  //   alignItems: 'center',
  //   justifyContent: 'center',
  //   padding: 24,
  // },
  // logo: {
  //   height: 50,
  //   width: 50,
  // },
    gridView: {
    marginTop: 20,
    flex: 1,
  },
  itemContainer: {
    justifyContent: 'flex-end',
    borderRadius: 5,
    padding: 10,
    height: 150,
  },
  itemName: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '600',
  },
  itemCode: {
    fontWeight: '600',
    fontSize: 12,
    color: '#fff',
  },
});

это то, что я пробовал, но оно показывает только белый экран.любая помощь будет благодарна.

Спасибо.