Support images?

[eamonnalphin]

Is there a way to display an image in a card?

<Swiper
          getNextCardData={({first, swipeDirection, previousCards}) => {
            if (previousCards.length >= 10) {
              // End of deck
              return null;
            } else if (first) {
              return (
                <Image
                  style={styles.image}
                  source={{
                    uri:
                      'https://www.onceuponachef.com/images/2010/08/hamburgers-575x754.jpg',
                  }}
                />
              );
            } else {
              return `You swiped to the ${swipeDirection}. This is card #${
                previousCards.length + 1
              }.`;
            }
          }}
          preventVerticalDragging={false}
          onEndReached={() => console.log('end reached')}
          onSwiped={() => console.log('card swiped')}
          onSwipeAborted={() => console.log('swipe aborted')}
          onSwipedLeft={() => console.log('left swipe')}
          onSwipedRight={() => console.log('right swipe')}
          onDragStart={() => console.log('begin drag')}
          onDragEnd={() => console.log('finish drag')}
          disableSwipeUp={false}
          disableSwipeDown={false}>
          {(card) =>
            card === null ? (
              <View style={styles.card}>
                <Text style={styles.text}>
                  You've reached the end of the deck, pal.
                </Text>
              </View>
            ) : (
              <View style={styles.card}>
                <Text style={styles.text}>{card}</Text>
              </View>
            )
          }
        </Swiper>

just leaves a blank card...

[ajenkins]

Can you share the code for styles.image? I tested it on my machine and I can get an image to display in the card. Here's the code I used for the render prop (I didn't change any other code in example/App.js):

{(card) =>
          card === null ? (
            <View style={styles.card}>
              <Text style={styles.text}>
                You've reached the end of the deck, pal.
              </Text>
            </View>
          ) : (
            <View style={styles.card}>
              <Image
                style={styles.tinyLogo}
                source={{
                  uri: 'https://reactnative.dev/img/tiny_logo.png'
                }}
              />
            </View>
          )
        }

And here's what I have for styles:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  card: {
    flex: 1,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: '#E8E8E8',
    justifyContent: 'center',
    backgroundColor: 'turquoise',
    marginTop: 60,
    marginBottom: 60,
    marginLeft: 30,
    marginRight: 30,
    borderRadius: 30,
    padding: 10
  },
  text: {
    textAlign: 'center',
    fontSize: 50,
    backgroundColor: 'transparent'
  },
  tinyLogo: {
    width: 50,
    height: 50
  }
});

Here's what it looks like when I run it locally:

You might also want to try pulling master again. I found a few bugs when trying to run the code locally, and I just pushed up those fixes. They were import errors though, so I don't think they would be relevant to this issue.