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

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 }}

Related

How can I create a layout where there is a 2x2 button section to the right of an image in React Native?

I have tried so many combinations of using containers that I don't know what else to do. Also, all the buttons must have equal dimensions, and the section of buttons must stretch to the end of the screen.
Start with a parentContainer with a row flexDirection so that items are laid left to right instead of up and down.
Add two views to parentContainer: imageContainer and buttonContainer. Divvy width among the two according to your layout desires (image from question suggest 50%/50%)
add centering styles to imageContainer and use onLayout to determine width and height of image.
add row flexDirection and flexWrap to buttonContainer.
Create a buttonStyle make sure it has width of 50%
Here's a snack that brings it all together:
import * as React from 'react';
import { Image, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
const Button = ({ title, titleStyle, ...touchableProps }) => {
return (
<TouchableOpacity
{...touchableProps}
style={[styles.button, touchableProps.style]}>
<Text style={[{ textAlign: 'center' }, titleStyle]}>{title}</Text>
</TouchableOpacity>
);
};
export default function App() {
// used to set image size
const [{ width, height }, setViewDimensions] = React.useState({});
// update image size on imageview layout chagnes
const onLayout = ({ nativeEvent: { layout } }) => setViewDimensions(layout);
return (
<View style={styles.container}>
<View style={styles.parentContainer}>
<View style={styles.imageContainer} onLayout={onLayout}>
<Image
source={require('./assets/snack-icon.png')}
style={{ width, height: width }}
resizeMode="contain"
/>
</View>
<View style={styles.buttonContainer}>
<Button title="1" />
<Button title="2" />
<Button title="3" />
<Button title="4" />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
parentContainer: {
flex: 1,
flexDirection: 'row',
},
imageContainer: {
width: '50%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
},
buttonContainer: {
width: '50%',
backgroundColor: 'lightgreen',
flexDirection: 'row',
flexWrap: 'wrap',
},
button: {
width: '50%',
alignItems: 'center',
justifyContent: 'center',
borderColor: 'white',
borderBottomWidth: 1,
borderRightWidth: 1,
},
});

Input text label on border in react native

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

How to share space with equal-size components in React-native

I have started recently with Javascript and React-native to test if it could be used in the future in my current company, but I'm facing some UI problems.
I'm making a test app with some, kind of almost useless functions to learn a bit of Javascript and how to link JS with native Android modules, but now I'm stuck with the interface. I used to make interfaces with RelativeLayout (ConstraintLayout now), and that's why I'm a bit frustrated with this HTML-like and CSS (which I don't specially know in depth, to be honest).
Given this UI . . .
. . . I actually want those buttons to share all the blank space on the screen and have the same heigth, but I don't want to set any width or heigth property, since I believe that each phone, with its own screen size and resolution, should handle the size of the components.
And serching around here and there, I discovered a property called flex that supposedly works like Android's LinearLayout weigth, but when I use it on any button, they just disappear:
So, how should/could I solve this?
Here are the "HTML" and styles used:
render() {
return (
<View style={styles.container}>
<View style={styles.containerText}>
<ScrollView
style={styles.scrollTextStyle}
contentContainerStyle={{ flexGrow: 1 }}
>
<Text style={styles.textStyle}>{this.state.textField}</Text>
</ScrollView>
<TextInput
multiline={true}
style={styles.inputStyle}
onChangeText={inputField =>
this.setState({
inputField
})}
value={this.state.inputField}
/>
</View>
<View style={styles.containerButton}>
<Button
style={[styles.buttons, styles.firstButton]}
onPress={() => this.pressedButton(1)}
>
Copy input to text
</Button>
<Button
style={[styles.buttons, styles.secondButton]}
onPress={() => this.pressedButton(2)}
>
Android/iOS Toast
</Button>
<Button
style={[styles.buttons, styles.thirdButton]}
onPress={() => this.pressedButton(3)}
>
Android module (Method)
</Button>
<Button
style={[styles.buttons, styles.fourthButton]}
onPress={() => this.pressedButton(4)}
>
Android module (AsyncTask)
</Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
//Root View
container: {
flex: 1,
flexDirection: "column",
backgroundColor: "#F5FCFF"
},
//Texts View
containerText: {
flex: 2,
justifyContent: "center",
backgroundColor: "#EFEFFF"
},
//Buttons View
containerButton: {
flex: 4,
flexDirection: "column",
backgroundColor: "#FFFFFF",
justifyContent: "space-between"
},
//Components on first View
scrollTextStyle: {
borderWidth: 1,
marginTop: 10,
marginBottom: 5,
marginHorizontal: 10,
flex: 1
},
textStyle: {
backgroundColor: "#CEF",
textAlign: "center",
textAlignVertical: "center",
flex: 1
},
inputStyle: {
borderWidth: 1,
marginTop: 5,
marginBottom: 10,
marginHorizontal: 10,
backgroundColor: "#CEF",
textAlign: "center",
textAlignVertical: "center",
flex: 1
},
//Components on second view
//Common style for all buttons and a different one for each
buttons: {
borderRadius: 5,
textAlign: "center",
textAlignVertical: "center",
fontSize: 20
},
firstButton: {
color: "#FFFFFF",
backgroundColor: "#D1E233"
},
secondButton: {
color: "#FFFFFF",
backgroundColor: "#239923"
},
thirdButton: {
color: "#FFFFFF",
backgroundColor: "#958475"
},
fourthButton: {
color: "#FFFFFF",
backgroundColor: "#651278"
}
});
By the way, I would appreciate any tutorial-like web about user interfaces on React-native, since I only found kind of useless things explaining properties, but no quality full examples.
You can use Dimension
import {Dimensions} from 'react-native';
Dimensions.get('window').height
or use react-native-easy-grid
<Grid>
<Row></Row>
<Row></Row>
</Grid>
It will create 2 equal height row
I would recommend wrapping all of the buttons in a div, and then making the div's height equal to the screen height - the height of your input fields.
Example: var {height, width} = Dimensions.get('window');
Source
This will then give the buttons a container to live in. After that you can use % for the height of the buttons. So if you have 4 buttons you can make the height of each of them 25% which would make them fit any screen.

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.

How to Position a React Native Button at the bottom of my screen to work on multiple ios devices

I am young to react native search the web for tutorials that could help me with this problem but have not find anything. I know how to move the buttons from point A to B on my screen. The thing is I just cant seem to get it to be fixed at the bottom to work on different form factors of my ios emulator.
So far I have tried marginTop which takes down the button to the screen but as soon as a I change the emulator to a different screen size the button goes up a little. I am asking can I get any guidance as how I may set this to work on different ios screens.
submitButton: {
height: 85,
flex: 1,
backgroundColor: "#FFBB34",
borderColor: "#555555",
borderWidth: 0,
borderRadius: 0,
marginTop: 200,
justifyContent: "flex-start"
}
The code above is my button.
You can use absolute position to put things wherever you want...
submitButton: {
position: 'absolute',
bottom:0,
left:0,
}
will put at bottom of screen, left side....
Here is how I placed the floating button at the bottom-right of the screen.
return (
<View style={mainConatinerStyle}>
{this.renderSwiper()}
{this.renderFloatingMenu()}
</View>
);
Use the following styles for container & button:
mainConatinerStyle: {
flexDirection: 'column',
flex: 1
},floatingMenuButtonStyle: {
alignSelf: 'flex-end',
position: 'absolute',
bottom: 35
}
Output:
You can try the code below at https://facebook.github.io/react-native/docs/flexbox.html until that link doesn't work anymore.
Basically you are splitting the screen into 3 pieces, top scrollable, and bottom. The code below is just doing 3 views for simplicity (no scrolling, just replace the middle one with a ScrollView to have somethign more useful.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{height: 50, backgroundColor: 'powderblue'}} />
<View style={{flex:1, backgroundColor: 'skyblue'}} />
<View style={{height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
the element
<View style={style.viewBtn}>
<TouchableOpacity style={style.btn} onPress={() => {}}>
<Text style={style.txtBtn}>Send</Text>
</TouchableOpacity>
</View>
the CSS
viewBtn: {
position: 'absolute',
bottom: 0,
height: window.height * 0.1,
width: window.width * 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
btn: {
height: window.height * 0.07,
width: window.width * 0.8,
backgroundColor: colors.cornflower,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
},
txtBtn: {
textAlign: 'center',
fontSize: 21,
color: 'white',
fontWeight: 'bold',
},
hope this code help your problem, dont forget to use dimension to set height and weight, but optional to use the dimension

Categories