Trying to add elevation (shadow) to View works, however my second View, which renders circle, hides under View with elevation property. If elevation is removed, circle with position: 'absolute' is working properly.
Any ideas how to use elevation and position View absolute?
My Code:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Platform, TouchableOpacity } from 'react-native';
import { Font } from 'expo';
export default class Position extends Component {
render() {
return (
<View style={{ flex: 1, marginTop: 25 }}>
<View style={{ height: 50, backgroundColor: 'red', elevation: 3}}/>
<View style={styles.circle}><Text>HELLO</Text></View>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
position: 'absolute',
backgroundColor: 'yellow',
width: 60,
height: 60,
top: 30,
borderRadius: 100,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
}
});
Found resolution by adding elevation to circle View as well.
Add shadow to circle as well and increase shadow level of circle by 1. So in your case add elevation 4 for circle.
Related
I am using ImageBackground in my react native app, but it not covering full height of the View
You can see that there is red space which is not covered by my image.
Below is my code:
<View
style={styles.subDomainItem}>
<ImageBackground
resizeMode={'cover'}
source={ImageConfig.script_default_cloud}
style={{
width: '100%',
height: (dimensions.width - 20) / 2,
backgroundColor: 'red',
flex: 1,
justifyContent: 'center',
}}></ImageBackground>
</View>
subDomainItem: {
maxWidth: '94%',
width: '94%',
marginHorizontal: '3%',
marginVertical: 10,
overflow: 'hidden',
borderRadius: 10,
flex: 1,
elevation: 8,
},
I want my image to cover all the red spaces at top and bottom, but I don't know what I am doing wrong.
Try this. is wroking fine
import React from 'react'
import { View, ImageBackground,Text, Dimensions } from 'react-native'
const Backimage = () => {
return(
<ImageBackground
style={{width:Dimensions.get("screen").width, height:Dimensions.get("screen").height}}
source={require("./src/assets/water.png")} resizeMethod="resize">
</ImageBackground>
)
}
export default Backimage
I think you should give your subDomainItem view an explicit height when styling it. You gave it a width of 94% but you haven‘t specified a height.
ImageBackground should then work properly by giving it a height of 100% if the parent component (subDomainItem in this case) has an explicit height.
You don't want to give a height and width for ImageBackground if you want to cover all space of parent View you just need give flex: 1 or height and width to 100% for ImageBackground.
import {
View,
Text,
ImageBackground,
Dimensions,
StyleSheet,
} from 'react-native';
const WIDTH = Dimensions.get('screen').width;
const HEIGHT = Dimensions.get('screen').height;
const MainPage = () => {
return (
<View style={styles.subDomainItem}>
<ImageBackground
resizeMode="contain"
source={ImageConfig.script_default_cloud}
style={styles.bgImageStyle}
>
<Text>Sample</Text>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
subDomainItem: {
width: WIDTH,
height: HEIGHT,
alignItems: 'center',
},
bgImageStyle: {
justifyContent: 'center',
resizeMode: 'contain',
width: WIDTH,
height: HEIGHT,
}
})
In this example i have used react-native-image-slider here i want to show image pagination dots at left side bottom image slider box how to do like that.
SliderBoxExample.js
import React, { Component } from 'react';
import {Image, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { SliderBox } from "react-native-image-slider-box";
export default class SliderBoxExample extends Component {
constructor(props) {
super(props);
this.state = {
images: [
require('./../assets/images/cat.jpg'),
require('./../assets/images/dao.jpg'),
require('./../assets/images/monkey.jpg'),
]
};
}
render() {
const { navigation } = this.props
return (
<View style={styles.container}>
<SliderBox
ImageComponent={Image}
images={this.state.images}
sliderBoxHeight={200}
dotColor="red"
inactiveDotColor="#90A4AE"
paginationBoxVerticalPadding={20}
autoplay
circleLoop
resizeMethod={'resize'}
resizeMode={'cover'}
paginationBoxStyle={{
position: "absolute",
bottom: 0,
padding: 0,
alignItems: "center",
alignSelf: "center",
justifyContent: "center",
paddingVertical: 10
}}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 0,
padding: 0,
margin: 0,
backgroundColor: "rgba(128, 128, 128, 0.92)"
}}
ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 25}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Suggest any solution if you have..
Thanks.
Image change pagination at left side below image slider box..
Windas_Coder! I'm not sure if I got it, but what I understood was that you want to move the pagination dots to the bottom-left side of the content box. An easy way of doing that is to set alignSelf to flex-start inside the property paginationBoxStyle. Something like that:
paginationBoxStyle={{
alignSelf: "flex-start",
}}
So as you can read more about here, you can:
apply this property to a single child to change its alignment within its parent.
Or in another words, change only the position of the pagination box, inside the SliderBox using flex properties.
remove slider box dot.........
<SliderBox
images={this.state.images}
sliderBoxHeight={200}
onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
dotColor="#FFEE58"
inactiveDotColor="#90A4AE"
dotStyle={{
width: 0,
height:0,
borderRadius:0,
marginHorizontal:0,
padding: 0,
margin: 0
}}
/>
I am trying to achieve this layout*. And I've done it, but unfortunately, it is working only on iOs devices. On Android devices, when I press the button in the zone where it overlays the part of the screen which is not in the header doesn't work, even if it is displayed. Also, on Android this property "borderRightColor": ' doesn't seem to work properly. I didn't manage to find if those are some known bugs of the react-native framework or if is something wrong with my code. What can I do to create this layout on both platforms? I've created this snack with my code so far on this issue: https://snack.expo.io/#ivy.mihai/header-with-button-overlaying-the-screen
*Desired layout
How it looks what I've done on Android
How it looks what I've done on iOs
Put the semiCircle View before the button, and avoid zIndex.
The bottom of the button is out of its parent View, so when you touch this part of the button it doesn't work. The only workaround I could find online is to use the TouchableWithoutFeedback (or any Touchable) from the "react-native-gesture-handler" library.
This Touchable renders a bit differently, so I had to change a few things
Then I would add a few advises to go a little further :
Avoid TouchableWithoutFeedback for a button, user needs a Feedback. Prefer TouchableOpacity for ios and TouchableNativeFeedback for android.
Avoid circular icons for buttons. Prefer an icon on a circle View, the background of this View will be used for the ripple effect on android
I clarified the stylesheet and it gives the code below :
import React, { Component } from 'react'
import {
View,
StyleSheet,
Dimensions,
Platform,
TouchableNativeFeedback as RNTouchableNativeFeedback,
} from 'react-native'
import {
TouchableWithoutFeedback,
TouchableOpacity,
TouchableNativeFeedback,
} from 'react-native-gesture-handler'
import { Ionicons } from '#expo/vector-icons'
import { Button } from './src/components/BergamotUI'
const windowWidth = Dimensions.get('window').width
export default class App extends Component {
render() {
const color1 = 'red'
const color2 = 'yellow'
const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableNativeFeedback })
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.buttonContainer}>
<View style={styles.semiCircle} />
<View style={styles.button}>
<Touchable onPress={() => console.log('I am doing something')} useForeground={true}>
<View style={styles.iconWrapper}>
<Ionicons name="ios-add" color={'white'} size={34} />
</View>
</Touchable>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
button: {
overflow: 'hidden',
borderRadius: 50,
},
iconWrapper: {
backgroundColor: 'grey',
width: 50,
height: 50,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.select({ ios: 4, android: 0 }),
paddingLeft: Platform.select({ ios: 2, android: 0 }),
overflow: 'hidden',
},
header: {
width: windowWidth,
height: 108,
borderWidth: 1,
borderColor: 'red',
alignItems: 'flex-end',
justifyContent: 'flex-end',
marginTop: Platform.OS === 'ios' ? Dimensions.StatusBarHeight : 0,
},
buttonContainer: {
position: 'absolute',
right: 10,
width: 80,
height: 40,
borderColor: 'transparent',
flex: 1,
alignItems: 'center',
paddingTop: 15,
//backgroundColor: 'blue',
},
semiCircle: {
position: 'absolute',
bottom: 0,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 1,
width: 80,
height: 40,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
borderBottomWidth: 1,
borderBottomColor: 'white',
},
buttonContainer2: {
borderRadius: 50,
height: 50,
overflow: 'hidden',
},
button2: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
height: 50,
paddingHorizontal: 5,
},
})
Edit 1 : Add the point about the Touchable outside its parents, add TouchableNativeFeedback and TouchableOpacity and rewrote some style
I want to create a View which has one rounded edge on it in react native as you can see in the image. I already have the white view as I want it to be. However, it should extend up to the black curve. What are my options and how can it be achieved?
Thank you in advance.
You can make the white view elliptical by adding a bottom border radius and scaling it up using the transform attribute.
Then if you place it partially above the second view, you will end up with the expected output.
Here is an example:
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.first} />
<View style={styles.second} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: '100%',
backgroundColor: '#fff',
},
first: {
backgroundColor: '#fff',
alignSelf: 'center',
width: 100,
height: 100,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 50,
transform: [{ scaleX: 4 }],
zIndex: 1,
},
second: {
backgroundColor: '#333',
marginTop: -30,
height: 200,
zIndex: 0,
},
});
Here is the example in action.
I am trying to create a view with height of 200 and with some background color. on top of the view i want to place two texts in the center of the screen right below the toolbar. my code is not centering the texts. texts are appearing on the left side but i want them to be centered.
I am using Base.js style script as a way to standardize my application to reuse styles
see attached image
see code below
//Base.js
import {StyleSheet, Dimensions} from 'react-native'
export const dimensions = {
fullHeight: Dimensions.get('window').height,
fullWidth: Dimensions.get('window').width
}
export const colors = {
primary: '#039BE5',
secondary: '#027CB7',
tertiary: '#FF4081'
}
export const padding = {
sm: 10,
md: 20,
lg: 30,
xl: 40
}
export const margin = {
margin_1dp: 1,
margin_4dp: 4,
}
export const fonts = {
font_18sp: 18,
font_44sp: 44,
lg: 28,
//primary: 'Cochin'
}
export const pos = {
position: 'absolute',
top: 0,
alignItems: 'center',
justifyContent:'center',
}
// added below our colors, fonts, padding etc
// base styles
const baseStyles = {
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
},
header: {
backgroundColor: 'transparent',
position: pos.position,
top: 0,
fontSize: fonts.font_44sp,
fontFamily: fonts.primary,
fontWeight: 'bold',
color: 'black',
textAlign: 'center',
},
sub_header: {
backgroundColor: 'transparent',
position: pos.position,
top: 55,
fontSize: fonts.font_18sp,
fontFamily: fonts.primary,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
image: {
height: 200, justifyContent:'center', backgroundColor: '#00BCD4'
},
section: {
paddingVertical: padding.lg,
paddingHorizontal: padding.xl
},
}
export default function createStyles(overrides = {}) {
return StyleSheet.create({...baseStyles, ...overrides})
}
//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components
import createStyles from '../styles/Base.js'
const styles = createStyles()
//import styles from './Style.js'
export default class Screen1 extends Component {
//Screen1 Component
render() {
return (
<View style={styles.container}>
<View style={{ height: 200, justifyContent:'center', backgroundColor: '#00BCD4' }} />
<Text style={styles.header}> $0.00 </Text>
<Text style={styles.sub_header}> Current Balance </Text>
</View>
);
}
texts should be center in the middle of the screen and below the toolbar.
can anyone help fix my code so that the texts are center? thanks in advance
The default flexDirection in react-native is column ... so you don need to specify it ... and alignItems will center children horizontally with column-flex-direction
<View
style={{ alignItems: 'center', backgroundColor: '#00BCD4', height: 200 }}
>
<Text style={styles.header}> $0.00 </Text>
<Text style={styles.sub_header}> Current Balance </Text>
</View>
So this might not solve everything but a common mistake people make when it comes to flexbox is they don't realize when they specify a flex-direction, the styles you use to center get reversed.
Typically if flex-direction was set to default which is row, you would use align-items to vertically center.
However, because you have it set to column, you need to use justify-content instead.
This is a pretty good article on flex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/