Display Image & Text Side By Side In React Native

Question

I need some help regarding react-native images side by side. I am unable to get it done in the right way. I want these images to display side by side, in two columns and 2 rows. Here is my code

<View style={{ flexDirection: "row" }}>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={transport}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={entertainment}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={doorkay}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
                <Text>Sample</Text>
                <TouchableOpacity
                  style={{ alignItems: "center" }}
                  onPress={() =>
                    Linking.openURL(
                      "#"
                    )
                  }
                >
                  <Image
                    source={blood}
                    style={{ width: 150, height: 120, padding: 50 }}
                  />
                </TouchableOpacity>
              </View>

enter image description here I am also attaching the result which i got. Please help. Thanks to everyone

Answer 1

Hi you can take a look at snacks that I created here: https://snack.expo.io/@shawwals/image-side-by-side

Hopefully it can help you.