0

I want to achieve below design. Where the space between the image, title, sometext and Button must be same and bottom must have bottom space for 16px fix in iOS and Android with Green box. Green box should fit everything. so spacing between image, title, text, button and between button and green box end should be 5% or something fix such that it should look same in Android and iOS device irrespective of the device size

with below code Android does looks good. In iOS i can manage the spacing between title, sometext and button but problem is bottom button have more spacing at the end relative to green box.

below is the code :

return (
    <View style={styles.container}>
      <View style={styles.body}>
        <TopRightCornerXButton
          buttonImageStyle={styles.closeButtonBackground}
        />
        <Image style={[styles.icon]} source={someImage} />
        <Text style={styles.titleText}> Title </Text>
        <Text style={styles.subtext}> sometext </Text>
        <View style={styles.buttonContainer}>
          <Button style={styles.bottomButton}> title={SomeButton} </Button>
        </View>
      </View>
    </View>
  );

StyleSheet.create({
    container: {
      height: '100%',
      width: '100%',
      position: 'absolute',
      flex: 1,
      backgroundColor: rgba(52, 52, 52, 0.6),
      justifyContent: 'center',
      alignItems: 'center',
    },
    body: {
      height: '55%',
      width: '80%',
      borderRadius: 10,
      backgroundColor: 'green',
    },
    closeButtonBackground: {
      marginTop: 15,
      marginEnd: 15,
      alignSelf: 'flex-end',
      tintColor: 'grey',
    },
    icon: {
      height: '50%',
      resizeMode: 'contain',
      alignSelf: 'center',
    },
    titleText: {
      fontSize: 24,
      fontWeight: '500',
      textAlign: 'center',
      marginTop: '5%',
      lineHeight: 31,
      color: 'black',
      marginHorizontal: '9.23%',
    },
    subtext: {
      fontSize: 16,
      fontWeight: '400',
      textAlign: 'center',
      lineHeight: 21,
      marginHorizontal: '9.23%',
      marginTop: '5%',
      color: 'black',
    },
    buttonContainer: {
      paddingTop: '5%',
    },
    bottomButton: {
      height: '7.7%',
      width: '90%',
      minHeight: 50,
      maxHeight: 57,
      justifyContent: 'center',
    },
    bottomButtonTitleStyle: {
      color: 'white',
      fontSize: 16,
      textAlign: 'center',
    },

enter image description here

IOSDev
  • 205
  • 2
  • 10

0 Answers0