This project uses SDK 41.0.0, but the version of Expo Go only supports the following SDKs: 43.0.0, 44.0.0, 45.0.0.

It seems that all the components that are implemented as function components can be imported like this:

import {CheckBox, ColorPicker} from 'react-native-btr';

But all the components that are implemented with classes cannot be imported like this:

import {CollapsibleCard, RadioGroup, SnackBar} from 'react-native-btr';

It says these imports are not found.
Is there another way I can use them?

Hi,

I am using the 2.1.2 version of this library.

But recently got security issue because of [email protected].
[email protected] › [email protected] › [email protected]

Can you please resolve this issue?. This issue will be resolved If you upgrade into [email protected]

https://security.snyk.io/vuln/SNYK-JS-LODASHTEMPLATE-1088054

Hello

I am getting the following warning :

EventEmitter.removeListener('didUpdateDimensions', ...): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.

when I used the bottom sheet component

any idea or help how to avoid it ? I think it's related to the component it self and how it's built

Hi,

I am currently trying to use the CheckBox component. However when I import it into the project, I get this error:
Unrecognized font family 'Material Icons'

Here is our package.json:

"react": "16.10.2",
"react-native": "0.61.2",
"react-native-btr": "^1.1.4",

We do not have the vector-icon library installed directly in our package.json but I understand it's not needed right ?

This happens on the iOS Simulator, I have not tried Android yet.

Does the react-native-vector-icons library need to be installed manually in the project ?

Thanks
Greg

Hi ,
is there is any possibility to add fontawesome icons to IconPicker ?

Hello ThakurBallary,

What a great library!

I am looking for radio group for my react native project, and I found out this library, but when I run my project after adding this library an error occurred.

The error says

... Module @expo/vector-icons does not exist in the Haste module map ...

and finally i found out that your library only works with expo.

I think it is a better idea if you add note on your readme, that this library only works with expo.

Thanks you

When closing the BottomSheet component, the screen exhibits an unexpected flashing behavior. Specifically, the issue manifests as a sequence of color changes on the screen when the BottomSheet is toggled. The sequence is as follows:

1. Upon initiation of the BottomSheet's closing action, the screen momentarily darkens.
2. Subsequently, as the BottomSheet continues its closing animation, the screen briefly brightens.
3. Following this, there is an additional, unexpected darkening of the screen.
4. Finally, the screen brightens once again, returning to its original state.

const FilterButtomSheet = ({ isVisible, onClose }) => {
  const [isFilterVisible, setIsFilterVisible] = useState(false);
  const [selectedFilter, setSelectedFilter] = useState(filterOptions[0]);


  return (
    <BottomSheet
      visible={isVisible}
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
    >
      <View style={styles.bottomNavigationView}>
        {filterOptions.map((option, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => {
              setIsFilterVisible(true);
              onClose();
            }}
            style={styles.item}
          >
            <Text style={textStyles.LabelSemiboldMedium}>{option}</Text>
            <RadioButton
              isSelected={selectedFilter === option}
              onPress={() => {
                setSelectedFilter(option);
              }}
            />
          </TouchableOpacity>
        ))}
      </View>
    </BottomSheet>
  );
};
export default FilterButtomSheet;

const styles = StyleSheet.create({
  bottomNavigationView: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 24,
    padding: 12,
    paddingBottom: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 12,
    width: '100%',
  },
});

How do you make the sides for the bottom sheet rounded?

edited: I figured it out now

Hello. Can you provide the source code of this https://expo.io/@thakurballary/react-native-btr-demo

The reason is I want to see how you made the radiobuttons to only select a single radiobutton

Hi,
Im trying to implement your library but i get an error, because i dont use expo in my proyect and as can see include expo@icons. Can you tell me if is posible to use it with react-native-vector-icons ?

Thanks a lot

Having trouble with find method with implementing radio buttons with dynamic data. Should I import it from any other npm module, any help is much appreciated. Thankyou

The outer circle when the btn is selected or not doesn't have smooth circle. Please see the inner circle of the selected radio btn (value is different labelled btn in the image below) which looks very smooth in appearance.

P.S I've tested it in android samsung devices.

When running on a samsung 8" tablet the radio buttons appear slightly mis-shapen with the center selected circle obviously off center. This could possibly be related to issue #2 but in my case presents with a very obviously offset graphic. The root cause of this is the size of the element does not take into account pixel density. Specifying a size of 8 may result in unexpected aliasing and positioning on a device with a pixel density of 3. The fix is to use PixelRatio.roundToNearestPixel() to set the sizes.

The patch below fixes the problem for me:

patch-package
--- a/node_modules/react-native-btr/src/Components/RadioButton.js
+++ b/node_modules/react-native-btr/src/Components/RadioButton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, PixelRatio } from 'react-native';
 import PropTypes from 'prop-types';
 
 const RadioButton = props => {
@@ -16,16 +16,16 @@ const RadioButton = props => {
     <View
     style={{
       borderColor: props.color,
-      borderRadius: props.size * 2,
-      borderWidth: 2,
+          borderRadius: PixelRatio.roundToNearestPixel(props.size * 2),
+          borderWidth: PixelRatio.roundToNearestPixel(2),
       opacity
     }}>
     <View
       style={{
         backgroundColor: props.checked ? props.color : '#0000',
-        borderRadius: props.size,
-        padding: props.size,
-        margin: props.size * .2,
+            borderRadius: PixelRatio.roundToNearestPixel(props.size),
+            padding: PixelRatio.roundToNearestPixel(props.size),
+              margin: PixelRatio.roundToNearestPixel(props.size * .2),
       }}
     />
     </View>

bundling failed: Error: Unable to resolve module @expo/vector-icons from /home/imsov/git/d4d/no de_modules/react-native-btr/src/Components/CheckBox.js: Module @expo/vector-icons does not exist in th
e Haste module map