React-native-paper, IconButton. How to make button background color in IOS and Android?

Question

I want to make background color for IconButton component from react-native-paper library. I didn't find any advices in documentation about backgroundColor. I tried to use backgroundColor in style. This works for IOS but doesn't work for android, also I tried to use background prop and on Android it causes error: ` Error while updating property 'nativeBackgroundAndroid' of a view managed by RCTView

java.lang.String cannot be cast to abi41_0_0. com.facebook.react.bridge.ReadableMap `

This solution with backgroundColor in style works only for IOS:

<IconButton
    style={{
     backgroundColor: "#DBD7D2", //works on IOS only
     position: 'absolute',
     top: hp('7%'),
     alignSelf: 'flex-end',
     right: wp('0.2%'),
    }}
    icon="layers-outline"
    color={Colors.black}
    size={hp('3.5%')}
    onPress={() => setSatellite((prev) => !prev)}
/>

Any suggestions?

score 0 · Answer 1 · edited Aug 26 '21 at 14:51

I didn't find a way how to do it with react-native-paper so I did it using <TouchableOpacity> and <IonIcons> Example:

 <TouchableOpacity activeOpacity={.5} onPress={() => setSatellite((prev) => !prev)} style={{
                        right: wp('2%'),
                        position: 'absolute',
                        top: hp('7%'),
                        alignSelf: 'flex-end',
                        width: wp('12%'),
                        height: hp('5%'),
                        justifyContent: "center",
                        marginTop: wp('2%'),
                        backgroundColor: "#DBD7D2",
                        borderRadius: hp('1%'),
                    }}>
                        <Ionicons
                        style={{alignSelf: "center"}} color={'#000000'} size={hp('4%')}
                        name={"layers-outline"}/>
                    </TouchableOpacity>

React-native-paper, IconButton. How to make button background color in IOS and Android?

1 Answers1