Dynamic width of cell React Native

Question

I am trying to achieve make dynamic size cell for a simple chat view on React Native. The question and answers in Flex box dynamic width and height link helped me much but I did not make apply dynamic width to the cells. Here is the cell code of myself.

class ChatCell extends React.Component {
  render() {
    return (
      <View style={{ marginTop: 10, marginBottom: 10 }}>
        <View
          style={{
            backgroundColor: "rgba(245,25,116,1)",
            borderBottomLeftRadius: 12,
            borderTopLeftRadius: 12,
            borderTopRightRadius: 12,
            marginLeft: 100,
            marginRight: 15,
            padding: 5,
            flex: -1
          }}
        >
          <Text
            style={{
              padding: 5,
              textAlign: "right",
              fontFamily: "inter-medium",
              color: "white"
            }}
          >
            {this.props.message}
          </Text>
        </View>
      </View>
    );
  }
}

And here is the screenshot of what I made.

My problem is when I enter a simple message such as 'OK!' it must be stretch to its width. So how can I achieve it, like giving minimum width? I tried to add alignSelf:'stretch' but it did not work for me.

What is the missing part of what I am doing wrong?

Thanks,

Hmm can i have a jFiddle demo – akshay kishore Jun 18 '19 at 14:45 — akshay kishore, Jun 18 '19 at 14:45

score 4 · Accepted Answer · answered Jun 18 '19 at 15:13

4

Please check some similar questions here, here and here.

You can try adding alignSelf: 'flex-start' or alignSelf:'baseline' in the View to make it fit it's content.

answered Jun 18 '19 at 15:13

Vencovsky

28,550
17
109
176

2

thanks for the simple hint. I used `alignSelf:'flex-start'` and remove `marginLeft`prop then worked for me. I made a mistake earlier with putting `alignSelf:'flex-start'` block to not containerView just the outermost view. Thanks – eemrah Jun 18 '19 at 17:40

score 0 · Answer 2 · answered Jan 08 '23 at 01:03

Here is how I did it using tailwind css.

<View style={[tw`flex flex-row flex-wrap`, {}]}>
    <Text
        style={[
            tw`rounded-xl text-white py-3 px-4 mb-1 mt-2 text-gray-200 ml-auto`,
            {
                backgroundColor: "#0E011D",
                maxWidth: "75%",
                borderColor: "#080010",
                borderWidth: 1,
            },
        ]}
    >
        Okay!
    </Text>
    <View style={tw`w-full flex items-center flex-row`}>
        <Text style={tw`ml-auto`}></Text>
        <Icon
            name="done-all"
            type="material"
            size={12}
            color="#00B0FF"
        />
        <Text style={tw`text-gray-500 truncate ml-1 mr-2`}>
            seen
        </Text>
        <Text style={tw`text-gray-500 text-md`}>06:45</Text>
    </View>
</View>

Dynamic width of cell React Native

2 Answers2