CODEWITHSUNDEEP
react-nativeflexbox
nixn
nixn

Reputation: 1488

React-Native Flexbox align items vertical

Im new to React-Native and want to display items within a container vertically. But for some reasons I cannot see the TextInput on Android. Firstly I didnt see it on iOS, but by adding position: "absolute" to the TextInput I was able to see it on iOS, android is still missing. I dont know why. (I'm using wix/react-native-ui-lib)

Problem

import React from "react";
import { View, TextInput, Text, Button, Image } from "react-native-ui-lib";

class MainScreen extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View useSafeArea={true} style={style.Main}>
        <View style={style.phoneBox}>
          <Image
            style={{ width: 30, height: 30 }}
            source={require("../../assets/icons/country_austria.png")}
          />
          <Text text50>+43</Text>
          <TextInput
            style={{ position: "absolute" }}
            text50
            placeholder="Handynummer eingeben"
            hideUnderline={true}
          />
        </View>
      </View>
    );
  }
}

const style = {
  Main: {
    flex: 1,
    flexDirection: "column"
  },
  phoneBox: {
    flex: 1,
    flexDirection: "row",
    alignItems: "stretch"
  }
};

export default MainScreen;

Upvotes: 1

Views: 758

Answers (1)

Yanci Nerio
Yanci Nerio

Reputation: 814

Edited: Looks a problem with the library that you are using setting flex: 0 and adding a width fixes for both, android and ios you can check the demo in both apetizers 

<TextInput
   style={{width: 250, flex: 0}}
   text50
   placeholder="Handynummer eingeben"
   hideUnderline={true}
/>

Here a demo

Upvotes: 3

Related Questions