I am using react-native-reanimated-carousel ^2.5.0 and it does show photos as it should but when I try to swipe left or right it does not do anything, it does not scroll nor shows any errors.
Here are dependencies related to it:
"react-native-reanimated": "^2.4.1",
"react-native-reanimated-carousel": "^2.5.0",
"react-native-gesture-handler": "^2.4.2",
and here is the Carousel code:
<Carousel
width={windowWidth * 1.1}
data={newImgArr}
windowSize={10}
loop={true}
mode={'parallax'}
autoPlay={false}
renderItem={({ item }, index) => {
return (
<FastImage
source={{
uri: item,
priority: FastImage.priority.high,
cache: FastImage.cacheControl.immutable,
}}
style={{ flex: 1 }}
resizeMode={FastImage.resizeMode.cover}
/>
);
}}
/>
I would really appreciate some help here!
This problem was already mentioned in a resolved issue.
You just have to wrap your Carousel in GestureHandlerRootView.
export default function App() {
return <GestureHandlerRootView>{/* content */}</GestureHandlerRootView>;
}
Related
This question has been asked before but 2 years ago, hence those answers are not working with current react navigation v6. As the title of the question says, the header title, when it is a long string, it just goes beyond the width of screen and doesn't respect headerRight component as well (can see in the image), but in iOS, same code, it automatically truncates and hides text behind headerRight. Below is the code I'm using:
useLayoutEffect(() => {
navigation.setOptions({
headerTitle: data.display_name,
headerTitleStyle: {
fontWeight: '600',
fontSize: scale(20),
color: THEME.background,
},
headerTitleAlign: 'left',
headerLeft: () => (
<TouchableOpacity
onPress={handleBack}
style={{ marginRight: 5 }}>
<Ionicon name="arrow-back" size={24} color="white" />
</TouchableOpacity>
),
headerRight: () =>
(
<TouchableOpacity
style={styles.buyBtnContainer}
onPress={handleBuy}>
<Text style={styles.buy}>BUY</Text>
</TouchableOpacity>
) : null,
});
}, [data]);
What I tried:
Tried to add width: 60% inside headerTitleStyle but looks like v6 doesn't have this property, if I do add it, it just doesn't work.
Adjusting, truncating manually characterwise:-
headerTitle: Platform.OS === 'android'
? data.display_name.length <= 20
? data.display_name
: data.display_name.substring(0, 20) + '...'
: data.display_name
but due to different screen sizes, 20 pixels for 1 phone is too less for someother phone or vice-versa, so in the end, it kinda handles poorly & looks ugly...
So is there any preferred way to handle this dynamically? like how iOS does? If so please do provide solution...
package.json:
"dependencies": {
"react": "18.0.0",
"react-native": "0.69.2",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-navigation/material-top-tabs": "^6.2.2",
},
I developing my app with Expo and NativeBase.
Now this time, I would like you to help me with this weird Style problem.
Environment
"dependencies": {
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"babel-plugin-dotenv-import": "^2.2.0",
"expo": "~44.0.0",
"expo-location": "~14.0.1",
"expo-permissions": "~13.1.0",
"expo-status-bar": "~1.2.0",
"native-base": "^3.3.11",
"prettier": "^2.6.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-maps": "0.29.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0",
"tailwindcss": "^3.0.23"
},
Example
As I wrote above, Style dose not work stably for any reasons and it's the problem.
I will show you my example.
Expected Style
This picture is my expected view in this case.
What I want do is placing the white box that has texts and buttons inside on the center of the MapView.
Actual Style
This picture is the weird problem.
Style works well and is displayed like the above picture sometimes, but the other times, like the below picture, it does not work.
The weird thing is that every time I reload the app without editing my code, Style's appearance sometimes changes. This is the meaning of "Style does not work stably".
NOTE: This picture looks different a bit from the above picture like the button color. Please don't care about details because this is just a developing view.
What I did for fixing the problem
Clear cache and reload the app
Stop using my custom theme
These does not fix the problem.
code
Here is my code.
WordBox is called by HomePresenter.
When onPress is emitted, WordBox shows.
I'm not familiar with React Native and Expo very much, so I first faced this problem and am really troubled.
My explanation must be complex because I am not used to use English, but if it is alright with you, please tell me how to fix it.
Thank you.
export const WordBox = (isShow: boolean): JSX.Element | null => {
if (!isShow) {
return null
} else {
return (
<View width="full" height="full">
<Center width="full" height="full">
<Box
width={sizes.Box.width}
height={sizes.Box.height}
backgroundColor={colors.Base.White}
borderRadius="3xl"
shadow="7"
>
<Text mt="4" fontSize="3xl" fontWeight="bold" textAlign="center">
Set a new marker here?
</Text>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
Yes
</Button>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
No
</Button>
</Box>
</Center>
</View>
)
}
}
Additional Information(Without NativeBase code)
I styled my app again without NativeBase following great Abe's advise.
This issue still happens.
The minor appearance is different from above pictures a bit, but the view changes when reloading my app or rerunning it like these two pictures because Style doesn't work well.
Here is my code without using NativeBase but using tailwind-rn instead.
export const WordBox = (isShow: boolean): JSX.Element | null => {
const tailwind = useTailwind()
return (
<View style={tailwind('m-auto bg-white rounded-3xl h-1/6 w-10/12')}>
<Text style={tailwind('mt-2 text-2xl font-bold text-center')}>
Set a marker here?
</Text>
<View style={tailwind('mt-4 gap-x-2 flex-row justify-center')}>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>Yes</Text>
</Pressable>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>No</Text>
</Pressable>
</View>
</View>
)
}
Additional Information(Where WordBox is called)
WordBox is called inside MapView component which is wrapped by HomePresenter.
newmarker is called when I press on the screen, so new marker is not related to this problem, I think.
export const HomePresenter: FC<HomeProps> = ({
loading,
location,
newMarker,
showAddModal,
onPress,
}) => {
const tailwind = useTailwind()
return (
<View>
{loading ? (
<View style={tailwind('text-center justify-center')}>
<Text style={tailwind('font-bold text-2xl')}>Loading</Text>
</View>
) : (
<>
<MapView
key="mapview"
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={tailwind('h-full w-full')}
region={location}
onPress={(e: MapEvent) => {
onPress(e)
}}
>
{newMarker && newMarker}
<WordBox /> // WordBox is called HERE
</MapView>
</>
)}
</View>
)
// }
}
I resolved this problem thanks to #Abe.
The source of this issue is placing Modal inside MapView component.
I should've placed my modal underneath MapView. In fact, this is written in the react-native-maps Docs
I hope those who use react-native-maps do not make the same mistakes.
Used versions:
"expo": "^36.0.2",
"react": "16.9.0",
"react-dom": "^16.8.6",
"react-native": "0.61.4",
"react-native-web": "0.11.7",
"react-native-webview": "^8.1.2"
Used React Native code:
<WebView
source={{uri: 'https://www.somedomain.com/'}}
style={{marginTop: 22, flex: 1}}
injectedJavaScript={this.state.contentScript}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={this.receiveMessage}
ref={this.props.webview}
/>
Only a red border is present on the web version meanwhile on the Android it loads fine.
No errors present. Could this be a known issue? But I can't find it reported anywhere.
Currently WebView is not supported by expo-web. Check Platform Compatibility for more information.
But if you want to load your WebView inside expo-web, place it inside iframe as below,
import * as React from "react";
import { View, Platform } from "react-native";
import { WebView } from "react-native-webview";
export default class App extends React.Component {
render() {
return Platform.OS === "web" ? (
<iframe src="https://www.somedomain.com/" height={'100%'} width={'100%'} />
) : (
<View style={{ flex: 1 }}>
<WebView
source={{ uri: "https://www.somedomain.com/" }}
style={{marginTop: 22, flex: 1}}
/>
</View>
)
}
}
Hope this helps you. Feel free for doubts.
This is the code I am implementing to access camera in React Native Expo App. But this code is not working. It only shows blank screen and nothing else. Please suggest me if any changes required or any alternate method to implement this.
import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
<Text style={{ fontSize: 18, marginBottom: 50, color: 'red' }}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
It looks like somehow you have denied permission in App. Also In the code, if hasPermission is null you will see a blank page.
Note: In Ios, if you have denied or granted permission once, then the app will never show permission popup again until you use linking and let the user enable permission from setting.
It looks like the Camera.requestPermissionsAsync is now deprecated. You might try using Camera.requestCameraPermissionsAsync(). After I updated my code the deprecation notice disappeared.
The Camera component shouldn't in the <SafeAreaView>
<YOUR_CAMERA_COMPONENT /> /* <-- when outside the <SafeAreaView> , it work!*/
<SafeAreaView>
<YOUR_CAMERA_COMPONENT /> /* <-- it will show blank view */
</SafeAreaView>
I solved the problem when removed the <Camera /> from <SafeAreaView />
Firstly i am using:
"expo": "~40.0.0",
now im upgrading the cli and then using expo upgrade and everything fix itself:
"expo": "^41.0.0",
"expo-camera": "~11.0.2",
"expo-cli": "^4.4.1",
"expo-image-picker": "~10.1.4",
"expo-status-bar": "~1.0.4",
"firebase": "8.2.3",
The emulator camera doesn't support this library , try using in Android or Ios device and it will work perfectly fine.
Please check this example or the original Expo-camera library.
Hope it helps .feel free for doubts
I saw your code and I feels this code same as a expo-camera documentation.
I think you are trying this code on Emulator/Simulator . please try once on
Physical Device. because emulator doesn't support camera. you can read the document in brief https://docs.expo.io/versions/latest/sdk/camera/#requestpermissionsasync
I have tried Flatlist, SectionList, Animated.Flatlist and Animated.SectionList,
Here is a simple example how to check scrollToLocation:
<SectionList
onLayout={this.onLayout.bind(this)}
ref={ref => {
this.sectionList = ref
console.log('ref.scrollToLocation: ' + CircularJSON.stringify(ref.scrollToLocation))
} }
ListHeaderComponent={() => <View style={{height:300, width:300, backgroundColor:'green'}}></View>}
sections = {[{key: 1, data: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}]}
renderItem = {() => <View style={{width:300, height: 100, marginBottom:20, backgroundColor:'red'}}></View>}
/>
Expected to see scrollToLocation method but showing undefined.
Please help me if you have any idea. Thanks!
Env:
"react": "16.6.3",
"react-native": "0.57.8",
Simulator: Xcode 10 iPhone X
Try Implementing This Way.
this.SectionList.scrollToLocation({sectionIndex,itemIndex})
render(){
return(<SectionList
ref={ref=>{this.SectionList = ref}}
otherProps
/>)
}