Search code examples
react-nativeshoutem

is there way to fix issue shoutem in android device

i try to used shoutem/ui in my project! I create one component for login/register, it work well in iOS, but at android i got issue like picture below there, here is my code:

 <Screen
                style={{
                    backgroundColor: '#2ecc71'
                }}
            >
                <StatusBar
                    barStyle="light-content"
                />
                <NavigationBar
                    styleName="no-border"
                    style={{
                        container: {
                            position: 'relative',
                            width: Dimensions.get('window').width,
                            backgroundColor: '#2ecc71'
                        }
                    }}
                />
                <View
                    style={{
                        alignItems: 'center',
                        flexGrow: 1,
                        justifyContent: 'center',
                    }}
                >
                    <Divider />
                    <Image
                        styleName="medium-square"
                        source={require('../images/logo.png')}
                    />
                    {this.renderSpinner()}
                    <Divider />
                    <TextInput
                        placeholder={'Username or email'}
                        editable={!this.state.statusButton}
                        onChangeText={(text) => this.setState({ email: text })}
                        keyboardType="email-address"
                        autoCapitalize="none"
                        autoCorrect={false}
                    />
                    <Divider styleName="line" />
                    <TextInput
                        editable={!this.state.statusButton}
                        onChangeText={(text) => this.setState({ password: text })}
                        placeholder={'Password'}
                        secureTextEntry
                        autoCapitalize="none"
                    />
                    <Divider />
                    <View styleName="horizontal flexible">
                        <Button
                            disabled={this.state.statusButton}
                            styleName="full-width confirmation"
                            onPress={this.onLoginPressed.bind(this)}
                        >
                            <Text>LOGIN</Text>
                        </Button>
                        <Button
                            disabled={this.state.statusButton}
                            styleName="full-width confirmation"
                            onPress={this.goToRegister.bind(this)}
                        >
                            <Text>REGISTER</Text>
                        </Button>
                    </View>
                </View>
            </Screen>

and here is result iOS/android: enter image description here enter image description here

Solution

  • If I'm not mistaken, you never specify a width for your TextInput components.

    <TextInput
    placeholder={'Username or email'}
    editable={!this.state.statusButton}
    onChangeText={(text) => this.setState({ email: text })}
    keyboardType="email-address"
    autoCapitalize="none"
    autoCorrect={false}
/>

<TextInput
    editable={!this.state.statusButton}
    onChangeText={(text) => this.setState({ password: text })}
    placeholder={'Password'}
    secureTextEntry
    autoCapitalize="none"
/>

    It looks like by default on iOS a TextInput will stretch to the max screen width, but on android it'll shrink as you can see in your own screenshots.

    Add a width and you should be good to go.

    <TextInput
    placeholder={'Username or email'}
    editable={!this.state.statusButton}
    onChangeText={(text) => this.setState({ email: text })}
    keyboardType="email-address"
    autoCapitalize="none"
    autoCorrect={false}

    style={{ width: 100% }}
/>