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