Conflict in Android with other react-native-reanimated versions?
relez opened this issue · 15 comments
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!
I have same issue. then copy this package file to my project, it works.
import SegmentedControl from '../../components/SegmentedControl'
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 react-native-reanimated@2.3.1
I hope it helps!
anyone facing issue when changing the reanimated version above 2.3.1?
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
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!
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
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 {
try **yarn add deprecated-react-native-prop-types** or *npm i deprecated-react-native-prop-types@2.2.0*
react-native-prop-types was deprecated and moved out of core react native
@whatdtech do you mind creating a PR if haven't done so already?
No problem in creating a PR. Few more issues are there to be sorted out.
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 deprecated-react-native-prop-types@2.2.0
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,
},
})
`
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';
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,
},
})
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.
ok, Thanks for testing. I will look into it