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

Viewed 5074

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>
        );
    }
}
3 Answers

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...

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.

Like @Isaru mentioned, adding

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

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

Related