Is it possible to include images dynamically in react-native?

Question

JavaScript

There is a task to load a lot of cards, each has its own picture. This is what the Card.js component looks like

<Image source={require(this.props.image)} style={styles.cardImage}>

import React, { Component } from 'react';

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

export default class Card extends Component {
    render() {

        console.log(this.props.image);

        return (
            <View>
                <Image source={require(this.props.image)} style={styles.cardImage}>
                    <View style={styles.wrapCard}>
                        <Text style={styles.titleCard}>{this.props.title}</Text>
                    </View>
                </Image>
            </View>
        )
    }
}

styles = StyleSheet.create({
    cardImage: {
        flex: 1,
        width: 278,
        height: 107,
        resizeMode: 'cover', // or 'stretch'
    },

    wrapCard: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    titleCard: {
        fontSize: 16,
        fontWeight: "900",
        color: '#0f1d1e',
    }
});

Through props we pass the string the path to the picture

import React, { Component } from 'react';
import {
    AppRegistry,
    Alert,
    StyleSheet,
    ScrollView,
    Text,
    Button,
    Image,
    View
} from 'react-native';

import CardContainer from './src/components/containers/CardContainer';

import Logo from './src/components/view/Logo/Logo';
import Authorization from './src/components/view/Authorization/Authorization';
import Search from './src/components/view/Search/Search';

export default class app extends Component {
  render() {
    return (
        <ScrollView>
            <View style={styles.headerContainer}>
                <View style={styles.headerLogoContainer}>
                    <Logo/>
                </View>
                <View style={styles.headerButtonContainer}>
                    <Authorization/>
                </View>
            </View>
            <View style={styles.searchContainer}>
                <Search/>
            </View>
            <View style={styles.searchContainer}>
                <CardContainer title={"Кредиты"} imageName={"./t-v.png"}/>
            </View>
            <View style={styles.searchContainer}>
                <CardContainer title={"Займы"} imageName={"./t-v2.png"}/>
            </View>

        </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
    headerContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },

    headerLogoContainer: {
        flex: 0.5,
        height: 50,
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'flex-start'
    },

    headerButtonContainer: {
        flex: 0.5,
        flexDirection: 'column',
        justifyContent: 'space-between',
        height: 50,
        alignItems: 'flex-end'
    },

    searchContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop: 16,
        marginBottom: 24,
    }
});

AppRegistry.registerComponent('app', () => app);

Is it possible to connect images dynamically? Through require gives: Unknown named module: './tv.png'
case not an option

Answer 1

It turned out to be the only way to do it, put the require in the index and lower it through props

<CardContainer title={"Кредиты"} source={require('./src/components/view/Card/t-v.png')}/>