Ui: Button stylename is not work

[ahmetozalp]

ımage link: https://i.hizliresim.com/RP4OAG.jpg

import React, { Component } from 'react';

import {
    Text
} from 'react-native';
import {Actions} from 'react-native-router-flux';

import { TextInput,View,Button,Spinner } from '@shoutem/ui'

import Icon from 'react-native-vector-icons/FontAwesome';

import {
    setSessionTicket
} from '../../common/index';

export default class LoginPage extends Component {

    state = {
        username: '',
        password: '',
        isLoggingIn: false,
        message: ''
    }

    _userRegister = () => {
        Actions.RegisterPage({type: 'reset'});
    }

    _userLogin = () => {

        this.setState({ isLoggingIn: true, message: '' });

        var params = {
            username: this.state.username,
            password: this.state.password,
            grant_type: 'password'
        };

        var formBody = [];
        for (var property in params) {
            var encodedKey = encodeURIComponent(property);
            var encodedValue = encodeURIComponent(params[property]);
            formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");

        var proceed = false;
            fetch("http://192.168.1.35/kullanici/giris", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: formBody
            })
            .then((response) => response.json())
            .then((response) => {
                if (response.session_ticket)
                    setSessionTicket(String(response.session_ticket));
                if (response.status == 200)
                    Actions.MainPage({type: 'reset'});
                else
                    this.setState({ message: response.message });
            })
            .then(() => {
                this.setState({ isLoggingIn: false })
                if (proceed) this.props.onLoginPress();
            })
            .catch(err => {
                this.setState({ message: err.message });
                this.setState({ isLoggingIn: false })
            });
    }

    clearUsername = () => {
        this._username.setNativeProps({ text: '' });
        this.setState({ message: '' });
    }

    clearPassword = () => {
        this._password.setNativeProps({ text: '' });
        this.setState({ message: '' });
    }

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    padding: 25,
                    marginTop: 50
                }}>

                <TextInput
                    ref={component => this._username = component}
                    placeholder='E-Posta Adresiniz' 
                    onChangeText={(username) => this.setState({username})}
                    autoFocus={false}
                    onFocus={this.clearUsername}
                    style={{ height: 50 }}
                />
                <TextInput 
                    ref={component => this._password = component}
                    placeholder='Şifre' 
                    onChangeText={(password) => this.setState({password})}
                    secureTextEntry={true}
                    onFocus={this.clearPassword}
                    onSubmitEditing={this._userLogin}
                    style={{ height: 50 }}
                />
                {!!this.state.message && (
                    <Text
                        style={{fontSize: 14, color: 'red', padding: 5}}>
                        {this.state.message}
                    </Text>
                )}

                {this.state.isLoggingIn && <View style={{ margin: 15 }}><Spinner/></View> }
                <View style={{margin:7}} />


                <View styleName="horizontal">
                    <Button
                        styleName="confirmation"
                        onPress={this._userRegister}
                    >
                        <Icon name="user-plus" />
                        <Text> Kayıt Ol</Text>
                    </Button>

                    <Button
                        styleName="confirmation dark"
                        disabled={this.state.isLoggingIn||!this.state.username||!this.state.password}
                        onPress={this._userLogin}
                        kind='squared'
                    >
                        <Icon name="user" />
                        <Text> Giriş Yap</Text>
                    </Button>
                </View>
          </View>
        )
    }
}

[Definitely-Not-Vlad]

Hi there,

The dark stylename is deprecated. The problem is on our side with the documentation, sorry for the misleading docs, we're working on updating them.

For now, you can simply check out the theme.js file in the UI toolkit repository for an up to date list of styleNames.

[aksheyjawa]

@ahmetozalp Change 'dark' to 'secondary' and it will work as you want!