0

enter image description here

In my project I am building a Cart like component that will be rendered on the screen. Like the image given, the moment my text got larger, it pushes away my image and makes it overflow out of its parent container.

I am using this properties for styling :

import React from "react";
import { TouchableOpacity, View, Text, StyleSheet, Image } from "react-native";

const OptionComponent = (props) => {
  return (
    <TouchableOpacity style={styles.mainContainer} onPress={props.onPress}>
      <View style={styles.element1}>
        <Image
          source={require("../assets/images/unnamed.png")}
          style={styles.image1}
        ></Image>
        <Text style={styles.text}>{props.text}</Text>
      </View>
      <View style={styles.element2}>
        <Image
          source={require("../assets/images/unnamed.png")}
          style={styles.image2}
        ></Image>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    width: "42%",
    height: 100,
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "green",
    borderRadius: 20,
  },
  element1: {
    justifyContent: "space-between",
    padding: "7%",
  },

  image1: {
    width: 35,
    height: 35,
    borderRadius: 10,
  },

  element2: {
    alignItems: "center",
    justifyContent: "center",
  },

  image2: {
    width: 50,
    height: 50,
  },

  text: {
    color: "white",
  },
});

export default OptionComponent;

thanks in advance!

Anxheloo
  • 15
  • 2
  • Can you just set a definite width for the Text or element1 like you did with the image? – fordat Jul 07 '23 at 20:16
  • Whats your suggestion to set your app responsive in multiple devices? is it a good practice to use % or fixed? – Anxheloo Jul 08 '23 at 11:39
  • I prefer not to use percentages where I can other than 100% or 50% but maybe that's just me. My preference is to use media queries that apply different fixed widths, but it depends on the situation. Using either would work to fix your problem I think. – fordat Jul 10 '23 at 16:05

0 Answers0