Question 32931 in React native Question posted in
The official React Native documentation can be found here.

How do I center the input field vertically in React Native?

I’m using @rneui/base package’s Input component, however, I cannot center the input field the package provides.
I would be glad if you help. Thank you from now.

Here are the code and styles:

function EditClassScreen() {
  return (
    <View style={styles.container}>
      <Header />
      <View style={styles.inputItem}>
        <Input containerStyle={styles.inputContainer} style={styles.input}>
          <Text>
            test
          </Text>
        </Input>
      </View>
    </View>
  );
};

export default EditClassScreen;


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.bgColor,
  },

  inputItem: {
    backgroundColor: COLORS.green,
    paddingHorizontal: 16,
    marginTop: 8,
  },
  inputContainer: {
    backgroundColor: COLORS.blue,
    borderColor: COLORS.paleGray,
    borderBottomWidth: 1,
  },
  input: {
    backgroundColor: COLORS.red,
    borderColor: COLORS.paleGray,
    borderWidth: 1,
  },
});

I tried probably every possible option for, alignItems, justifyContent, alignSelf, but none worked.

Here is the image:

I want to centralize the red area within the blue area.

I solved the problem and added my solution as an answer. Thank you for all your answers.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I solved the problem by adding flexDirection: 'row' to the inputContainer.


  2. 0

    Add this to inputContainer or input style:

    alignItems: 'center'
    Login or Signup to reply.
  3. 0

    App.js

    import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.paragraph}>
          <TextInput
            placeholder="hello"
            style={{ height: 40, margin: 12, borderWidth: 1, padding: 10 }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 8,
    backgroundColor: '#eee',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: '#b2b2b2',
  },
});

    Run this code and see output maybe you find a solution

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search