React native text input field and button ui-CodePudding

I am new to react native and CSS, I am trying to clone a login page and I am not able to design the text input field and button as in the image Click to view the image

CodePudding user response：

import React from "react";
import {
  StyleSheet,
  View,
  TextInput,
  Text,
  Pressable
} from "react-native";

export default function App() {
  return (
    <View style={{ margin: "100px" }}>
      <View
        style={styles.box}
      >
        <View style={{ flex: 4 }}>
          <TextInput
          placeholder="Enter Mobile Number"
            style={{ backgroundColor: "transparent" }}
          />
        </View>
        <View style={{ flex: 1.5 }}>
          <Pressable style={styles.btn}>
            <Text>Use Email</Text>
          </Pressable>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  box:{
    flexDirection: "row",
    width: 300,
    margin: 10,
    padding: 4,
    alignItems: "center",
    borderBottomWidth: 2,
    borderColor: "#D3D3D3",
    backgroundColor: "#fff"
  },
  btn: {
    textAlign:"center",
    padding:"2px",
    border: "1px solid #D3D3D3",
    borderRadius:"5px",
  }
});

CodeSandBox link https://codesandbox.io/s/create-your-first-react-native-app-forked-kkjih?file=/App.js:0-1015

CodePudding user response：

Hello am not sure if this is what you are looking for.To my understanding you want to create an input with a button within its right side.

If so, please find the code snippets below]]`

import React, { useState } from "react";

import { StyleSheet, View, TextInput, Text, Pressable, TouchableOpacity } from "react-native";

export default function App() {
  const [phoneEntry, setPhoneEntry] = useState(true);

  return (
    <View style={styles.container}>
    <View style={styles.inputContainer}>
            <TextInput style={styles.entryInput} placeholder={phoneEntry?'Enter you phone':'Enter your email'}/>
              <TouchableOpacity
                  onPress={()=>setPhoneEntry(!phoneEntry)}
                  style={styles.inputButton}
              >
                <Text>{phoneEntry?'Use Email':'use phone'}</Text>
            </TouchableOpacity>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    marginVertical:100
  },
  inputContainer:{   
    marginHorizontal:12,
    flexDirection:'row',
    alignItems:'center'
},
inputButton:{
    alignItems:'center',
    right:30,
    position:'absolute',
    bottom:15,
    borderRadius:5,
    borderWidth:1,
    padding:8,
    borderColor:'gray'
},
entryInput:{
    flex:1,
    height:50,
    color:'gray',
    borderBottomWidth:2,
    backgroundColor:'white',
    borderColor:'gray',
    paddingLeft:55,
},
});

I have created a sandbox for the same.

Sandbox link