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!

[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 (


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


);
}

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