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()
Related
I have problems with the transparency of a View in React Native Expo, within the View I have text but this is not seen on iphone devices and on androids the text is seen with transparency but it is not what I want.
Code:
<View style= {{paddingHorizontal:30, borderRadius:1, marginTop:5}}>
<View style={{alpha = 1.0, alignItems:'center', borderRadius:10, backgroundColor: 'white', alignContent:'center', paddingVertical:10}}>
<Text style={{fontSize:15, color:'white', fontWeight: 'bold'}}>Iniciar Sesión</Text>
</View>
</View>
What I want to do:
enter image description here
What i get:
enter image description here
The alpha on the style is applied to the entire view and as a result also causes the all child components to become transparent. You want to apply your alpha only to the background color of the parent view. In react-native you can achieve that by defining your backgroundcolor rgba format
Color documentation can be found
https://reactnative.dev/docs/colors
And here is an expo snack to demonstrate the behavior.
https://snack.expo.io/sl8VafHil
My code is pretty simple: (relevant parts shown only)
<ScrollView style={{/* padding, centering... */}>
<Text>SHARE WITH YOU FRIENDS</Text>
</ScrollView>
Yet, when I inspect the Text node, its width is 100% of its container, and the grey background goes all the width.
Is there a layout setting to make this Text's width as small as possible? I.e. only until the end of the Text.
You can use alignSelf property:
<View style={{alignSelf: 'flex-start'}}>
<Text>SHARE WITH YOU FRIENDS</Text>
</View>
For Scroll view you can try like
<ScrollView contentContainerStyle={{ alignItems: 'flex-start'}}>
<Text >SHARE WITH YOU FRIENDS</Text>
</ScrollView>
Hope this will help!
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.
I would like the size of my boxes not to be changed by margin and padding.
React Native styles all views as if box-sizing: border-box is set. See this code: https://github.com/facebook/react-native/blob/5aa1fb3ff326a429e33a443576da866f2a63c20c/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L632
As mentioned in another answer, In React Native, everything is treated as if as if box-sizing: border-box is set.
A workaround to simulate css content-box is to wrap your component in a container View, and add your border and padding to that View.
react native don't have an option for
boxSixing: "border-box"
what you can do in your styling is this
<View style={ {
flex: 1,
alignContent: "center",
justifyContent: "center",
}}>
<View style={ {
flex: 1,
width: "95%" // or width of the box - intended margin
}}>
***chi;dren goes here***
<View/>
<View/>
Any component that goes into that view will be at the center With a margin of 5% or whats is specified, which solves the issue for now till react-native provides a better solution
Let O (for outer) = (top, left, bottom, right) be the rectangle that represents the size
* and position of a view V. Since the box-sizing of all React Native views is border-box, any
* border of V will render inside O.
you can use resizeMode: 'cover' or 'stretch' or 'contain'
In my app I'm using <ScrollView /> to view pages of a book scrolling horizontally. When a user gets to the end of the <ScrollView /> there is a bounce that shows a white area to the right that is only visible if the user drags the last page to the left. I want to add some text there that says "The End" vertically. How can I add content to the right of the <ScrollView /> in the bounce area?
I ALMOST figured it out. This is close but shows up in the right side of the last page but not off the page on the right in the bounce area. I want it to show up "to the right of the page" not "on the right side of the page." Any other ideas?
Create a <View style={styles.end} /> with this style:
theEnd: {
position: 'absolute',
top: 0,
right: 0,
width: 100,
height: 768, // Device height
alignItems: 'center',
}
Place it right before the <ScrollView /> and put whatever you want to show inside of the View component with the "theEnd" style.
This probably doesn't apply to your content, but I had the same situation except with a large image for the ScrollView content. I wanted both horizontal and vertical scrolling, where the edge of the image would show up only in the bounce margin. I figured out that the scale transformation works great for this:
<ScrollView horizontal={true}>
<Image
source={require('./img/map.jpg')}
style={{transform: [{scale: 1.1}]}}
/>
</ScrollView>
So the image takes up 110% of the height and width of its box (which is then inside a yet smaller ScrollView).
EDIT: FYI, after testing, discovered this only works on iOS, not Android. (Android won't allow vertical scrolling if you set horizontal to true, and also I think it didn't render the parts outside of the normal viewing area, so the bounce margin was empty.)
there is a prop for this called contentContainerStyle
<ScrollView
horizontal={true}
contentContainerStyle={{
paddingLeft: 25,
paddingRight: 25,
}}>
*** CONTENT ***
</ScrollView>