React native Elements Input full width

Question

I was trying to implement the Input from React Native Elements, which is the blue one. I want to make the Input have full width within the red view. So I did

width: '100%', marginHorizontal: 0, padding: 0, and alignItems: 'stretch' independently.

But none of them didn't work. What is the problem? This is the screenshot of the screen

And this is the corresponding code

    <View style = {styles.campusInputView}>
      <Input
        containerStyle = {styles.campusInputContainer}
        inputStyle = {styles.campusInput}
        placeholder = 'KAIST'
        editable = {false}
      />
    </View>

with the style

  campusInputView: {
    borderWidth: 1,
    borderColor: 'red',
    position: 'absolute',
    top: height * 100 / 640,
    left: width * 45 / 360,
    width: width * 270 / 360,
  },
  campusInputContainer: {
    borderWidth: 1,
    borderColor: 'green',
    alignItems: 'stretch',
  },
  campusInput: {
    borderWidth: 1,
    borderColor: 'blue',
    flex: 1,
    fontFamily: 'NanumSquareB',
    fontSize: 20,
    paddingVertical: 0,
  },

asukiaaa · Accepted Answer · 2020-02-17 06:54:17Z

12

Overwriting paddingHorizontal of containerStyle as 0 makes the input full width. Overwriting only padding as 0 is not enough.

import { Input } from 'react-native-elements'

<Input
  containerStyle = {{ paddingHorizontal: 0 }}
  // other settings
/>

answered Feb 17, 2020 at 6:54

asukiaaa

1,67418 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ghyath Darwish Over a year ago

Wow. This must be accepted answer... I don't know why when I overwrite padding it does not work but when I tried paddingHorizontal it works perfectly!!

ALFmachine Over a year ago

I agree, this should be an accepted answer

Paweł Łukaszewicz · Accepted Answer · 2019-10-24 12:07:15Z

1

You should add paddingHorizontal: 0 to campusInputContainer

campusInputContainer: {
  borderWidth: 1,
  borderColor: 'green',
  alignItems: 'stretch',
  paddingHorizontal: 0
},

answered Oct 24, 2019 at 12:07

Paweł Łukaszewicz

111 bronze badge

Comments

hong developer · Accepted Answer · 2019-08-13 13:50:50Z

The width you want is 100%. And I set the color of the border to red.

import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Input } from 'react-native-elements';



export default class App extends Component {

  render() {
    return (
     <View style = {styles.campusInputView}>
      <Input
        containerStyle = {styles.campusInputContainer}
        inputStyle = {styles.campusInput}
        placeholder = 'KAIST'
        editable = {false}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  campusInputView: {
    flex:1,
    justifyContent:"center",
    alignItems:"center"
  },
  campusInputContainer: {
    borderWidth: 1,
    borderColor: 'red',
    alignItems: 'stretch',
  },
  campusInput: {
    flex: 1,
    fontFamily: 'NanumSquareB',
    fontSize: 20,
    paddingVertical: 0,
  },
});

Collectives™ on Stack Overflow

React native Elements Input full width

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related