karthik-b-06/react-native-segmented-control

🎉 React Native Segmented Control 🎮 for both iOS, Android and Web

Hey folks 👋

Karthik B - A Frontend Developer !

• 🏋🏼 Currently working on React Native Design System
• 👷🏼‍♂️ Working at Timeless.
• 🐢 I’m currently learning Typescript with React Native.
• ✒️ Check out my blogs in Medium.
• ▶️ Watch my React Native helper videos in YouTube.
• 🐣 Connect with me in Twitter.
• 🏀 Learning 3D with Blender. Checkout my Dribble Profile here.
• 🚀 Built Dashing Dish (iOS and Android), HomestayMatch (https://homestaymatch.com/).

Languages

Frameworks

react-native-segmented-control's Issues

Warning with shadowStyle

Hello, i have the following warning when using the component.

Warning: Failed prop type: SegmentedControl: prop type shadowStyle is invalid; it must be a function, usually from the prop-types package, but received undefined.

      <SegmentedControl
        tabs={getTabsLabel()}
        onChange={onChange}
        currentIndex={index}
        activeSegmentBackgroundColor={Colors.primary}
        paddingVertical={8}
        width={initialLayout.width - 16}
        containerStyle={{
          marginVertical: 8,
          marginHorizontal: 8
        }}
        textStyle={{
          fontSize: 12,
          fontFamily: 'RobotoRegular'
        }}
      />

Add type definitions

Problem after upgrading from 0.2.9

After upgrading to 1.1.2 from 0.2.9 I receive the following errors:

ERROR TypeError: _ReanimatedModule.default.configureProps is not a function. (In '_ReanimatedModule.default.configureProps(Object.keys(NATIVE_THREAD_PROPS_WHITELIST), Object.keys(UI_THREAD_PROPS_WHITELIST))', '_ReanimatedModule.default.configureProps' is undefined)
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.

I have react-native-reanimated 2.1.0 and react-native-gesture-handler 2.3.2 installed and developing in iOS only.

I couldn't find any solution. Do you have any idea of what could cause this issue?

Thanks in advance!

Badge in segment bar.

Please add badge support.

Todos for v0.1.6

• handlePress can be in a useCallback to prevent the closure from being created on every re-render.
• Changing the segments based on currentIndex, making it a Controlled Component
• Use Array.Map() instead of lodash

Show information according to the tabs that have been selected

I am trying to be able to show some information according to the tabs that I choose, for example, I want to touch tab 1, then I would like it to show something inside there, and if you press tab 2 in the same way I want to show something

Segmented control not rendering correctly

Hi there, I am trying to use this awesome plugin but looks like something is wrong, the control is not being rendered correctly or I am missing something.

According to the documentation, I have installed the required packages like:

...
"react-native-gesture-handler": "~2.1.0",
"react-native-reanimated": "~2.3.1"
...

Inside my view, I have:

<SegmentedControl
  containerMargin={16}
  segments={['Label 1', 'Label 2']}
  onChange={(index) => setTabIndex(index)}
  currentIndex={tabIndex}
/>

But this is what I got:

Conflict in Android with other react-native-reanimated versions?

Hi there, I am using this great package and I am enjoying how it works, but, it forces me to use react-native-reanimated version 2.3.1 which is a dependency here. If I install another version Android will throw Animated node with ID 2 already exists and app wont launch. Is there a way to allow user to pick which version of reanimated plugin to use?

Thanks!

please ad active text style prop

Is your feature request related to a problem? Please describe.
I need to change the font family of the active text segment, but I can't. bz fontWeight is not working with custom font family.

Describe the solution you'd like
just add a new prop "activeTextStyle" with TextStyle type

Additional context
like this:

<Text
              numberOfLines={1}
              style={[
                styles.textStyles,
                props?.textStyle,
                isCurrentIndex
                  ?[ {
                      color: getActiveSegmentedTextColor(
                        props?.theme,
                        props?.activeTextColor
                      ),
                      fontWeight: props?.activeTextWeight,
                    },
                  props.activeTextStyle]
                  : {
                      color: getSegmentedTextColor(
                        props?.theme,
                        props?.textColor
                      ),
                    },
              ]}
            >
              {tab}
            </Text>

Does not render correctly with flex

      <View style={{ flexDirection: 'row' }}>
        <View style={{ flex: 0.5 }}>
          <SegmentedControl
            containerMargin={16}
            segments={['Label 1', 'Label 2']}
            onChange={(index) => setTabIndex(index)}
            currentIndex={tabIndex}
            badgeValues={[2, null, 1]}
          />
        </View>
        <View style={{ flex: 0.5, backgroundColor: 'red' }} />
      </View>

The calculation of the width seems to based on the device, not the the layout.

feature requests

• add onLongPress prop (only handles the passed func, does not change state)
• add capability to init with no selected segments (i.e. currentIndex = undefined)...this almost works, but the animated tile does not render
• add enabled prop (to turn off pointer events + reduce opacity or pass disabled styling props)

Thanks for putting this repo together. I hope to use it 👍

Add support for overriding animation style

Is your feature request related to a problem? Please describe.
The default spring animation looks good in certain situations, but not when margins are small between the edge of the control area and the active control, as the active control indicator "overflows" the control area during the spring animation

Describe the solution you'd like
The ability to customize easing method of the animation

[Feature request] Add support for RTL phones

If the phone is currently set to RTL, the sliding direction will not change and it will cause the toggle to slide off screen

README broken image links

As example app has been removed in 297943bd4e6d1937274f86471838d349ec1e0e86 commit the images linked in the README.md are broken.

borderRadius in containerStyle prop not working

Describe the bug
Trying to use borderRadius in containerStyle prop doesn't work.

To Reproduce

<SegmentedControl
tabs={values}
paddingVertical={5}
containerStyle={{
marginVertical: 10,
alignSelf: 'center',
borderColor: '#E4E8F5',
borderStyle: 'solid',
borderRadius: 15,
borderWidth: 3,
}}
activeSegmentBackgroundColor="#568CEB"
segmentedControlBackgroundColor="#E4E8F5"
textStyle={{
color: '#616467',
textTransform: 'uppercase',
}}
activeTextColor="#fff"
activeTextWeight="800"
currentIndex={selectedIndex}
onChange={onPress}
/>

Expected behavior
Expected the border radius to change with different number inputs

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: iPhone 11, Google Pixel 4
• OS: ios 14.3, Android 11 (Google APIs)