CODEWITHSUNDEEP
react-native
Ayush Gupta
Ayush Gupta

Reputation: 9295

How to style my View to wrap the contents inside

Let me preamble this by saying I'm new to react-native

Here is my component:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Text, View, Image, TextInput } from 'react-native';

class CountryCodeInput extends Component {
  state = { text: '' }
  constructor(props) {
    super(props)
  }

  componentDidMount() {
  }

  onTextChange(text) {
    if (/^\d+$/.test(text) || text === "") {
     this.setState({ text })
    }
    // this.props.onTextChange(text)
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: "row", marginRight: 0, backgroundColor: 'red', alignSelf:'baseline', flexWrap: "wrap"}}>
      <Text style={{backgroundColor:"yellow"}}>+</Text>
        <TextInput 
        onChangeText={(text)=>this.onTextChange(text)} 
        maxLength={3} 
        keyboardType="numeric"
        style={{backgroundColor:"grey", borderBottomColor: 'black', borderBottomWidth: 1, fontSize: 16, height: 24, width: 36, paddingVertical: 4 }}
        value={this.state.text} />
      </View>
    );
  }
}


export default CountryCodeInput

Here is what it looks like:

Screenshot

I need to remove all the red portion, and limit the height of the yellow section to the height of the grey section. How can I do this?

alignSelf:'baseline' and flexWrap: "wrap" dont seem to help much.

Upvotes: 0

Views: 36

Answers (1)

Junius L
Junius L

Reputation: 16132

Remove flex from your style

<View style={{ flexDirection: "row", marginRight: 0, backgroundColor: 'red', alignSelf:'baseline', flexWrap: "wrap"}}>

Upvotes: 1

Related Questions