How Center Components Using Flex in React Native

How Center Components Using Flex in React Native?

It's Done:

import { Container, Content, Form, Input, Label, Item } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';

import AppLogo from '../components/AppLogo';

const styles = StyleSheet.create({
  container: {},
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  },
  form: {
    width: '100%'
  },
  item: {}
});

const Screen = () => (
  <Container style={styles.container}>
    <Content contentContainerStyle={styles.content}>
      <AppLogo />
      <Form style={styles.form}>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;

Flexbox in react native : How to align 2 items at the center of the screen?

Code changed at View with {styles.topRightButton}

return (
          <View style={styles.container}>
            <RNCamera
              ref={cam => {
                this.camera = cam;
              }}
              style={styles.preview}
            >
              <View style={styles.controlsContainer}>
                <View style={{justifyContent: 'flex-start', alignItems: 'flex-start',}}>
                  <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                    <Icon name={"arrow-left"} type={"Feather"} style={styles.iconFurtive}/>
                  </TouchableOpacity>
                </View>
                <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around'}}>
                  <View style ={{height: 50, width: 50, backgroundColor: 'transparent'}} />
                  <Text style={styles.actionText}>{I18n.t("action_text").toUpperCase()}</Text>
                  <TouchableOpacity onPress={() => this.recordVideo()}>
                    <Icon name={this.state.iconVid} type={"MaterialCommunityIcons"}/>
                  </TouchableOpacity>
                </View>
              </View>
            </RNCamera>
          </View>
        );

How to center a view inside another view in React Native?

You are already centering in the container. Follow the same for outerCircle as well.

  outerCircle: {
    backgroundColor: 'blue',
    width: 100,
    height: 100,
    borderRadius: 100/2,
    justifyContent: 'center',
    alignItems: 'center'
  },

react native flexwrap with alignItems: center is not working

I think you should design it like this

Working Example Here

<View style={{ width: '100%', flexDirection: 'row' }}>
  <View style={{ flex: 1 }}>
    <Text
      style={{ fontSize: 22 }}
      adjustsFontSizeToFit={true}
      numberOfLines={1}>
      June 23, 2021
    </Text>
  </View>

  <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
    <Text
      style={{ fontSize: 22 }}
      adjustsFontSizeToFit={true}
      numberOfLines={1}>
      # 123123123123123
    </Text>
  </View>
</View>

How to align between two items inline left and right using flex in react native

To achive this:

First you have to set your flexDirection of container class to column. Set maxWidth at other container classes, and create a new class for your message with justifyContent: 'center' attribute.

container: {
  flex: 1,
  flexDirection: "row", /*it was column*/ 
  alignContent: "space-between",
}

surveyDetailsContainer: {
    /* some code */
    maxWidth: 500,
},
container: {
    /* some code */
    maxWidth: 500,
},
   /* some other classes*/
barGraph: {
    /* some code */
    maxWidth: 400,
},

/*created a new class, included the minWidth and added 3 more new attributes*/
message: {
  minWidth: 5,
  maxWidth: 80,
  justifyContent: 'center',
  marginLeft: 5,
}

And then put the new message class into:

<View style={[styles.message]}>
  <Text>2 messages</Text>
</View>

Here is the whole code: https://snack.expo.dev/UwP7GVLzX

You can play around more with maxWidth, minWidth to make it responsive.

---

Related Topics