CODEWITHSUNDEEP
cssreactjsreact-nativeflexboxstyles
BetoIGM
BetoIGM

Reputation: 177

React Native Style conent space-between

any suggestions on how to style my touchable opacity buttons to look like in the picture of the right?

so far this is my code and my result is the image of the left..

I know I need to apply justify-content: space-between but somehow I can't figure out how..

import {StyleSheet, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {Text} from 'react-native-elements';

const _positionTable = () => {
  return (
    <View style={styles.tabsContainer}>
      <TouchableOpacity style={styles.tab}>
        <Text style={styles.text}>MERCADO DE CAPITALES</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tab}>
        <Text style={styles.text}>FONDOS DE INVERSIÓN</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tab}>
        <Text style={styles.text}>MERCADO DE DINERO</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  tabsContainer: {
    flexDirection: 'row',
    marginHorizontal: 20,
    marginTop: 20,
    maxWidth: '100%',
    alignContent: 'center',
    borderWidth: 1,
  },
  tab: {
    maxWidth: '30%',
    justifyContent: 'space-between',
    backgroundColor: 'orange',
  },
  text: {
    fontSize: 14,
    color: 'white',
    textAlign: 'center',
  },
});

export default _positionTable;

image comparasion

Upvotes: 0

Views: 39

Answers (1)

Maneesh
Maneesh

Reputation: 674

You can use flex:1 or set width by calculating, but i guess flex will do it better.

Upvotes: 1

Related Questions