Native Base / React Native form label icon cut off

Question

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

score 1 · Answer 1 · answered Feb 15 '19 at 10:04

1

Replace Icon with Button containing Icon and apply your style on Button component.

<Button iconLeft>
    <Icon name='arrow-back' />
</Button>

answered Feb 15 '19 at 10:04

Shweta

1,099
1
9
9

score 0 · Answer 2 · answered Mar 29 '18 at 10:26

0

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>

answered Mar 29 '18 at 10:26

akhil xavier

1,847
15
15

1

Yeah thats what I had initially but as seen in your photo....both of the icons are still cut off by a hair, on the right. – Michal Mar 30 '18 at 03:15

score 0 · Answer 3 · answered Mar 05 '22 at 00:39

0

I fixed this by increasing the width in percentages on the icon as such:

style={{width: '115%'}}

answered Mar 05 '22 at 00:39

jakobinn

1,832
1
20
20

score 0 · Answer 4 · answered Jan 30 '23 at 00:05

0

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" />

answered Jan 30 '23 at 00:05

Serdar D.

3,055
1
30
23

Native Base / React Native form label icon cut off

4 Answers4