I am using TextInput in my React Native app and the placeholder text does not align with the border underneath it. The placeholder text appears about 10 pixels indented away from the left side. Our UX does not like this and wants it to align exactly with the border underneath it. Basically, to start at the left without any indentation. I have researched this but have not being able to find anything out. Does anyone know how to fix this??
<View style={styles.emailInputBar}>
{this.state.showUsernameLabel &&
<Text style={styles.formLabel}>username</Text>
}
<TextInput
underlineColorAndroid="transparent"
style={styles.textInput}
placeholder="username"
placeholderTextColor="rgba(255,255,255,0.7)"
autoCorrect={false}
autoFocus={autoFocus}
returnKeyType={'next'}
autoCaptialize={'none'}
keyboardType={'email-address'}
enablesReturnKeyAutomatically={true}
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(text) => this.handleUsernameChange(text)}
value={email}
/>
</View>
Here is the css:
passInputBar: {
display: 'flex',
flex: 1,
backgroundColor: 'transparent'
},
textInput: {
fontSize: 16,
color: 'white',
textAlign: 'left',
width: '100%',
flexDirection: 'row',
paddingHorizontal: 10,
borderBottomWidth: 2,
borderBottomColor: '#FCE443',
flex: 1,
paddingTop:Platform.OS === 'ios' ? 7 : 0,
paddingBottom:Platform.OS === 'ios' ? 7 : 0,
marginTop:Platform.OS === 'ios' ? 6 : 0,
marginBottom:Platform.OS === 'ios' ? 6 : 0
}
Remove
paddingHorizontal: 10,
from
textInput: {
[...]
}
Try this bro..
paddingVertical: 0
Some times there are default parameters, to delete "paddingHorizontal" can't be enough. You should set it to 0.
paddingHorizontal: 0
Related
I am trying to arrange 4 flex items in a flex row, the items have dynamic content, so the width can not be specified for the flex item.
is there any way for the flex items reduce their font size dynamically and occupy the full width of the container??
I was trying this in a sandbox and below code is cutting off the 4th row when the contents are not able to fit.
App Component:
function App() {
const a = [12, 1234, 123456, 123456789];
return (
<View style={styles.app}>
{a.map((element) => {
return (
<View style={styles.item}>
<Text style={[styles.text, { fontSize: 24 }]}>{element}</Text>
</View>
);
})}
</View>
);
}
Styles:
const styles = StyleSheet.create({
app: {
display: "flex",
backgroundColor: "black",
width: "100%",
height: "20%",
flexDirection: "row"
},
text: {
color: "white"
},
item: {
flexGrow: 0,
flexShrink: 0,
minWidth: "15%",
borderStartWidth: 1,
borderColor: "white",
justifyContent: "center",
padding: 5,
alignItems: "flex-start"
}
});
Screenshot:
You've set
flexGrow: 0,
flexShrink: 0,
This explicitly prevents the behaviour you're asking for. Removing both will default them to 1 and allow it to respond to available space.
I have an issue with the text of the TabBar that is not written on same line like shown in the photo. On small screen (Iphone 12) it works perfectly but when i changed to big screen of (Ipad 12.9 inch) How can i prevent that?
I have my code:
<Tab.Screen
name="Shop"
component={ShopNavigator}
options={(navigation, route) => ({
title: 'Shop',
tabBarVisible: false,
tabBarIcon: ({ props, focused }) => (
<View {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={SHOP} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Vente en ligne</Text>
</View>
</View>
)
})}
/>
imgSize: {
height: 30,
width: 30,
padding: 15,
opacity: 0.8,
},
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
}
Just give it more space:
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
width: "100%" //should take. 100% of the available space
}
I would also add the numberOfLines = 1 prop to the Text component to prevent incredibly small screens
Nothing works except returning empty function for renderLabel then having renderIcon display icon and text (placed side by side)
here is the code for more understanding
const renderTabBar = props => {
return <TabBar
{...props}
indicatorStyle={{ backgroundColor: 'grey' }}
style={{ backgroundColor: '#fff' }}
renderIcon={({ route, focused, color }) => {
return <Text style={{ color: '#000', margin: 8 }}><AntIcon
size={13}
name={route?.icon}
color={'#000'}
/>
{" "} {route.title}
</Text>}
}
renderLabel={({ route, focused, color }) => {}}
/>
}
Styling help needed and am so bad at "Flex".
That icon shows up if a message is long. click it and message expands. need it to be displayed next to time stamp as shown below.
code:
<View style={row}>
<View style={textContainer}>
<Text style={title}>Hospital Authority </Text>
{ arrowClicked === true ?
<Textstyle={subtitle}>{alert}</Text>
:
<Textstyle={subtitle}>{alert}</Text>
}
<Text style={time}>{timestampToStr(createDate)}</Text>
</View>
{ alert.charAt(100) !== "" ?
arrowClicked === true ?
<Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}} />
:
<Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}} />
: null
}
</View>
</View>
css:
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
alignItems: 'flex-start',
marginLeft: 15,
marginRight: 15,
paddingTop: 5,
paddingBottom: 10
},
textContainer: {
flex: 3,
paddingLeft: 15
},
title: {
flex: 1,
color: '#000000',
fontWeight: 'bold'
},
subTitle: {
flex: 1,
color: '#000000'
},
time: {
flex: 1,
color: '#808080'
}
})
Please need help with this styling!!!!!
Struggling with this from hours !
Update:
Used common view for both and it worked. But I have some extra space that I need to remove. How can I do that???
First off, I noticed you have 3 closed <View/> tags and only 2 open <View> tags. Maybe it was an issue with the copy/paste you did.
I would start first by thinking about the structure of what we want to display.
Since you want to align a text and an icon together, it would make sense for them to share the same container.
<View style={row}>
<View style={textContainer}>
<Text style={title}>Hospital Authority </Text>
{ arrowClicked === true ?
<Textstyle={subtitle}>{alert}</Text>
:
<Textstyle={subtitle}>{alert}</Text>
}
<View style={timestampAndArrowContainer}>
<Text style={time}>{timestampToStr(createDate)}</Text>
{
alert.charAt(100) !== "" ?
arrowClicked === true ?
<Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}} />
:
<Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}} />
: null
}
</View>
</View>
</View>
And for your styles, you could try something like this
const styles = StyleSheet.create({
[...] // rest of your styles
timestampAndArrowContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}
})
I want to use autoComplete input in react-native, the best option i found was
react-native-autocomplete-input, my problem is that i can't scroll my drop down list in IOS but in android i can.
I tried this solution and it's doesn't help :(
https://github.com/mrlaessig/react-native-autocomplete-input/issues/57#issuecomment-332723713
I checked a lot of suggestions and nothing doesn't help, i will be glad if someone that used it will help, thank you!
return (
<View style={styles.container}>
{showAddChar && (
<Text style={styles.addChar} onPress={this.onChoosenItem}>
+
</Text>
)}
<Autocomplete
data={data}
defaultValue={query}
onChangeText={(text: string) =>
this.setState({ query: text, hideResult: false })
}
keyExtractor={index => index['id'].toString()}
inputContainerStyle={styles.inputContainerStyle}
listContainerStyle={{}}
listStyle={styles.listStyle}
style={{ fontSize: 18 }}
hideResults={hideResult}
placeholder={placeholder}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.item}
onPress={() => this.onChoosenItem(item)}
>
<Text>{item['name']}</Text>
</TouchableOpacity>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
left: 0,
position: 'absolute',
right: 0,
top: 0
},
addChar: {
zIndex: 1,
position: 'absolute',
fontSize: 30,
right: 0,
top: 0
},
inputContainerStyle: {
borderColor: 'rgb(70, 48, 235)',
borderBottomWidth: 3,
borderTopWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0
},
// listContainerStyle: {height:filteredMembers.length * 70},
listStyle: {
borderColor: 'grey',
margin: 0,
overflow: 'scroll',
maxHeight: 200
},
item: {
fontSize: 16,
borderBottomColor: 'grey',
borderBottomWidth: 2,
padding: 12
}
});
enter image description here
I'm using ListItem imported from native-base. ListItem is red and it's child View is yellow. As you can see from the screenshot, View style does not take entire width of ListItem, despite having a flex: 1. How can I make it so that View take entire width of ListItem?
See image here
<List>
<ListItem style={[styles.listitem, { backgroundColor: "red" }]}>
<View
style={{
flex: 1,
flexDirection: "column",
backgroundColor: "yellow"
}}
>
<Text style={styles.timeInfoHeader}>{this.props.totalUsage}</Text>
<Text style={styles.timeInfoSubHeader}>Total (hrs)</Text>
</View>
</ListItem>
</List>;
Stylesheet:
timeInfoHeader: {
fontSize: 40,
color: 'rgba(45, 145, 176, 100)',
textAlign: 'center'
},
timeInfoSubHeader: {
fontSize: 12,
color: 'rgba(209, 209, 209, 100)',
paddingBottom: 4,
marginBottom: 4,
textAlign: 'center'
},
listitem: {
width: '100%',
marginLeft: 0
},
Try this
listitem: {
marginLeft: 0,
flex:1,
paddingRight: 0
}
Just add width: '100%' on your view's styles.
Try this code snippet:
<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
<View style={{ flex: 1 }} >
...
</View >
</ScrollView >
You can try this -
flexGrow: 1
Hope it helped someone =)
What causes this is the textAlign style on the timeInfoHeader. So you can either remove the textAlign style from timeInfoHeader or add a width: "100%" to listitem. Just glancing at your code, it seems you might be better off adding the textAlign to the child View of timeInfoHeader.