My problem is as follows, I am passing a large string to one of the Picker items, because of this, the text is not displaying completely on the screen.
I tried to set a fixed width but this solution did not work.
<View style={styles.container}>
<Image source={logo} />
<View style={styles.bodyContainer}>
<Text style={styles.message}>
Para que possamos verificar se Sr. (a) está apto (a) para receber o benefício da
previdência social, por favor, nós informe a categoria do usuário.
</Text>
<View style={styles.pickerContainer}>
<Picker
style={styles.picker}
mode="dialog"
selectedValue={this.state.userCategory}
onValueChange={(itemValue, itemIndex) => {
if (itemValue !== '') {
this.setState({userCategory: itemValue});
}
}}>
<Picker.Item
color="#979898"
label="Por favor, selecione o tipo do benefício..."
value=""
/>
<Picker.Item color="#979898" label={data.categories[0]} value="0" />
<Picker.Item color="#979898" label={data.categories[1]} value="1" />
<Picker.Item color="#979898" label={data.categories[2]} value="2" />
</Picker>
</View>
const styles = StyleSheet.create({
pickerContainer: {
width: '100%',
height: 50,
borderColor: '#707070',
borderWidth: 1,
borderRadius: 10,
overflow: 'hidden'
},
picker: {
width: '100%',
height: 50,
color: '#979898',
flexDirection: 'column'
},
});
I wish that if the text was larger than the maximum width there would be a line break.
image of the problem:
You can set your View component with flexDirection: "row" and your Text component style with flexWrap: "wrap":
<View style={{ flexDirection: 'row', alignItems: "center" }}>
<Text style={{ flexWrap: 'wrap', flex: 1}}>{item.nome}</Text>
</View>
Giving fixed width will automatically truncate your text.
Try giving it flex:1 and also text comes with a prop of numberOfLines try using that.
Moreover, if you can give padding to text to make it aligned in the view.
Dont give it fixed width or fixed height.
Related
I am building a react native application and I use scrollview for some contents but it is not scrolling I cannot figure out why.
I try a lot of things, adding flex: 1 everywhere but none of these is working.
Thank you in advance for your help.
<KeyboardAwareScrollView contentContainerStyle={authStyles.container}>
<Layout isBackArrow={true}>
<BottomLayout>
<Header fontSize={20}>
<Text>Nous sommes</Text> {'\n'}
<Text style={authStyles.headerBold}>
Ravis de te revoir!
</Text>
{'\n'}
<Caption>Je me connecte via:</Caption>
</Header>
<View style={authStyles.socialIconView}>
<SocialIcon type="facebook" onPress={onFacebookLogin} />
<SocialIcon type="google" />
<SocialIcon
type="apple"
onPress={onAppleButtonPress}
style={{ backgroundColor: COLORS.BLACK }}
/>
</View>
<View style={authStyles.orView}>
<Header fontSize={15}>
<Text style={authStyles.headerBold}>Ou</Text>
{'\n'}
<Caption>
Je saisis mon email et mot de passe
</Caption>
</Header>
</View>
<View style={authStyles.inputView}>
<CustomInput
label="Email"
icon
iconName="envelope"
iconFamily="font-awesome"
onChange={text => setEmail(text)}
/>
<CustomInput
label="Mot de passe"
icon
iconName="lock"
iconFamily="entypo"
onChange={text => setPassword(text)}
password
/>
<CustomButton
title="Mot de passe oublié ?"
clear
onPress={open}
/>
</View>
</BottomLayout>
</Layout>
</KeyboardAwareScrollView>
Layout component:
<View style={layoutStyles.background}>
{isBackArrow && <BackArrow onPress={onBackArrowPress} />}
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
flex: 1,
}}
>
{children}
</ScrollView>
</View>
layout style:
background: {
backgroundColor: COLORS.BRAND_ORANGE_OPACITY_2,
width: '100%',
height: '100%',
flex: 1,
},
BottomLayout Component:
<View style={layoutStyles.bottomLayout}>{children}</View>;
bottom layout style:
bottomLayout: {
backgroundColor: COLORS.BRAND_ORANGE,
position: 'absolute',
bottom: 0,
height: '75%',
width: '100%',
borderTopLeftRadius: 70,
borderTopRightRadius: 70,
paddingTop: 60,
flex: 1,
},
keyboardAwareScrollView contentContainerStyle:
container: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
Thanks in advance.
KeyboardAwareScrollView gives you a ScrollView already, you don't need to add another one inside of it.
Remove the ScrollView from Layout or remove the KeyboardAwareScrollView.
React Native Nested ScrollView Can`t Scroll on Android Device
Also don't use flex: 1 in contentContainerStyle, instead use minHeight: '100%' (why?) if you want it to be full screen even when there is not enough content in it.
I am trying to add an image and card component (from react-native-elements library) in my screen (image at the top & card element in the bottom).
But in my final output, Only the card element is shown but the image is not shown in my screen. Anyone can help? Much appreciate!
My Code :
<View style={styles.FirstContainer}>
<Image style={styles.img} source={pic} />
<Card>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
</Card>
</View>
My styleSheet:
const styles = StyleSheet.create({
FirstContainer: {
flex: 0.5,
flexDirection: "column"
},
img: {
flex: 0.5,
maxWidth: '100%',
},
title: {
textAlign: 'center',
fontSize: 15,
alignItems: 'center',
paddingRight: 50
},
container: {
paddingVertical: 15,
paddingHorizontal: 10,
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
},
})
My output:
I'm trying to change picker modal background to another color it's by default White!
I use Picker from "react-native & native-base" but no one works for me!
So is there a way to change it - from native or RN?
Screenshot
Code
<View
style={{
felx: 1,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
borderColor: '#f05',
borderWidth: 1,
backgroundColor: '#273137', // it's change the bg but not the modal bg as you see in screenshot
borderRadius: 4,
}}>
<Picker
style={{
height: 40,
width: undefined,
flex: 1,
backgroundColor: '#f00', // not work!
}}
mode="dialog" // OR dropdown not change bg color
selectedValue={values.gender}
onValueChange={itemValue =>
setFieldValue('gender', itemValue)
}>
<Picker.Item
color="#ddd"
label="gender"
value={null}
key={0}
/>
<Picker.Item label="male" value={1} key={1} />
<Picker.Item label="female" value={2} key={2} />
</Picker>
</View>
In the documentation of native base, you have a itemStyle props that you can apply to the Picker component
<Picker
itemStyle={{
backgroundColor: "#ddd"
}}
>
I am new to React Native and have been struggling for a couple of days now with my layout overflowing the container after rotating the device and then rotating it back. What seems to happen is when I rotate the device from horizontal to vertical the text in the body takes up more height. When rotating back to horizontal the height seems to be sticking for the body rather than resizing like it should. I am testing it in Android Studio. I have tried two different emulators with the same results.
This is what it looks like when I first load the page:
I rotate it vertical and get this:
When I rotate it back I get the following. Notice that the start button is missing in the first box.
Here is my code:
<ScrollView style={SiteStyle.mainContent} contentContainerStyle={SiteStyle.mainContentContainer}>
<View style={SiteStyle.cardGroup}>
<View style={SiteStyle.homeCardContainer}>
<Card
title={
<View style={SiteStyle.homeCardHeader}>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<PSIcon color='#fff' name='currency-scale' size={24} style={{marginRight: 10}}/><Text style={SiteStyle.homeCardTitle}>Topic 1</Text>
</View>
</View>}
containerStyle={SiteStyle.homeCard}>
<View style={SiteStyle.homeCardBody}>
<Text style={SiteStyle.homeCardBodyText}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</Text>
</View>
<View style={SiteStyle.homeCardFooter}>
<TouchableOpacity onPress={() => navigate('Pricing', {})}>
<Text style={SiteStyle.homeCardFooterText}>
START <PSIcon name='controls-chevron-right'/>
</Text>
</TouchableOpacity>
</View>
</Card>
</View>
<View style={SiteStyle.homeCardContainer}>
<Card title={
<View style={SiteStyle.homeCardHeader}>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<PSIcon color='#fff' name='chart-chart' size={24} style={{marginRight: 10}} /><Text style={SiteStyle.homeCardTitle}>Topic 2</Text>
</View>
</View>} containerStyle={SiteStyle.homeCard}>
<View style={SiteStyle.homeCardBody}>
<Text style={SiteStyle.homeCardBodyText}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
</View>
<View style={SiteStyle.homeCardFooter}>
<TouchableOpacity onPress={() => navigate('TrendsAndAnalytics', {})}>
<Text style={SiteStyle.homeCardFooterText}>
START <PSIcon name='controls-chevron-right'/>
</Text>
</TouchableOpacity>
</View>
</Card>
</View>
<View style={SiteStyle.homeCardContainer}>
<Card title={
<View style={SiteStyle.homeCardHeader}>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<PSIcon color='#fff' name='currency-scale' size={24} style={{marginRight: 10}}/><Text style={SiteStyle.homeCardTitle}>Topic 3</Text>
</View>
</View>} containerStyle={SiteStyle.homeCard}>
<View style={SiteStyle.homeCardBody}>
<Text style={SiteStyle.homeCardBodyText}>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</Text>
</View>
<View style={SiteStyle.homeCardFooter}>
<TouchableOpacity onPress={() => navigate('MacroEconomics', {})}>
<Text style={SiteStyle.homeCardFooterText}>
START <PSIcon name='controls-chevron-right' />
</Text>
</TouchableOpacity>
</View>
</Card>
</View>
</View>
</ScrollView>
These are the relevant styles:
mainContentContainer: {
paddingTop: 25,
alignItems: 'flex-start',
backgroundColor: "red"
},
cardGroup: {
flexDirection: 'row',
flex: -1
},
homeCardContainer: {
flex: 1,
backgroundColor: 'blue',
flexDirection: 'column',
},
homeCard: {
flex: 1,
padding: 0,
marginTop: 0,
marginHorizontal: 10,
flexDirection: 'row',
backgroundColor: 'green',
height: '100%'
},
homeCardHeader: {
backgroundColor: '#e0ab24',
flex: -1,
flexBasis: 55,
height: 55,
justifyContent: 'center',
paddingLeft: 20,
paddingTop: 0
},
homeCardTitle: {
color: '#ffffff',
fontSize: 22,
marginLeft: 0,
paddingRight: 0,
textAlign: 'left'
},
homeCardBody: {
flexDirection: 'column',
flex: 1,
paddingLeft: 25,
paddingRight: 25,
paddingTop: 25,
paddingBottom: 25,
backgroundColor: 'yellow'
},
homeCardBodyText: {
fontSize: 16,
backgroundColor: 'pink'
},
homeCardFooter: {
flex: 0,
flexBasis: 44,
justifyContent: 'center',
height: 44,
borderTopColor: '#d3d3d3',
borderTopWidth: 1,
backgroundColor: 'gray',
},
homeCardFooterText: {
paddingLeft: 25,
paddingRight: 25,
color: '#ebad49',
fontSize: 18
},
For anyone interested I found the solution. On the container I want to resize based upon content (homeCardBody) I needed to change flex: 1 to flexGrow: 1, removing the stand alone word flex completely. Once doing this the component sized correctly and maintained correct sizing upon rotation.
Your homeCardFooter style has flex: 0, on it which looks like it might be the cause of this. From the docs: "When flex is 0, the component is sized according to width and height and it is inflexible." I would give homeCardFooter a width of 100%, or give it a flex value greater than zero. Try giving it flex: .3 to see if that prevents your start button from being hidden/having a height of zero.
Iam developing a mobile app using React Native and Native Base with react-native-vector-icons as well. And Iam trying to add some inline label icons to my login-form, but for some reason they keep getting cut off on the right side.
I have tried taking away the padding from the Item, Icon, and Inputs but the icons are still cut off.
I then went to change the font size of the icons themselves and that still did nothing.
Does anyone know why this is caused. I've uploaded an image of my screen and the code for it as well.
Any help on this matter would be greatly appreciated.
Here is a picture of my app emulated on my Android LG V30+App Screenshot
import React, { Component } from "react";
import { Image, View, ImageBackground } from "react-native";
import {
Container,
Header,
Title,
Body,
Content,
Thumbnail,
Card,
CardItem,
Footer,
FooterTab,
Button,
Left,
Right,
Icon,
Form,
Item,
Input,
Text,
InputGroup,
List,
ListItem
} from "native-base";
class LoginScreen extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon
name="menu"
onPress={() =>
this.props.navigation.navigate("DrawerOpen")
}
/>
</Button>
</Left>
<Body>
<Title>Run For A Reason</Title>
</Body>
<Right />
</Header>
<Content
contentContainerStyle={{ flex: 1, flexDirection: "column" }}
>
<View style={{ flex: 1 }}>
<ImageBackground
source={require("../../img/background.jpg")}
style={{ flex: 1 }}
>
<View
style={{
justifyContent: "center",
alignItems: "center"
}}
>
<Image
source={require("../../img/logo.jpg")}
style={styles.logoStyle}
/>
</View>
<View
style={{
paddingTop: 150,
paddingLeft: 20,
paddingRight: 20
}}
>
<Form style={{ backgroundColor: "white" }}>
<Item
style={{
marginLeft: 0,
paddingLeft: 0
}}
>
<Icon
style={styles.iconStyles}
name="mail"
/>
<Input
style={{ paddingLeft: 0 }}
placeholder="Email"
/>
</Item>
<Item>
<Icon
style={styles.iconStyles}
name="lock"
/>
<Input placeholder="Password" />
</Item>
</Form>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Button
primary
style={{ borderRadius: 15, marginTop: 20 }}
>
<Text>Login</Text>
</Button>
</View>
</ImageBackground>
</View>
</Content>
</Container>
);
}
}
const styles = {
iconStyles: {
color: "blue",
paddingRight: 0
},
logoStyle: {
paddingTop: 20,
width: 250,
height: 200,
alignItems: "center",
justifyContent: "center",
resizeMode: "contain"
}
};
Replace Icon with Button containing Icon and apply your style on Button component.
<Button iconLeft>
<Icon name='arrow-back' />
</Button>
can you try this
<Form style={{ backgroundColor: 'white' }}>
<Item>
<Icon style={styles.iconStyles} name='mail' />
<Input placeholder='Email' />
</Item>
<Item>
<Icon style={styles.iconStyles} name='lock' />
<Input placeholder='Password' />
</Item>
</Form>
I fixed this by increasing the width in percentages on the icon as such:
style={{width: '115%'}}
I was having the same issue because of fontSize style.
Don't use the fontSize style, instead use the size and boxSize props of the Icon component.
<Icon size={10} boxSize={20} as={MaterialIcons} name="share" />