React Native Styling problems

Question

I have problems with styling in React Native inside a nested view.

Desired Outcome:

my Design :

As you can see I have problems allocating the text horizontally

Code:

let width = Dimensions.get('window').width - 42;

const styles = StyleSheet.create({
  cardBorder: {
    marginTop: 25,
    marginLeft: 20,
    marginRight: 20,
    borderColor: "grey",
    borderWidth: 1,
    borderRadius: 5,
    overflow: 'hidden',
  },
  titleText: {
    ...FONT_SEMI_BOLD,
    marginTop: 10,
    marginLeft: 10,
    fontSize: 17,
    flex: 1,
  },
  priceText: {
    ...FONT_SEMI_BOLD,
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
    fontSize: 17,
    alignSelf: 'flex-end',
    flex: 1,
  },
});

export default class CardDetailScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <HeaderReturn />
        <View style={styles.cardBorder}>
          <Image
            style={{ height: width, width: width }}
            source={{ uri: testData[0].uri }}
          />
          <View
            style={{
              flexDirection: 'row',
              justifyContent: "space-between",
            }}
          >
            <Text style={styles.titleText}>{testData[0].name}</Text>
            <Text style={styles.priceText}>{testData[0].price}</Text>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

Any help is much appreciated, it looks super simple but I just cannot get it to work. Thank you!

score 1 · Accepted Answer · answered Dec 21 '19 at 19:05

1

It seems like you want to show the name on left side and price on right side of view. So you can try it this way,

priceText: {
    ...FONT_SEMI_BOLD,
    marginTop: 10,
    marginLeft: 'auto',
    marginRight: 10,
    fontSize: 17,
},

Just mention your marginLeft: 'auto'. Also remove justifyContent: "space-between", from your parent view's style.

answered Dec 21 '19 at 19:05

gprathour

14,813
5
66
90

Works! Thanks a lot, would you mind explaining, on why this works? – Fredyonge Dec 21 '19 at 19:17
1

@Fredyonge well simply in a View with flex direction row if you give marginStart or marginLeft as auto to a View then it moves to the end of that view, which would be right for normal view and left for RTL. – gprathour Dec 21 '19 at 19:19
Ah, well thats easy! Thank you! – Fredyonge Dec 21 '19 at 19:22

score 0 · Answer 2 · answered Dec 21 '19 at 19:04

0

Try to set your styles.cardBorder to have alignItems: 'center' and 'width': '100%'. I think your texts are centered in its container fine, but the container is not taking the full width. Maybe you only need 'width': '100%'.

answered Dec 21 '19 at 19:04

Ben Butterworth

22,056
10
114
167

Hey ZenBoat! Thanks for you answer, unfortunately, it didn't work. I tried it on styles.Cardborder and on the container view of my . – Fredyonge Dec 21 '19 at 19:12

React Native Styling problems

2 Answers2