Input text label on border in react native - javascript

I want to create an input box like this:
But I designed it like this, and I don't know how to add the label on the input border
My Code is:
<InputBox label="Email" icon={true} keyboardType="email-address" defaultValue={emailId} onChangeText={text => setEmailId(text)} />
Input Component:
import React from 'react';
import {View, StyleSheet, TextInput, Text} from 'react-native';
import {COLORS} from '../constants/colors';
import {FONT_FAMILY} from '../constants/font-family';
export default function InputBox(props) {
return (
<View style={styles.container}>
<View style={{flex: 1}}>
<Text style={styles.label}>{props.label}</Text>
<TextInput
placeholder={props.placeholder}
placeholderTextColor="#9F9F9F"
style={styles.input}
keyboardType={props.keyboardType}
secureTextEntry={false}
defaultValue={props.defaultValue}
onChangeText={props.onChangeText}
editable={props.editable}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
paddingTop: 7.5,
paddingHorizontal: 12.5,
paddingBottom: 2.5,
borderRadius: 5,
borderWidth: 0.75,
borderColor: COLORS.WHITE,
},
input: {
fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 14,
height: 37,
color: COLORS.WHITE,
},
label: {
fontFamily: FONT_FAMILY.primary,
marginLeft: 5,
color: COLORS.WHITE,
fontSize: 12,
// marginTop: -30,
},
});
By using react-native-paper, when I add transparent background color it looks like this:

I was able to get this accomplished purely in React Native without any dependencies. The trick was to put the Text in a View with a background color the same as the screen's and position the Text absolutely. My example code hardcodes a lot of values, but if you want it to be responsive you'll need to come up with your own way of figuring those values out. The code:
import { View, Text, TextInput, StyleSheet } from "react-native";
const Input = () => {
return (
<View>
<View style={styles.labelContainer}>
<Text>Email Address</Text>
</View>
<View style={styles.inputContainer}>
<TextInput placeholder="Enter email address" />
</View>
</View>
);
}
const styles = StyleSheet.create({
labelContainer: {
backgroundColor: "white", // Same color as background
alignSelf: "flex-start", // Have View be same width as Text inside
paddingHorizontal: 3, // Amount of spacing between border and first/last letter
marginStart: 10, // How far right do you want the label to start
zIndex: 1, // Label must overlap border
elevation: 1, // Needed for android
shadowColor: "white", // Same as background color because elevation: 1 creates a shadow that we don't want
position: "absolute", // Needed to be able to precisely overlap label with border
top: -12, // Vertical position of label. Eyeball it to see where label intersects border.
},
inputContainer: {
borderWidth: 1, // Create border
borderRadius: 8, // Not needed. Just make it look nicer.
padding: 8, // Also used to make it look nicer
zIndex: 0, // Ensure border has z-index of 0
},
});
export default Input;
This is what it looks like on my device (Samsung Galaxy S10+):

If you have to use a material ui styled components you may wanna use reactnativepaper

hi there you cna use this code to achive
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import { TextInput } from 'react-native-paper';
export default function InputBox(props) {
return (
<View style={styles.container}>
<TextInput
mode="outlined"
label="Email"
style={{width:'90%'}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
justifyContent:'center',alignItems:'center',
flex:1
// borderColor: COLORS.WHITE,
},
input: {
// fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 14,
height: 37,
// color: COLORS.WHITE,
},
label: {
// fontFamily: FONT_FAMILY.primary,
marginLeft: 5,
// color: COLORS.WHITE,
fontSize: 12,
// marginTop: -30,
},
});
you can test it on Snack
Also you can read more about props here react-native-paper

Related

React Native - Image Background content went past the screen

I am adding image background to my app, but the horizontal part of the image went past the screen (the right and left part got cut). I tried to use resizeMode cover and contain but both of it didn't do anything. Is there any other way to make the image stay within the screen? (I use resizeMode on Image and it contain the image normally {same picture}).
import React from 'react';
import {
Image,
ImageBackground,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {DCTBACKGROUND} from '../../../assets/images';
export default function GetStarted({navigation}) {
return (
<ImageBackground source={DCTBACKGROUND} style={styles.page}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate('Register');
}}>
<Text style={styles.buttonText}>Registrasi</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate('Login');
}}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
page: {
backgroundColor: '#90CC8B',
flex: 1,
paddingHorizontal: 15,
paddingVertical: 25,
// resizeMode: 'contain',
},
button: {
backgroundColor: 'yellow',
width: 100,
height: 40,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
},
buttonText: {
color: 'black',
},
buttonContainer: {
justifyContent: 'space-between',
flexDirection: 'row',
},
logo: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
});
The image horizontal part got cut a bit and I need to make it all show without being cut.
Add the resizeMode as a direct prop to the ImageBackground and not as part of the StyleSheet.
<ImageBackground resizeMode="contain" source={DCTBACKGROUND} style={styles.page}>

How to vertically center Text in TouchableOpacity?

I am trying to vertically center Text in a TouchableOpacity but it is hard to get it done for me.
My App.tsx:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import { CustomButton } from "./src/components/CustomButton";
export default function App() {
return (
<View style={styles.container}>
<CustomButton title="Button" />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
And my CustomButton.tsx:
import React from "react";
import {
TouchableOpacity,
StyleSheet,
Text,
} from "react-native";
interface CustomButtonProps {
title: string;
}
export const CustomButton = ({ title }: CustomButtonProps): JSX.Element => {
return (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonTitle}>{title}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
borderRadius: 4,
width: 240,
height: 100,
backgroundColor: "#FFF",
marginBottom: 12,
},
buttonTitle: {
alignSelf: "center",
fontSize: 24,
color: "#fff",
fontWeight: "bold",
},
});
Currently I set alignSelf in buttonTitle as 'center' but I have also tried:
textAlign: 'center' in buttonTitle,
alignItems: 'center' in button,
alignItems: 'center', justifyContent: 'center' in button
And many other ways I could find on Google but none of them worked. It only centers the Text horizontally. Can anyone help me with vertically centering Text of this TouchableOpacity component?
Thanks in advance!
Have a try by using textAlign: 'center' in the style of the text component.
also, you can refer to the official docs from here.
React native Text Compoent
Problem solved:
React Native's default direction is column which is different than the web.
Thus, what I needed is to add justifyContent: "center" within the button styles, so the code looks like:
const styles = StyleSheet.create({
button: {
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
width: 240,
height: 100,
backgroundColor: "#FFF",
marginBottom: 12,
},
buttonTitle: {
fontSize: 24,
color: "#fff",
fontWeight: "bold",
},
});
Hope it helps those who encounter the same problem!

Reduce height and vertical padding for a react-native-paper TextInput

I have the following code:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: '',
};
render() {
return (
<View style={styles.container}>
<TextInput value={this.state.text} style={styles.input} />
<Button mode="contained" style={styles.button}>Add Todo</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: '#c1deff',
},
input: {
flex: 1,
},
button: {
flex: 0,
},
});
which outputs the following screen:
My goal is to reduce the height for the TextInput. It also looks like it has some vertical padding. Is it possible to decrease that as well? I'm just trying to save space on the screen and in my opinion is taking lot of it area.
EDIT 01
I tried with the following style:
input: {
flex: 1,
height: 40,
borderColor: 'gray',
borderWidth: 1,
}
but didn't work, because I got the following result:
which as you can see, doesn't look good (obvious).
Thanks!
add height and justifyContent in style
input: {
flex: 1,
height: 40,
justifyContent:"center"
}
You can set height for it if you want:
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1, justifyContent:"center"}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
Source: https://facebook.github.io/react-native/docs/textinput
Also try searching in Github for some custom inputtext. They may have what you need. Good luck!
As you can see from the source code, you can only change the input size by modifying the render prop
To adjust the height add the style height: 40 and to adjust vertical padding add the style paddingHorizontal: 0
Your tag should then look like the following:
<TextInput value={"Something"} style={{ flex: 1, height: 40, paddingHorizontal: 0}} />
use margin with negative value like
contentStyle={{ marginHorizontal: -10, marginVertical: -2 }}

React Native some style causes view to not render

Hi i am a newbie in React Native, and trying to create an android app using the same. If i change the style of my view -> (backgroundColor or borrderBottom) it just doesn't render. There is no error anywhere, but on reloading the js bundle, the view and all its children fail to render. More than solving this particular issue, i am more interested in understanding why is this happening or whether i am missing something. My component in its entirety is below
import React from 'react';
import { StyleSheet, View, Text, PixelRatio, TextInput } from 'react-native';
const styles = {
container: {
paddingTop: 70,
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '#fff',
},
form: {
flex: 1,
flexDirection: 'column'
},
rowContainer: {
//backgroundColor: '#000',
},
row: {
flexDirection: 'row',
height: 44,
alignItems: 'center',
},
inputLabel: {
fontSize: 15,
paddingLeft: 15,
color: '#333'
},
textInputStyle: {
fontSize: 15,
flex: 1,
paddingLeft: 15
}
};
export default function TestComponent(props) {
return (
<View style={styles.container}>
<Text> Inside Container </Text>
<View style={styles.form}>
<Text> Inside Form </Text>
<View style={styles.rowContainer} >
<Text> Inside Row Container </Text>
<View style={styles.row}>
<Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text>
<TextInput />
</View>
</View>
</View>
</View>
);
}
The above code works perfectly and all the components are rendered, however if i change the rowContainer style and uncomment backgroundColor, rowContainer and all its children are not rendered. I have no clue why this is happening. I also tried other styles inside rowContainer like
rowContainer: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#000'
borderBottomWidth: 1,
borderColor: '#c8c7cc'
}
As long as rowContainer style is empty it works, if i add anything inside it, the view simply doesn't render.
The default Text color is black and the rowContainers backgroundColor is set to '#000'. So it appears as not being rendered.

React Native: TextInput disappears when put into View

Currently I'm learning React Native with the help of a book in which is explained how to build a to do app. However I can't continue because of this error/bug. This is happening in IOS, not sure if this also happens on Android as I haven't set up my Android emulator just jet.
My <View> container has two <TextInputs>, working fine.
When I wrap both inputs into views, they simply 'disappear'.
Here is my component NoteScreen.js:
import React, {
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={styles.body}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: 1,
width: 60,
height: 60,
fontSize: 16
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flex: 1,
flexDirection: 'row',
marginBottom: 10
},
title: {
fontFamily: 'Overpass-Bold',
height: 40
},
body: {
fontFamily: 'Overpass-Bold',
flex: 1
}
});
I did some research and noticed some weird things;
Both of my inputs have a width and a height
The inputs vanish also if they don't have any styles applied to them
This only happens with text inputs, normal text just renders.
Some insight would be great, I'm thinking this is a bug, or I am just overlooking something..
I tried your example (on android), and with exact code you provided, screen is completely empty. Without styles on text input, they are not showing, and you've set styles.title and styles.body to your TextInput components -> in styles.title and styles.body you don't have (both) width and height. So what you can do is:
Add width to your title and body styles
or
Add styles to text input in array and apply both styles for textInput and for title/body like this: style={[styles.textInput, styles.title]} and style={[styles.textInput, styles.body]}
Here is working code for both suggestions i gave you:
import React, {
AppRegistry,
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={[styles.textInput, styles.body]}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: 1,
width: 60,
height: 60,
fontSize: 16
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flex: 1,
flexDirection: 'row',
marginBottom: 10
},
title: {
fontFamily: 'Overpass-Bold',
height: 40,
width: 40
},
body: {
fontFamily: 'Overpass-Bold',
flex: 1
}
});
I believe we are reading the same book, becausee I had the same problem.
I solved it by removing the alignItems: 'center' in the container style and adding flex: 1 to the inputContainer style. It still doesn't look like the book sample, but at least the fields are now visible.
Here's what my code looks like:
import React, { StyleSheet, Text, TextInput, View } from "react-native";
import dismissKeyboard from "dismissKeyboard";
export default class NoteScreen extends React.Component {
render() {
handleTitleEditingEnd = (text) => { this.refs.body.focus(); };
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
placeholder="Untitled"
style={[styles.textInput, styles.title]}
onEndEditing={handleTitleEditingEnd}
returnKeyType="next"
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={[styles.textInput, styles.body]}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
// alignItems: "center",
marginTop: 64
},
inputContainer: {
borderBottomColor: "#9E7CE3",
borderBottomWidth: 1,
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
textInput: {
flex: 1,
fontSize: 16,
},
title: {
height: 40,
},
body: {
flex: 1,
}
});
If your <Text> don't have height in your <View>, try removing flex : 1 from your container.
I solved it with code below:
import React, {
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, styles.title]} onEndEditing={(text) => {this.refs.body.focus()} }/>
</View>
<View style={styles.inputContainer}>
<TextInput ref="body" multiline={true} placeholder="Start typing" style={[styles.textInput, styles.body]}/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 64
},
title: {
height: 40
},
body: {
height: 160,
flex: 1
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flexDirection: 'row',
marginBottom: 10
},
textInput: {
flex: 1,
fontSize: 16,
width: 300,
}
});

Categories