CODEWITHSUNDEEP
javascripthtmlimagereact-nativetext
ray mai
ray mai

Reputation: 101

Top-Bottom Text Besides Image in React Native

I am currently trying to write upper and bottom text besides an image in react native Similar to this:

[Photo 1] Song Name

[Photo 1] Song Title

But I am getting something like this:

[Photo 1] Song Name Song Title

The title and name of Song should be besides the image like heading and subheading. I have tried many ways including making children text components and otherwise with no success. A recreation of my code is below for your reference:

import React, { Component } from 'react';
import { View, Image, Text } from 'react-native';

export default class DisplayAnImage extends Component {
  render() {
    return (
      <Text>
        <Image
          style={{width: 50, height: 50}}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Text> Song Name </Text>
        <Text> Song Title </Text>
      </Text>
    );
  }
}

Upvotes: 0

Views: 465

Answers (1)

hunzala shakeel
hunzala shakeel

Reputation: 38

<View style={{ flexDirection: 'row' }}>
    <Image style={{ width: 50, height: 50}} source={require('@expo/snack-static/react-native-logo.png')}
    <View style={{justifyContent: 'center'}}>
        <Text>this is heading</Text>
        <Text>this is subheading</Text>
   </View>
</View>

try this styling

Upvotes: 1

Related Questions