React-native UI challenge

Issue

Today I tried to make a design as shown below!

But in the end, I managed to do it up to 50 percent. Couldn't put the rightmost button at the end of the View. So my code so far -

const data = [
  { title: "Introduction\n06:25/17:45" },
  { title: "What is Design Thinking\n00:00 / 12:50" },
  { title: "What is UX Design?\n00:00/09:32" },
];
...
const buttonStyle = {
  flex: 1,
  alignItems: "center",
  marginLeft: 15,
  marginRight: 15,
  flexDirection: "row",
  height: 57,
  borderRadius: 10,
  backgroundColor: "#fff",
  marginTop: "5%",
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 6,
  },
  shadowOpacity: 0.39,
  shadowRadius: 8.3,
  elevation: 13,
};

<ScrollView
  style={{
    flex: 1,
    width: "100%",
    paddingTop: 20,
  }}>
  {data.map((item, index) => {
    return (
      <View style={buttonStyle} key={index}>
        <Image
          source={require("./assets/play.png")}
          style={{ height: 32, width: 32, marginLeft: "5%" }}
        />
        <Text
          style={{
            color: "#b5b3c2",
            marginLeft: 15,
            textAlign: "left",
          }}>
          {item.title}
        </Text>
        <Image
          source={require("./assets/fail.png")}
          style={{
            height: 32,
            width: 32,
            justifyContent: "flex-end",
          }}
        />
      </View>
    );
  })}
</ScrollView>

As you can see, the rightmost picture is not in the right place. I don't know how to fix it. Sorry for my bad English! Also, the page hides my part of my ScrollView!

Solution

justifyContent is akin to justify-content in standard flexbox. It is used to justify elements within a container. You should use alignSelf: 'flex-end', or set an auto-margin on the left-hand side of the <Image /> component:

<Image
   source={require("./assets/fail.png")}
   style={{
        height: 32,
        width: 32,
        justifyContent: "flex-end",
    }}
/>

Regarding the missing drop-shadow, you need to add padding to the internal component of the ScrollView using the contentContainerStyle attribute:

<ScrollView
    style={{ flex: 1, width: "100%", paddingTop: 20 }}
    contentContainerStyle={{ paddingBottom: 20 }}
>

It's also worth noting that this should probably be rendered as a <FlatList />, rather than a <ScrollView />.

Answered By - BenM