CODEWITHSUNDEEP
androidreactjsreact-nativeiconsnative-base
Michal
Michal

Reputation: 153

Native Base / React Native form label icon cut off

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

Upvotes: 0

Views: 2645

Answers (4)

Serdar D.
Serdar D.

Reputation: 3391

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

Upvotes: 0

jakobinn
jakobinn

Reputation: 2032

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

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

Upvotes: 0

Shweta
Shweta

Reputation: 1247

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

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

Upvotes: 1

akhil xavier
akhil xavier

Reputation: 1847

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>

Image

Upvotes: 0

Related Questions