How can I make my text just below the image without disturbing buttons and images? I want to make text just below the image so I tried doing margin-top, and top but then it disturbs the buttons, and the image and text are sticking to each other I also tried to put text into a view so I same problem Can you help me to do that? is there a different way to get the same UI but with a different styles

import { StyleSheet, Text, View, Image } from 'react-native'
import React from 'react'

const App = () => {

  return (
    <View style={styles.container}>
      {
        userData.map((data) => {
          return <View key={data._id} style={styles.userSection}>
            <View style={styles.imageContainer}>
              <Image
                style={styles.image}
                source={{ uri: data.img }}
                resizeMode="contain"
                overflow="hidden"
              />
            </View>
            <Text style={styles.text}> Text Here! </Text>
          </View>
        })
      }
      <Text style={styles.btn1}>Submit</Text>
      <Text style={styles.btn2}>Submit</Text>
    </View>
  )

}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black'
  },
  userSection: {
    flexDirection: 'column',
    alignItems: 'center',
    bottom: '50%'
  },
  imageContainer: {
    width: 140,
    height: 140,
    borderRadius: 70,
    overflow: 'hidden',
    marginLeft: '5%',
    top: '80%'
  },
  image: {
    width: '100%',
    height: '100%',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
    marginTop: '60%',
  },
  btn1: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 10,
    borderColor: 'white',
    borderWidth: 2,
    fontSize: 25,
    color: 'black',
    textAlign: 'center',
    paddingVertical: 15,
    marginVertical: 10,
    fontWeight: "bold",
    top: '5%'
  },
  btn2: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 10,
    borderColor: 'white',
    borderWidth: 1,
    fontSize: 25,
    color: 'black',
    textAlign: 'center',
    paddingVertical: 15,
    marginVertical: 10,
    fontWeight: "bold",
    top: '5%'
  }
});

CodePudding user response：

A good approach would be flexbox layout:

userSection: {
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
}

text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
    marginTop: 10,
}