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

[relez]

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!

[laogui]

I have same issue. then copy this package file to my project, it works.

import SegmentedControl from '../../components/SegmentedControl'

[relez]

One easy workaround is to make the reanimated plugin version match with the one required by the segmented control (based on latest version, v1.1.2).

yarn add [email protected]

I hope it helps!

[ddikodroid]

anyone facing issue when changing the reanimated version above 2.3.1?

[pechischev]

I have the same issue.

"react-native-reanimated": "2.8.0" // in dependencies "react-native-reanimated": "2.9.1" // in resolutions after fix that bug

[relez]

My workaround was to download the source code, place it somewhere in my local computer and fix the version in the resolutions. Then specify the path in package.json like this:

"rn-segmented-control": "file:/path/to/package/react-native-segmented-control/" I hope it helps!

[whatdtech]

https://github.com/whatdtech/react-native-segmented-control

this is a modified version of this fork installation details are in readme file. works with latest expo and bare react native .70 version

[exotexot]

Hi,

with @whatdtech fork I was able to install it. However I get this error:

error: Error: Unable to resolve module deprecated-react-native-prop-types from /Users/vinzenz/Repositories/cat70refactor/node_modules/rn-segmented-control/src/segmentedControl/index.js: deprecated-react-native-prop-types could not be found within the project or in these directories: node_modules/rn-segmented-control/node_modules node_modules 1 | import PropTypes from "prop-types";

2 | import ViewPropTypes from "deprecated-react-native-prop-types"; | ^ 3 | import React, { useEffect } from "react"; 4 | import {

[whatdtech]

try **yarn add deprecated-react-native-prop-types** or *npm i [email protected]* react-native-prop-types was deprecated and moved out of core react native

[mars-lan]

@whatdtech do you mind creating a PR if haven't done so already?

[whatdtech]

No problem in creating a PR. Few more issues are there to be sorted out.

[exotexot]

react-native info

info Fetching system and libraries information... System: OS: macOS 12.6 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 11.45 GB / 32.00 GB Shell: 3.3.1 - /usr/local/bin/fish Binaries: Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: API Levels: 28, 29, 30 Build Tools: 29.0.2, 29.0.3, 30.0.3 System Images: android-29 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.7042882 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 1.8.0_242-release - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.3 => 0.70.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

I'm using "react": "18.1.0", "react-native": "0.70.3", "rn-segmented-control": "github:whatdtech/react-native-segmented-control", "typescript": "^4.8.3" npm i [email protected]

I'm testing on iOS and macOS (using Catalyst) and get the 3 errors and 2 warning. :(

I'm using the code from the example

` import SegmentedControl from 'rn-segmented-control';

import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import SegmentedControl from './SegmentedControl';

export default function App() { const [tabIndex, setTabIndex] = React.useState(0);

return ( <View style={styles.container}> <View style={styles.box}> <SegmentedControl containerMargin={16} segments={['Label 1', 'Label 2']} onChange={(index) => setTabIndex(index)} currentIndex={tabIndex} /> </View> </View> ); }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, box: { marginHorizontal: 16, marginVertical: 16, }, }) `

[whatdtech]

first two warnings can be ignored due to ViewStyle props returning null maybe typescript old version dependency. Problem here is you are importing segmented control twice import SegmentedControl from 'rn-segmented-control'; import SegmentedControl from './SegmentedControl';

[whatdtech]

Try this example. import SegmentedControl from 'rn-segmented-control';

import * as React from 'react'; import { KeyboardAvoidingView, Platform, StyleSheet, Text, Input, Dimensions, StatusBar, ScrollView, NativeEventEmitter, TextInput,

TouchableHighlight, View, Alert, SafeAreaView } from 'react-native';

const W = Dimensions.get('window').width; const H = Dimensions.get('window').height;

export default function App() { const [tabIndex, setTabIndex] = React.useState(0);

return ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.container} > <>

<SegmentedControl //tabs={['Shop', 'Discover', 'Brands']} tabs={['ROUTER', 'AP', 'BLUETOOTH']} onChange={(index) => setTabIndex(index)} currentIndex={tabIndex} segmentedControlBackgroundColor='#3d1e25' activeSegmentBackgroundColor='gold' activeTextColor='black' textColor='silver' textStyle={{fontSize: 16,}} paddingVertical={10} /> </>

  </KeyboardAvoidingView>

); }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', height: H, width: W, }, box: { marginHorizontal: 16, marginVertical: 16, }, })

[exotexot]

Ah yes, my issue wasn't related to the double import you pointed out. I wasn't using it like I said I did. However, the errors were related to me using the

segments... You're not using the segments prop but the tabs prop. This differs from the original Readme.

[whatdtech]

ok, Thanks for testing. I will look into it