I have a Swiper with one Image-children (the same problem when I have multiple images as children). If I navigate to this screen I except to see the image.
But: The swiper area is black (invisible) until I scroll down a little bit. If I scroll, the image get loaded.
<Swiper height={300} >
<View style={{flex: 1, backgroundColor: 'red'}}><Image style={{ flex: 1 }} source={{uri: 'https://s3.eu-central-1.amazonaws.com/xxxxxxx'}} /></View>
</Swiper>
I am using the iOS Simulator with the following versions:
react-native-swiper v1.5.13
react-native v0.46.4
Adding removeClippedSubviews={false} to the Swiper solved the problem.
Related
I'm currently creating an app using react-native for a capstone project, but have run into a small issue when I try using the snap carousel. It seems that all text does not appear under the carousel for some reason.
const YourApp = () => {
return (
<ScrollView>
<View style={styles.container}>
<View style={{width: '100%', height: 200, backgroundColor: '#c89686',}}>
<Text style={styles.txt}>SPARTAN</Text>
<Text style={styles.txt1}>FITNESS</Text>
</View>
<Text style={styles.txt2}>New Arrivals</Text>
<CarouselCards></CarouselCards>
***<Text style={{}}>Swipe to View</Text>***
</View>
</ScrollView>
);
}
I tried styling, adding margin-top to see if it was for some reason inside of the carousel, but nothing related to styling worked, it instead just added whitespace on the app. Tried adding another container for the text but it did the same thing as the styling, and didn't display.
In my ReactNative app, I'm using "SafeAreaView" to restrict my content in the visible area. My app runs in landscape mode. Look at the image
My app has FlatList with 2 Items rendered. If you notice the FlatList (in green color), on the left it has some padding of 20 pixels and on the right, it has notch (though it has padding of 20 pixels to the border). Due to notch on right my FlatList don't seem to be centered.
Is there a way to handle the content size considering the notch area?
try wrapping your Flatlists with an inner View between the Flatlists and the SafeAreaView and add the padding the inner View e.g
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, padding: 24, justifyContent: 'center', alignItems: 'center'}}>
{/* your flatlists here */}
</View>
</SafeAreaView>
this should make it look more natural.
For iOS, you can use this package: https://www.npmjs.com/package/react-native-iphone-x-helper
getBottomSpace() and getStatusBarHeight()
absoluteFillObject it's the only way to get map working?
I want to distribute the screen in this way
map - flex 3
bottom layout (eg taxi details) - flex 1
but I can't get the map working with flex (variable size) without getting an error about the map size can't be 0
It's important the map don't use the whole screen because the center of the map it's not the center of the screen since we have a bottom layout using part of the screen
As a workaround i use marginBottom to avoid the bottom layout height but that way I have to give a fixed height to the bottom layout and I lose the flexible size
<View style={{width:'100%', height:'100%'}}>
<Map style={{width:'100%', height:'75%'}}></Map>
<OtherComponent style={{width:'100%', height:'25%'}}></OtherComponent>
</View>
I faced same issue with Map and flex combination. I just give height in percentage and its work for me. You can try with above code for your solutions.
The Nirmalsinh's solution work, but I would suggest just wrap the map view in a flex container, e.g.:
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<MapView height: '100%'}}/>
</View>
</OtherComponent>
</View>
This works for me...
<View style={styles.container}>
<MapView
style={styles.map}
/>
</View>
and the styles,
container: {
...StyleSheet.absoluteFillObject,
height: 540, // you can customize this
width: 400, // you can customize this
alignItems: "center"
},
map: {
...StyleSheet.absoluteFillObject
}
My issue right now is when videos that were recorded in portrait mode get cut off or zoomed in when watching them in landscape. What is happening is the user has to scroll down to see the length of the video because the width is set to 100%. I am able to add 35% left and right padding to the view styling to make the video fit the screen but it doesn't seem very robust as it still gets slightly cut off on different devices. Is there any styling advice for this situation? I am new to this so if you want any more information regarding the problem let me know.
You can try wrapping up the <Video /> component inside a parent <View /> with flex: 1. Something like this will work -
<View style={{flex: 1}}>
<View style={{flex: 1}}/>
<Video style={{flex: 1}} resizeMode="contain" />
<View style={{flex: 1}}/>
</View>
resizeMode="contain" will maintain the aspect ration of the video and the other two <View />s will occupy equal space causing the portrait video to render in landscape.
Here is the code:
<View
style={{transform: [{translateX: this.state.translateX}], width: '120%'}}>
<View style={{width: '20%'}}>{someText}</View>
<View style={{width: '80%'}}>{someText}</View>
<View style={{width: '20%'}}>{someText}</View>
</View>
this.state.translateX was respond to swipe gesture which worked fine, the first two View did move but the last View was not visible (or not moved?). I want to show the last View when this.state.translateX changed. But it seems not being properly rendered?
It is because Android does not render element which is off screen. Solution is place the element in screen with position: 'absolute' and then use translateX to hide it from screen.