I am using react-native 0.62.3 with react-native-reanimated 2.2.0 and it is working fine in IOS but in android it is throwing error for react-native-reanimated usage because of OverlayProvider
Below is my Package.json
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"android:build": "cd android && ./gradlew assembleRelease",
"android:build-dev": "cd android && ./gradlew assembleDebug",
"android:bundle": "cd android && ./gradlew bundleRelease",
"android:bundle-dev": "react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res",
"ios": "react-native run-ios",
"clean": "react-native-clean-project",
"clean:build": "cd android/ && ./gradlew clean",
"web": "expo start --web",
"postinstall": "patch-package",
"preScript": "node scripts.js",
"release-build": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/release/ && rm -rf android/app/src/main/res/drawable-* && rm -rf android/app/src/main/res/raw/* && cd android && ./gradlew assembleRelease && cd .."
},
"dependencies": {
"@georstat/react-native-image-cache": "1.6.0",
"@klarna/react-native-vector-drawable": "^0.3.0",
"@react-native-async-storage/async-storage": "1.17.7",
"@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/blur": "^4.3.2",
"@react-native-community/cameraroll": "^4.1.2",
"@react-native-community/cli": "^4.8.0",
"@react-native-community/datetimepicker": "^3.5.2",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.9.10",
"@react-native-community/progress-bar-android": "^1.0.4",
"@react-native-community/progress-view": "^1.2.3",
"@react-native-community/push-notification-ios": "^1.9.0",
"@react-native-community/toolbar-android": "^0.1.0-rc.2",
"@react-native-firebase/app": "^12.7.2",
"@react-native-firebase/messaging": "^12.7.2",
"@react-navigation/drawer": "^5.5.0",
"@react-navigation/material-bottom-tabs": "^5.1.9",
"@react-navigation/native": "^5.1.6",
"@react-navigation/stack": "^5.2.13",
"@stream-io/flat-list-mvcp": "^0.10.3",
"apisauce": "^1.1.1",
"aws-sdk": "^2.741.0",
"easy-peasy": "^5.0.3",
"expo": "~38.0.8",
"expo-splash-screen": "^0.5.0",
"expo-status-bar": "^1.0.2",
"expo-updates": "~0.2.10",
"html-parse-stringify": "^2.0.0",
"i18n-js": "^3.5.1",
"lodash": "^4.17.15",
"lottie-ios": "3.1.8",
"lottie-react-native": "4.0.2",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"native-base": "^2.13.13",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"prop-types": "^15.7.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "~0.62.3",
"react-native-animatable": "^1.3.3",
"react-native-base64": "^0.2.1",
"react-native-calendars": "^1.1297.0",
"react-native-camera": "^4.2.1",
"react-native-circular-progress": "^1.3.8",
"react-native-document-picker": "^3.5.4",
"react-native-draggable-flatlist": "^3.1.2",
"react-native-draggable-grid": "^2.1.6",
"react-native-element-dropdown": "^2.9.0",
"react-native-elements": "^2.0.4",
"react-native-fast-image": "^8.6.3",
"react-native-file-access": "1.7.1",
"react-native-fs": "^2.20.0",
"react-native-geolocation-service": "^5.3.0-beta.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-haptic-feedback": "^2.0.3",
"react-native-image-crop-picker": "^0.38.1",
"react-native-image-picker": "2.3.4",
"react-native-image-resizer": "^1.4.5",
"react-native-in-app-review": "^4.1.1",
"react-native-inappbrowser-reborn": "^3.7.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "4.0.1",
"react-native-linear-gradient": "~2.6.2",
"react-native-maps": "0.31.1",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^10.0.0",
"react-native-modalize": "^2.0.13",
"react-native-nfc-manager": "^3.14.3",
"react-native-paper": "^4.11.2",
"react-native-permissions": "^3.3.1",
"react-native-portalize": "^1.0.7",
"react-native-push-notification": "^8.0.0",
"react-native-reanimated": "^2.2.0",
"react-native-render-html": "^6.3.1",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "^2.7.0",
"react-native-share": "^8.2.2",
"react-native-signature-canvas": "^4.3.0",
"react-native-sound": "^0.11.2",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^9.13.6",
"react-native-tiny-toast": "^1.0.7",
"react-native-toast-message": "^1.4.9",
"react-native-unimodules": "~0.10.1",
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^8.1.0",
"react-native-vector-image": "^0.3.2",
"react-native-web": "~0.11.7",
"react-native-webview": "^11.14.3",
"redux-logger": "^3.0.6",
"rn-fetch-blob": "^0.12.0",
"stream-chat": "^8.9.0",
"stream-chat-react-native": "^4.11.0"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^3.0.0",
"babel-jest": "^24.9.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"babel-preset-expo": "~8.1.0",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"jest": "^24.9.0",
"jetifier": "^1.6.5",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.3.2",
"prettier-eslint": "^9.0.0",
"react-native-clean-project": "^3.6.4",
"react-test-renderer": "16.11.0",
"reactotron-react-native": "^5.0.0",
"reactotron-redux": "^3.1.3",
"remote-redux-devtools": "^0.5.16"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"private": true,
"name": "nurseio",
"version": "1.0.0"
}
Below is my chat room file where I am getting that error because of OverlayProvider
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useStoreState } from 'easy-peasy'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { StreamChat } from 'stream-chat';
import { Channel, ChannelList, Chat, MessageInput, MessageList, OverlayProvider, Thread } from 'stream-chat-react-native';
import { Images,StreamChatKey } from '../Constants';
import { ApiService } from '../Store';
import { KeyboardAvoidingView } from 'react-native';
const Chatroom = ({route:{params},navigation}) => {
const {channel_id,facility_id,memberName,image_url}=params
const { user } = useStoreState(state => state.user.me)
const client = StreamChat.getInstance(StreamChatKey.API_KEY);
const [channel, setChannel] = useState();
const [clientReady, setClientReady] = useState(false);
const [thread, setThread] = useState()
let StreamToken = ''
useEffect(()=>{
setupClient()
},[])
const setupClient = async () => {
const loggedInPrefixID = await AsyncStorage.getItem('loggedInPrefixID')
const loggedInFacility = await AsyncStorage.getItem('loggedInFacility')
const isFacility = user?.profileable_type.includes('Facility')
let facilityObj
if(user?.profileable?.facilities){
facilityObj = user?.profileable?.facilities.find(obj => obj.id == loggedInFacility);
}
const Token = async() => {
const data = isFacility ? { id: loggedInFacility, type: "Facility" } : { id: user?.id, type: "HCP" }
const createJWTResp = await ApiService.createStreamJWT(data)
if (createJWTResp.status == 200) {
let Id = isFacility? loggedInFacility : user?.id
const resp = await ApiService.getStreamJWT(Id)
if (resp.status == 200) {
console.log(resp?.data?.stream_token,'<<resp')
return resp?.data?.stream_token
}else{
console.log('Something went wrong')
}
}
}
try {
await client.connectUser(
{
id: isFacility? loggedInPrefixID:user?.prefix_userid,
name: isFacility? facilityObj?.name : user?.full_name,
image: isFacility? facilityObj?.image_url : user?.image_url,
},
Token,
);
createAndWatchChannel()
setClientReady(true);
} catch (e) {
console.log('clientError',e);
alert('Failed to setup client')
}
};
const createAndWatchChannel = async () => {
const loggedInPrefixID = await AsyncStorage.getItem('loggedInPrefixID')
const newChannel = client.channel('messaging',channel_id,);
await newChannel.watch();
setChannel(newChannel);
if(facility_id){
{user?.profileable_type == "FacilityManager"?
await newChannel.addMembers([`${loggedInPrefixID}`,`${facility_id}`]):
await newChannel.addMembers([`${user?.prefix_userid}`,`${facility_id}`])}
}
};
useEffect(()=>{
if(client){
return () => {
client.disconnectUser()
}
}
},[])
const Header = () => {
return(
<View style={{alignItems:'center',justifyContent:'space-between',flexDirection:'row',width:'100%',backgroundColor:'#ffffff',borderBottomColor:'#767676',borderBottomWidth:0.4,padding:10}}>
<TouchableOpacity
onPress={()=>navigation.goBack()}
style={{marginLeft:10}}
>
<Image source={Images.back_arrow} style={{height:20,width:25}}/>
</TouchableOpacity>
<Text style={{fontWeight:'600'}}>{memberName}</Text>
{image_url?
<Image source={{uri:image_url}} style={{height:40,width:40,borderRadius:20,marginRight:10}}/>
:
<Image style={{height:40,width:40,borderRadius:20,marginRight:10}} source={Images.defaultPic} />}
</View>
)
}
if (!clientReady) return (
<View style={{flex:1}}>
<Header/>
</View>
);
return (
<OverlayProvider>
<Chat client={client}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : null}
keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0} // Adjust the offset based on your preference
>
<View style={{flex:1}}>
{channel ? (
<Channel channel={channel} keyboardVerticalOffset={0} thread={thread} threadList={!!thread}>
{thread ? (
<>
<Header/>
<Thread />
</>
) : (
<>
<Header/>
<MessageList onThreadSelect={setThread} />
<MessageInput />
</>
)}
</Channel>
) : (
// <ChannelList onSelect={setChannel} />
<Text>Loading...</Text>
)}
</View>
</KeyboardAvoidingView>
</Chat>
</OverlayProvider>
)
}
export default Chatroom
const styles = StyleSheet.create({})
This is error I am getting after navigating to chatroom file
I have tried to upgrade react-native-reanimated"2.2.0" to react-native-reanimated"2.2.4" but it is throwing A problem occurred evaluating project ':react-native-reanimated'.
No aar for react-native-reanimated found. and also causing not able to build the aap also
