React native , text getting cut off when i style image

Question

Below is my code which shows image and text inside a view, text gets cut off as i style image

   </ScrollView>
        <View style={{ flex: 1 }}>
      <Image
        source={require("../../assets/bannerImages/1.jpg")}
        resizeMode={"center"}
        style={{ height: "30%", width: "100%" }}
      />
      <Text style={{ flex: 1 }}>
        1Aawaz is a one step solution for all. Not only popular instruments
        2like Guitar, Keyboard, Drums but also we provide training for rare
        3Aawaz is a one step solution for all. Not only popular instruments
        4like Guitar, Keyboard, Drums but also we provide training for rare
        5Aawaz is a one step solution for all. Not only popular instruments
        like Guitar, Keyboard, Drums but also we provide training for rare
        Aawaz is a one step solution for all. Not only popular instruments
        like Guitar, Keyboard, Drums but also we provide training for rare
        like Guitar, Keyboard, Drums but also we provide training for rare
        Aawaz is a one step solution for all. Not only popular instruments
        like Guitar, Keyboard, Drums but also we pr like Guitar, Keyboard,
        9Drums but also we provide training for rare Aawaz is a one step
        10solution for all. Not only popular instruments like Guitar,
        Keyboard, 13Drums but also we pr Ads
      </Text>
    </View>
  </ScrollView>

What i want is to display text below image and also be able to give width and height to image. Before styling image, everything works fine and text is not clipped.

sorry ,but it looks like image is adjusted to given width and height but text is getting clipped of. This only happens when i give height and width to image. — Akash Salunkhe, Nov 14 '18 at 06:10
https://stackoverflow.com/questions/36284453/react-native-text-going-off-my-screen-refusing-to-wrap-what-to-do/45015766#45015766. you want something like this? — Ashok R, Nov 14 '18 at 09:37

score 1 · Accepted Answer · answered Nov 14 '18 at 09:32

This issue is present only on Android and your code is working fine on iOS. It is cased by the style of the image where you are trying to set the height of the image to be 30% of the screen height.

style={{ height: "30%", width: "100%" }}

The height of the image is calculated correctly but it is not added to the total height of the ScrollView. The issue is present only when setting the image height with percentages and works fine when using numeric values. One way to solve the problem is by using React-Native's Dimensions

First we need to get the screen height const { height } = Dimensions.get('window') and after to calculate 30% of the screen to set the image height const imageHeight = (30 / 100) * height

Here is the solution:

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

const { height } = Dimensions.get('window');
const imageHeight = (30 / 100) * height; // calculates 30% of the screen

<ScrollView>
    <View style={{ flex: 1 }}>
        <Image
            source={require("../../assets/bannerImages/1.jpg")}
            resizeMode={"center"}
            style={{ height: imageHeight, width: "100%" }}
        />
        <Text style={{ flex: 1 }}>
            1Aawaz is a one step solution for all. Not only popular instruments
            2like Guitar, Keyboard, Drums but also we provide training for rare
            3Aawaz is a one step solution for all. Not only popular instruments
            4like Guitar, Keyboard, Drums but also we provide training for rare
            5Aawaz is a one step solution for all. Not only popular instruments
            like Guitar, Keyboard, Drums but also we provide training for rare
            Aawaz is a one step solution for all. Not only popular instruments
            like Guitar, Keyboard, Drums but also we provide training for rare
            like Guitar, Keyboard, Drums but also we provide training for rare
            Aawaz is a one step solution for all. Not only popular instruments
            like Guitar, Keyboard, Drums but also we pr like Guitar, Keyboard,
            9Drums but also we provide training for rare Aawaz is a one step
            10solution for all. Not only popular instruments like Guitar,
            Keyboard, 13Drums but also we pr Ads
        </Text>
    </View>
</ScrollView>

React native , text getting cut off when i style image

1 Answers1