CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-native
user13101751
user13101751

Reputation:

place <Text> at middle and left end

I have a screen where I want to place the first, main text item (Filter)in the exact middle of the screen while the second item (All Delete) should be at the right end. Both of them should be in the same line.

I would prefer not to use padding/margins since they can vary in different phone sizes. I am already using text-align but it doesn't work for me.


export default function App() {
  return (
    <View style={styles.container}>
       <View style={styles.topTextContainer}>
            <Text style={styles.filterText}>Filter</Text>
            <Text style={styles.deleteAllText}>All Delete</Text>
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
},
  topTextContainer: {
    paddingTop: moderateScale(35),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  filterText: {
    fontSize: moderateScale(15),
    fontWeight: 'bold',
    textAlign: 'center'
  },
  deleteAllText: {
    fontSize: moderateScale(13),
    color: '#363636',
    fontWeight: '300',
    marginLeft: moderateScale(75),
  },
});

Codesandbox: https://snack.expo.io/@nhammad/frowning-bagel

Upvotes: 1

Views: 75

Answers (2)

M-WRI
M-WRI

Reputation: 170

With exact milld do you mean in the middle of the screen width and height like this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topTextContainer: {
    paddingTop: moderateScale(35),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: "100%"
  },
  filterText: {
    fontSize: moderateScale(15),
    fontWeight: 'bold',
    textAlign: 'center'
  },
  deleteAllText: {
    fontSize: moderateScale(13),
    color: '#363636',
    fontWeight: '300',
    position: "absolute",
    right: 0
    //marginLeft: moderateScale(75),
  },
});

If yes, you should set the height: "100%"

if you want to have it on the top middle than this should be the right approach:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topTextContainer: {
    paddingTop: moderateScale(35),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  filterText: {
    fontSize: moderateScale(15),
    fontWeight: 'bold',
    textAlign: 'center'
  },
  deleteAllText: {
    fontSize: moderateScale(13),
    color: '#363636',
    fontWeight: '300',
    position: "absolute",
    right: 0
    //marginLeft: moderateScale(75),
  },
});

setting deleteAllText position: absolute and right: 0

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You can use a absolute position for the delete button and set right:0 like below.

deleteAllText: {
    fontSize: moderateScale(13),
    color: '#363636',
    fontWeight: '300',
    position: 'absolute',
    right: 0
  }

The other option is to use marginLeft:'auto' for the both the texts which can help but wont keep the first one in center.

Upvotes: 3

Related Questions