Today i tried to make design as shown below! Image

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>

My Image

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 page hide my part of my ScrollView!

CodePudding user response：

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 />.