CODEWITHSUNDEEP
react-nativereact-native-paper
Karli Ots
Karli Ots

Reputation: 779

React native paper checkbox design not working, invisible, ripple effect works

I have following code:

<Checkbox.Android
    color={`#FA4616`} uncheckedColor={`#FA4616`}
    status={'checked'}
    onPress={() => {}}
/>

All i see is invisible checkbox, tried removing colors, not showing up either, tried removing .Android, still not showing up.

All other modules from react-native-paper package works, even radio button, am i missing something, full code for the component is as follows.

Tried everything, even wrapped the component in Provider, tried removing Portal, theme is loaded, because parent component is designed, but still the checkbox wont show up in parent also, only ripple effect where checkbox is supposed to be.

import React, {Component} from "react";
import PropTypes from "prop-types";
import {Card, Checkbox, Dialog, Modal, Portal, Provider, Text} from 'react-native-paper';
import {OutlinedInput} from '../../native/components/UI/OutlineInput';
import {View} from 'native-base';

export default class SelectModal extends Component {
    static propTypes = {
        save: PropTypes.func.isRequired,
        hideModal: PropTypes.func.isRequired,
        data: PropTypes.array.isRequired,
        title: PropTypes.string.isRequired
    };

    static defaultProps = {
        data: [],
        title: ''
    };

    handleChange = (name, { target: { value, checked }}) => {
        const options = this.state[name];
        let index;

        if (checked) {
            options.push(+value)
        } else {
            index = options.indexOf(+value);
            options.splice(index, 1)
        }

        this.setState({[name]: options})
    }

    constructor(props) {
        super(props);

        this.state = {
            selectedChoices: [],
            filtered: this.props.data
        }
    }

    save = () => {
        this.props.save({
            selectedChoices: this.state.selectedChoices
        })
    }

    cancel = () => {
        this.props.hideModal();
    }

    search = (value) => {
        let currentList = [];
        let newList = [];
        if (value !== "") {
            currentList = this.props.data;
            newList = currentList.filter(item => {
                const lc = item.name.toLowerCase();
                const filter = value.toLowerCase();
                return lc.includes(filter);
            });
        } else {
            newList = this.props.data;
        }

        this.setState({
            filtered: newList
        });
    }

    componentDidMount() {
        this.setState({
            selectedChoices: this.props.selectedData
        });
    }

    render() {
        return (
            <Portal>
                <Modal visible={true} onDismiss={this.cancel()}>
                    {/*<Dialog.Title style={{ fontSize: 10 }}>{ this.props.title }</Dialog.Title>*/}
                    {/*<Dialog.Content>*/}
                    <Card>
                        <Card.Content>
                            <OutlinedInput onChangeText={(text) => { this.search(text) }} placeholder="Otsi" className={`mb-4`} />

                            { this.state.filtered.map((rs) => (
                                <View style={{ flexDirection: 'row' }} key={rs.id}>
                                    <Checkbox.Android
                                        color={`#FA4616`} uncheckedColor={`#FA4616`}
                                        status={'checked'}
                                        onPress={() => {
                                        }}
                                    />
                                    <Text style={{marginTop: 5}}> { rs.name }</Text>
                                </View>
                            ))}
                        </Card.Content>
                    </Card>
                    {/*</Dialog.Content>*/}
                    {/*<Dialog.Actions>*/}
                    {/*    <ContainedButton onPress={(e) => {this.save(e)}}>*/}
                    {/*        salvesta*/}
                    {/*    </ContainedButton>*/}
                    {/*</Dialog.Actions>*/}
                </Modal>
            </Portal>
        );
    }
}

Upvotes: 3

Views: 9629

Answers (3)

Adin Softić
Adin Softić

Reputation: 31

Like @Isaru mentioned, adding

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

to android/app/build.gradle worked for me.

Upvotes: 2

Shamendra
Shamendra

Reputation: 336

You should use the platform guidelines of Android. Checkbox.Android if you want to run Andoird platform guidelines all over the app. Otherwise, you can use Checkbox.IOS which you will get IOS platform guidelines checkbox all over your application.

Upvotes: 0

Isuru Sathyajith
Isuru Sathyajith

Reputation: 116

In my case, This happened because my project was missing react native vector icons dependency. It is mentioned in react-native-paper documentation. You will have to install it using; https://github.com/oblador/react-native-vector-icons#installation

If it is already installed try linking it by going to project directory > open cmd > run npx react-native link react-native-vector-icons or react-native link react-native-vector-icons as to your setup

cmd will show linking is successful.

Now run your app again...

Upvotes: 2

Related Questions